/* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #3e3a39;
        }

        /* Main container */
        .scroll-container {
            height: 100vh;
            overflow-y: scroll;
            /* Ensure proper scrolling performance */
            -webkit-overflow-scrolling: touch;
            /* Prevent horizontal scrolling */
            overflow-x: hidden;
        }

        /* Section base styles */
        .section {
            height: 100vh;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Ensure sections fill viewport exactly */
            /* min-height: 100vh; */
            /* Prevent content overflow affecting snap */
            overflow: hidden;
        }

        /* Individual section backgrounds */
        .section-1 {
            background-image: none;
            min-height: 630px;
        }

        .section-main {
            background: #ffffff;
            height: auto;
            align-items: flex-start;
            justify-content: flex-start;
            overflow: visible;
        }

        .section-main .content {
            max-width: none;
            width: 100%;
            padding: 20px 0 0 0;
        }

        .section-main-figure {
            position: relative;
            width: 100%;
        }

        .section-main-figure picture {
            display: block;
            width: 100%;
            
        }

        .section-main-figure img {
            width: 100%;
            height: auto;
            min-height: 2145px;
            display: block;
        }

        .main-card-stack {
            position: static;
        }

        .main-card {
            position: absolute;
            width: min(460px, 82%);
            background: rgba(255, 255, 255, 0.85);
            border-radius: 10px;
            padding: 24px 26px;
            box-shadow: none;
            color: #3e3a39;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.9s ease, transform 0.9s ease;
            z-index: 2;
        }

        .main-card.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .main-card h2 {
            margin: 0 0 1.5rem 0;
            font-size: 2.3rem;
            font-weight: 400;
            color: #479ac4;
            font-family: "Philosopher", "Noto Serif TC", serif;
            letter-spacing: 0.1em;
            line-height: 1.2;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .main-card h2 .title-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

        .main-card h2 .title-zh {
            font-family: "Noto Serif TC", serif;
        }

        .main-card h2 .title-divider {
            font-family: "Noto Serif TC", serif;
            display: inline-block;
            transform: scaleY(0.7);
        }

        .main-card h2 .title-en {
            font-family: "Philosopher", "Noto Serif TC", serif;
            letter-spacing: 0.06em;
        }

        .main-card .main-card-subtitle {
            margin: 0 0 10px 0;
            font-size: 1.1rem;
            font-weight: 600;
            line-height: 1.5;
            color: #3e3a39;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .main-card p {
            margin: 0 0 8px 0;
            font-size: 1rem;
            line-height: 1.6;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .main-card p:last-child {
            margin-bottom: 0;
        }

        .main-card--top {
            top: 12%;
            left: 6%;
            z-index: 1;
        }

        .main-card--middle {
            top: 45%;
            right: 6%;
            z-index: 2;
        }

        .main-card--bottom {
            top: 74%;
            left: 50%;
            transform: translate(-50%, 40px);
            z-index: 3;
        }

        .main-card--bottom.is-visible {
            transform: translate(-50%, 0);
        }

        @media (max-width: 1024px) {
            .main-card {
                width: min(420px, 86%);
                padding: 22px 24px;
            }

            .main-card h2 {
                font-size: 2rem;
                margin-bottom: 1.2rem;
            }

            .main-card .main-card-subtitle {
                font-size: 1rem;
            }

            .main-card p {
                font-size: 0.95rem;
            }

            .main-card--top {
                top: 10%;
                left: 6%;
            }

            .main-card--middle {
                top: 44%;
                right: 6%;
            }

            .main-card--bottom {
                top: 76%;
            }
        }

        @media (max-width: 1023px) and (min-width: 601px) and (orientation: portrait) {
            .main-card {
                width: min(360px, 90%);
                padding: 20px 22px;
            }

            .main-card h2 {
                font-size: 1.8rem;
                margin-bottom: 1rem;
            }

            .main-card .main-card-subtitle {
                font-size: 0.95rem;
            }

            .main-card p {
                font-size: 0.95rem;
            }

            .main-card--top {
                top: 12%;
                left: 50%;
                transform: translateX(-50%) translateY(40px);
            }

            .main-card--top.is-visible {
                transform: translateX(-50%) translateY(0);
            }

            .main-card--middle {
                top: 42%;
                right: 50%;
                transform: translateX(50%) translateY(40px);
            }

            .main-card--middle.is-visible {
                transform: translateX(50%) translateY(0);
            }

            .main-card--bottom {
                top: 72%;
                left: 50%;
                transform: translateX(-50%) translateY(40px);
            }

            .main-card--bottom.is-visible {
                transform: translateX(-50%) translateY(0);
            }
        }

        @media (max-width: 600px) {
            .section-main {
                height: auto !important;
            }

            .section-main .content {
                position: relative;
                height: auto;
                padding: 0;
            }

            .section-main-figure {
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 24px;
                position: relative;
            }

            .section-main-figure img {
                height: auto;
                display: block;

            }

            .main-card {
                width: min(360px, 90%);
                padding: 20px 22px;
                position: static;
                left: auto;
                right: auto;
                transform: translateY(24px) !important;
                opacity: 0;
                transition: opacity 0.8s ease, transform 0.8s ease;
                z-index: 2;
                margin-bottom: 40px;
            }

            .main-card.is-visible {
                opacity: 1;
                transform: translateY(0) !important;
            }

            .main-card h2 {
                font-size: 1.8rem;
                gap: 4px;
            }

            .main-card .main-card-subtitle {
                font-size: 0.95rem;
            }

            .main-card p {
                font-size: 0.95rem;
            }

            .main-card--top {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card--middle {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card--bottom {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card-stack {
                position: absolute;
                inset: 0;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                z-index: 2;
                pointer-events: none;
                padding-top: 52px;
            }
            
            .main-card {
                pointer-events: auto;
            }

            .main-card:last-child {
                margin-bottom: 0;
            }
        }

        @media (max-width: 480px) {
            .section-main {
                height: auto !important;
            }

            .section-main-figure img {
                width: 100%;
                height: auto;
                min-height: auto;
                display: block;
            }

            .main-card-stack {
                padding-top: 165px;
            }

            .main-card {
                width: min(320px, 92%);
                padding: 18px 20px;
                border-radius: 8px;
                left: auto;
                right: auto;
                transform: translateY(24px) !important;
                opacity: 0;
                transition: opacity 0.8s ease, transform 0.8s ease;
                margin-bottom: 40px;
            }

            .main-card h2 {
                font-size: 1.4rem;
                margin-bottom: 1rem;
                font-weight: 600;
            }

            .main-card .main-card-subtitle {
                font-size: 0.95rem;
            }

            .main-card p {
                font-size: 0.95rem;
                line-height: 1.55;
            }

            .main-card--top {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card--middle {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card--bottom {
                top: auto;
                left: auto;
                right: auto;
            }

            .main-card:last-child {
                margin-bottom: 0;
            }
        }

        @media (max-width: 375px) {
            .main-card {
                width: min(280px, 94%);
                padding: 16px 18px;
            }

            .main-card h2 {
                font-size: 1.2rem;
                font-weight: 600;
            }

            .main-card .main-card-subtitle {
                font-size: 0.9rem;
            }

            .main-card p {
                font-size: 0.9rem;
            }
        }

        .section-5 {
            background-image: url('assets/carbon_bg_river.png');
            margin-top: 40px;
        }

        .section-5::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            height: 140px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
            z-index: 1;
        }

        .section-5 .content {
            max-width: none;
            width: 100%;
            height: 100%;
            padding: 0;
        }

        .publicinfo-content {
            max-width: none;
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            position: relative;
            z-index: 2;
            box-sizing: border-box;
        }

        .publicinfo-header {
            position: static;
            text-align: center;
            max-width: 920px;
            margin: 0 auto;
            color: #3e3a39;
        }

        .publicinfo-header h1 {
            margin: 0 0 12px 0;
            font-size: 28px;
            letter-spacing: 0.04em;
            font-family: "Philosopher", "Noto Serif TC", serif;
        }

        .publicinfo-header-title {
            display: inline-flex;
            align-items: baseline;
            gap: 10px;
            justify-content: center;
        }

        .publicinfo-title-zh {
            font-family: "Noto Serif TC", serif;
        }

        .publicinfo-title-en {
            font-family: "Philosopher", "Noto Serif TC", serif;
            letter-spacing: 0.08em;
        }

        .publicinfo-title-divider {
            font-family: "Noto Serif TC", serif;
            opacity: 0.7;
            display: inline-block;
            transform: scaleY(0.65);
        }

        .publicinfo-header p {
            margin: 0 auto;
            line-height: 1.5;
            font-size: 18px;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .publicinfo-board {
            text-align: center;
            color: #3e3a39;
            margin: 12px 0 40px;
        }

        .publicinfo-board-title {
            margin: 0 0 16px;
            font-size: 20px;
            letter-spacing: 0.14em;
            color: #479ac4;
            font-family: "Noto Serif TC", "Philosopher", serif;
        }

        .publicinfo-board-list {
            display: grid;
            gap: 8px;
            font-size: 16px;
            line-height: 1.7;
        }

        .publicinfo-board-row {
            display: grid;
            grid-template-columns: 120px minmax(146px, 1fr);
            justify-content: center;
            column-gap: 6px;
            row-gap: 2px;
            min-width: 268px;
        }

        .publicinfo-board-row span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .publicinfo-links {
            width: min(980px, 100%);
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
            margin-top: 8px;
        }

        .publicinfo-select {
            position: relative;
        }

        .publicinfo-trigger {
            width: 100%;
            border: 1px solid #3e3a39;
            background: #3e3a39;
            color: #ffffff;
            padding: 12px 44px 12px 16px;
            font-size: 16px;
            letter-spacing: 0.06em;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
        }

        .publicinfo-trigger:hover,
        .publicinfo-trigger:focus,
        .publicinfo-trigger:active,
        .publicinfo-select.is-open .publicinfo-trigger {
            background: #479ac4;
            border-color: #3f89ad;
        }

        .publicinfo-select::after {
            content: "";
            position: absolute;
            right: 14px;
            top: 50%;
            width: 10px;
            height: 10px;
            border-right: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            transform: translateY(-60%) rotate(45deg);
            pointer-events: none;
        }

        .publicinfo-select.is-accent .publicinfo-trigger {
            background: #479ac4;
            border-color: #3f89ad;
        }

        .publicinfo-trigger:focus-visible {
            outline: none;
            background: #479ac4;
            border-color: #3f89ad;
            box-shadow: 0 0 0 2px rgba(74, 166, 217, 0.2);
        }

        .publicinfo-menu {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 2px);
            background: #ffffff;
            border: 1px solid #9fa0a0;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
            display: grid;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
            z-index: 8;
        }

        .publicinfo-select.is-open .publicinfo-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .publicinfo-option {
            width: 100%;
            border: none;
            background: #ffffff;
            color: #3e3a39;
            padding: 12px 16px;
            font-size: 16px;
            letter-spacing: 0.04em;
            cursor: pointer;
            text-align: center;
        }

        .publicinfo-option:hover,
        .publicinfo-option:focus-visible {
            background: #ccece6;
            color: #3e3a39;
            outline: none;
        }

        @media (min-width: 1025px) {

            .section-5 {
                min-height: 800px;
            }

        }


        .section-7 {
            background-image: url('assets/carbon_bg_river.png');
            margin-top: 40px;
        }

        .section-7::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            height: 140px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
            z-index: 1;
        }        

        .section-7 .content {
            max-width: none;
            width: 100%;
            height: 100%;
            padding: 0;
        }       

        .section-6-wave-bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -22px;
            height: 120px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V110 C1260,60 1020,60 820,96 C600,150 340,146 140,96 C80,76 30,70 0,64 Z'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 2;
            pointer-events: none;
        }

        .section-5-wave-bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -22px;
            height: 120px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ccece6' d='M0,0 H1440 V110 C1260,60 1020,60 820,96 C600,150 340,146 140,96 C80,76 30,70 0,64 Z'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 2;
            pointer-events: none;
        }

        .footer-section {
            background: #ffffff url('assets/footer_bg_river.png') top/cover no-repeat;
            color: #3e3a39;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 220px;
            padding: 60px 40px 40px;
            position: relative;
            overflow: visible;
        }

        .footer-wave-top {
            position: absolute;
            left: 0;
            right: 0;
            top: -100px;
            height: 140px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V130 C1240,70 1000,70 800,120 C600,180 360,180 160,120 C80,92 30,86 0,82 Z'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            pointer-events: none;
            z-index: 2;
        }

        .footer-content {
            width: min(1200px, 100%);
            display: grid;
            grid-template-columns: 1.4fr 1.3fr 0.7fr 0.6fr;
            gap: 24px;
            align-items: start;
            font-size: 0.95rem;
            letter-spacing: 0.02em;
            line-height: 1.7;
            position: relative;
            z-index: 2;
            margin: 0 auto;
        }

        .footer-brand {
            padding-bottom: 6px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            justify-content: flex-end;
            font-size: 0.8rem;
            align-self: end;
            color: #7b8488;
        }

        .footer-brand-break {
            display: inline;
        }

        .footer-section h4 {
            margin: 0 0 8px 0;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.08em;
        }

        .footer-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-contact,
        .footer-social {
            font-size: 0.9rem;
        }

        .footer-list li {
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-list a {
            color: #3e3a39;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .footer-inline-icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            flex: 0 0 16px;
            margin-top: 1px;
        }

        .footer-inline-icon svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: block;
        }

        .footer-list a:hover {
            color: #66c6e2;
        }

        .social-icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            flex: 0 0 16px;
            margin-top: 2px;
        }

        .social-icon svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: block;
        }

        .footer-logo {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }

        .footer-logo img {
            height: 120px;
            width: auto;
            display: block;
        }

        .footer-logo span {
            font-size: 0.95rem;
            letter-spacing: 0.06em;
        }

        .footer-divider {
            display: none;
        }

        @media (max-width: 1024px) and (min-width: 601px) and (orientation: portrait) {
            .footer-content {
                display: grid;
                grid-template-columns: 1.0fr 1.65fr 0.85fr;
                grid-template-areas:
                    "logo contact social"
                    "divider divider divider"
                    "brand brand brand";
                gap: 16px 20px;
            }

            .footer-logo {
                grid-area: logo;
                align-items: flex-start;
            }

            .footer-logo img {
                padding-left: 12px;
            }

            .footer-contact {
                grid-area: contact;
            }

            .footer-social {
                grid-area: social;
            }

            .footer-contact,
            .footer-social {
                font-size: 0.85rem;
            }

            .footer-divider {
                display: block;
                grid-area: divider;
                height: 1px;
                background: rgba(0, 0, 0, 0.08);
            }

            .footer-brand {
                grid-area: brand;
                justify-content: center;
                align-self: center;
                text-align: center;
                color: #7b8488;
            }

            .footer-brand-break {
                display: none;
            }
        }


        @media (max-width: 600px) {
            .footer-content {
                display: flex;
                flex-direction: column;
                gap: 16px;
                font-size: 0.85rem;
                line-height: 1.4;
                align-items: center;
                text-align: center;
            }

            .footer-section {
                padding-top: 60px;
            }

            .footer-wave-top {
                height: 90px;
                top: -80px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V95 C1260,54 1020,54 820,84 C600,128 340,124 140,84 C80,66 30,60 0,56 Z'/%3E%3C/g%3E%3C/svg%3E");
            }

            .section-6-wave-bottom {
                height: 90px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ccece6' d='M0,0 H1440 V95 C1260,54 1020,54 820,84 C600,128 340,124 140,84 C80,66 30,60 0,56 Z'/%3E%3C/g%3E%3C/svg%3E");
            }

            .section-5-wave-bottom {
                height: 90px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ccece6' d='M0,0 H1440 V95 C1260,54 1020,54 820,84 C600,128 340,124 140,84 C80,66 30,60 0,56 Z'/%3E%3C/g%3E%3C/svg%3E");
            }

            .footer-social h4 {
                font-size: 0.85rem;
            }

            .footer-contact h4 {
                font-size: 0.85rem;
            }

            .footer-logo {
                order: 1;
                margin-bottom: 12px;
            }

            .footer-contact {
                order: 2;
                text-align: center;
            }

            .footer-contact .footer-list li {
                justify-content: center;
            }

            .footer-social {
                order: 3;
            }

            .footer-brand {
                order: 4;
                white-space: nowrap;
                align-self: center;
                text-align: center;
                opacity: 0.8;
            }

            .footer-logo img {
                width: 200px;
                height: auto;
            }

            .footer-brand-break {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .footer-brand {
                white-space: normal;
            }

            .footer-brand-break {
                display: inline;
            }
        }

        .core-actions {
            position: absolute;
            inset: 60px 0 80px 0;
            z-index: 2;
            pointer-events: none;
        }

        .core-item {
            position: absolute;
            max-width: 280px;
            pointer-events: auto;
            cursor: pointer;
        }

        .core-body {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 280px;
            color: #3e3a39;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            opacity: 0;
            transform: translateY(32px) scale(0.96);
            filter: blur(6px);
            animation: none;
            visibility: hidden;
        }

        .core-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: #ffffff;
            display: grid;
            place-items: center;
            flex: 0 0 46px;
            animation: core-glow 1.9s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .core-icon::before {
            content: "";
            position: absolute;
            inset: 6%;
            border-radius: 50%;
            border: 3px solid rgba(71, 154, 196, 0.55);
            box-shadow: 0 0 6px 2px rgba(71, 154, 196, 0.35);
            opacity: 0;
            transform: scale(0.7);
            pointer-events: none;
        }

        .core-item:hover .core-icon::before,
        .core-item:focus-within .core-icon::before {
            animation: ripple 1.6s ease-out infinite;
        }

        .core-item:hover .core-icon,
        .core-item:focus-within .core-icon {
            animation: none;
        }

        .core-icon svg {
            width: 24px;
            height: 24px;
            stroke: #3e3a39;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .core-icon img {
            width: 24px;
            height: 24px;
            display: block;
            color: #3e3a39;
        }

        .core-item:hover .core-icon img,
        .core-item:focus-within .core-icon img {
            filter: brightness(0) invert(1);
        }

        .core-item:hover .core-icon,
        .core-item:focus-within .core-icon {
            background: #479ac4;
        }

        .core-text h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #479ac4;
            font-family: "Philosopher", "Noto Serif TC", serif;
        }

        .core-text p {
            margin: 2px 0 0 0;
            font-size: 13px;
            letter-spacing: 0.04em;
            color: #479ac4;
        }

        .core-item--tl { left: 6%; top: 32%; }
        .core-item--ml { left: 6%; top: 43%; }
        .core-item--bc { left: 6%; top: 54%; }
        .core-item--br { left: 6%; top: 65%; }
        .core-item--tr { left: 6%; top: 76%; }

        .core-item--tr .core-body,
        .core-item--br .core-body,
        .core-item--bc .core-body {
            flex-direction: row;
            text-align: left;
        }

        .core-item.is-animated .core-body {
            animation: core-fade-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-fill-mode: both;
        }

        .core-info-card {
            position: absolute;
            right: 6%;
            bottom: 80px;
            left: auto;
            top: auto;
            transform: translateY(8px);
            width: min(520px, 88%);
            padding: 12px 16px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            color: #3e3a39;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease, transform 0.35s ease;
            z-index: 3;
        }

        .core-info-card h2 {
            margin: 0 0 8px 0;
            font-size: 18px;
            color: #479ac4;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .core-info-card ul {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 15px;
            line-height: 1.7;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .core-info-card li {
            margin: 4px 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .core-info-card li::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: url('assets/icon-dot.png') center / contain no-repeat;
            flex: 0 0 14px;
            margin-top: 4px;
        }

        .core-actions:hover .core-info-card,
        .core-actions:focus-within .core-info-card {
            opacity: 0;
            transform: translateY(8px);
            pointer-events: none;
        }

        .core-item--tl:hover ~ .core-info-card-tl,
        .core-item--tl:focus-within ~ .core-info-card-tl {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .core-item--ml:hover ~ .core-info-card-ml,
        .core-item--ml:focus-within ~ .core-info-card-ml {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .core-item--bc:hover ~ .core-info-card-bc,
        .core-item--bc:focus-within ~ .core-info-card-bc {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .core-item--br:hover ~ .core-info-card-br,
        .core-item--br:focus-within ~ .core-info-card-br {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .core-item--tr:hover ~ .core-info-card-tr,
        .core-item--tr:focus-within ~ .core-info-card-tr {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .core-carousel {
            display: none;
        }

        .core-carousel-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
            color: #3e3a39;
        }

        .core-carousel-header {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #479ac4;
        }

        .core-carousel-icon {
            width: 28px;
            height: 28px;
            display: block;
        }

        .core-carousel-title {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.02em;
            font-family: "Noto Serif TC", "Philosopher", serif;
        }

        .core-carousel-divider {
            height: 1px;
            margin: 12px 0 10px;
            background: rgba(0, 0, 0, 0.15);
        }

        .core-carousel-list {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
            line-height: 1.7;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .core-carousel-list li {
            margin: 8px 0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .core-carousel-list li::before {
            content: "";
            width: 14px;
            height: 14px;
            flex: 0 0 14px;
            margin-top: 4px;
            background: url('assets/icon-dot.png') center / contain no-repeat;
        }

        .core-carousel-controls {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 16px;
        }

        .core-carousel-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(62, 58, 57, 0.28);
            background: rgba(255, 255, 255, 0.7);
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .core-carousel-btn svg {
            width: 18px;
            height: 18px;
            stroke: #3e3a39;
            stroke-width: 2.4;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .core-carousel-btn--prev svg {
            transform: rotate(180deg);
        }

        .core-carousel-btn:active {
            transform: translateY(1px);
        }

        @media (max-width: 1024px) {
            .section-5 {
                
            }


            .core-actions,
            .core-info-card {
                display: none;
            }

            .core-carousel {
                display: block;
                width: min(560px, 92%);
                margin: 18px auto 0;
                position: relative;
                z-index: 2;
            }
        }

        @keyframes core-fade-in {
            0% {
                opacity: 0;
                transform: translateY(32px) scale(0.96);
                filter: blur(6px);
                visibility: visible;
            }
            60% {
                opacity: 0;
                transform: translateY(32px) scale(0.96);
                filter: blur(6px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
                visibility: visible;
            }
        }

        @keyframes core-glow {
            0%,
            100% {
                box-shadow: 0 0 12px rgba(71, 154, 196, 0.25), 0 0 0 0 rgba(71, 154, 196, 0.12);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 26px rgba(71, 154, 196, 0.65), 0 0 18px 6px rgba(71, 154, 196, 0.2);
                transform: scale(1.07);
            }
        }

        @keyframes hero-video-fade {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }





        /* Content container for text and elements */
        .content {
            position: relative;
            z-index: 10;
            max-width: 1200px;
            width: 100%;
            padding: 0 20px;
        }

        /* Mobile-responsive layout - viewport width ≤ 1024px */
        @media (max-width: 1024px) {
            .content {
                padding: 0 15px;
            }

        }

        /* Mobile-responsive layout - viewport width ≤ 768px */
        @media (max-width: 768px) {
            .content {
                padding: 0 15px;
            }

            .section-5 {
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            
            .scroll-container {
                /* Improve mobile scrolling */
                height: 100vh;
                height: 100dvh;
                /* Enhanced touch scrolling for mobile */
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            .river-sections {
                height: 300dvh;
            }
            
            /* Optimize performance for mobile */
            .animated-element {
                /* Reduce animation complexity on mobile */
                transition-duration: 0.9s; /* Faster animations */
            }
        }

        @media (max-width: 480px) {
            .content {
                padding: 0 10px;
            }
            
            /* Even faster animations for small screens */
            .animated-element {
                transition-duration: 0.8s;
            }

            .river-sections {
                height: 300dvh;
            }
        }

        /* Accessibility - Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            .scroll-container {
                scroll-behavior: auto;
                /* Disable snap for reduced motion users if needed */
                scroll-snap-type: none;
            }
            
            .section {
                scroll-snap-align: none;
            }
            
            /* Disable all animations for reduced motion users */
            .animated-element {
                transform: none !important;
                opacity: 1 !important;
                transition: none !important;
                animation: none !important;
            }
            
            /* Disable carbon spot hover animations */
            .carbon-spot {
                transition: none !important;
                animation: none !important;
            }
            
            .carbon-spot::before {
                animation: none !important;
            }

            .core-item {
                opacity: 1 !important;
                transform: none !important;
                animation: none !important;
            }
            
            /* Disable ripple animation */
            @keyframes ripple {
                0%, 100% {
                    opacity: 0;
                    transform: scale(0.6);
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
                }
            }
            
            /* Ensure content is still accessible without animations */
            .animated-element.slide-from-bottom {
                transform: translate3d(0, 0, 0) !important;
                opacity: 1 !important;
            }
        }

        /* Animation styles for hardware acceleration */
        .animated-element {
            /* Enable hardware acceleration */
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
            
            /* Default animation properties - CRITICAL */
            transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                       opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Initial state - hidden */
            opacity: 0;
            
            /* Only add will-change when animating */
        }

        /* Performance optimization classes */
        .gpu-accelerated {
            transform: translate3d(0, 0, 0);
            will-change: transform, opacity;
            backface-visibility: hidden;
        }

        /* Hardware acceleration for scroll container */
        .scroll-container {
            /* Enable hardware acceleration for smooth scrolling */
            transform: translate3d(0, 0, 0);
            /* Only add will-change during actual scrolling */
        }

        /* Hardware acceleration for sections */
        .section {
            /* Enable hardware acceleration for background images */
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            /* Only add will-change when needed */
        }

        /* Hardware acceleration for carbon spots */
        .carbon-spot {
            /* Enable hardware acceleration for hover effects */
            will-change: transform, box-shadow;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
        }

        /* Animation states */
        .slide-from-bottom {
            transform: translate3d(0, 80px, 0);
        }

        /* Animated state - visible */
        .animated-element.animate-in {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }


        /* Section 1 specific styles */
        .section-1-header {
            position: absolute;
            top: 24px;
            left: 40px;
            right: 40px;
            display: grid;
            grid-template-columns: auto 1fr 0.3fr;
            align-items: center;
            gap: 32px;
            z-index: 30;
        }

        .section-1-header::before {
            content: "";
            position: absolute;
            top: -25px;
            left: -160px;
            right: -160px;
            height: 200px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V160 C1200,70 960,70 760,135 C560,205 340,210 140,135 C60,105 20,98 0,92 Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            pointer-events: none;
            z-index: -2;
        }


        .section-1-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 5;
            opacity: 0;
        }

        .section-1.is-animated .section-1-video {
            animation: hero-video-fade 0.8s ease-out forwards;
        }

        .section-1-wave-bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 140px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V130 C1240,70 1000,70 800,120 C600,180 360,180 160,120 C80,92 30,86 0,82 Z'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 15;
            pointer-events: auto;
            /* opacity: 0.95; */
        }

        .section-1-wave-bottom::before {
            content: "";
            position: absolute;
            inset: -12px 0 0 0;
            background-image: inherit;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            pointer-events: none;
        }





        .scroll-indicator {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            width: 28px;
            height: 44px;
            border: 2px solid rgba(0, 0, 0, 0.45);
            border-radius: 999px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            z-index: 16;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            background: transparent;
            padding: 0;
            cursor: pointer;
            appearance: none;
        }

        .scroll-indicator::after {
            content: "";
            width: 6px;
            height: 6px;
            margin-top: 8px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.55);
            animation: scroll-dot 1.6s ease-in-out infinite;
        }

        .section-1-logo img {
            height: 58px;
            width: auto;
            display: block;
        }

        .section-1-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
        }

        .section-1-nav a {
            color: #333;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            transition: color 0.2s ease;
        }

        .section-1-nav a:hover {
            color: #66c6e2;
        }

        .section-1-lang {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-self: end;
        }

        .section-1-lang .lang-toggle {
            background: none;
            border: none;
            color: #333;
            font-size: 0.95rem;
            font-weight: 400;
            letter-spacing: 0.08em;
            cursor: pointer;
            padding: 4px 2px;
            opacity: 0.7;
            text-decoration: none;
            transition: color 0.2s ease, opacity 0.2s ease;
        }

        .section-1-lang .lang-toggle.is-active {
            opacity: 1;
            color: #66c6e2;
        }

        .section-1-lang .lang-toggle:hover {
            color: #66c6e2;
            opacity: 1;
        }

        .section-1-lang .divider {
            color: #333;
            opacity: 0.6;
        }

        .section-1-menu-panel {
            display: contents;
        }

        .section-1-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            width: 40px;
            height: 40px;
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 35;
        }

        .section-1-menu-toggle span {
            display: block;
            width: 22px;
            height: 1.5px;
            background: #333;
            margin: 0;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transform-origin: 50% 50%;
            transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
        }

        .section-1-menu-toggle span:nth-child(1) {
            top: 6px;
        }

        .section-1-menu-toggle span:nth-child(2) {
            top: 13px;
        }

        .section-1-menu-toggle span:nth-child(3) {
            top: 20px;
        }

        .section-1-menu-toggle.is-open span:nth-child(1) {
            top: 13px;
            transform: translateX(-50%) rotate(45deg);
        }

        .section-1-menu-toggle.is-open span:nth-child(2) {
            opacity: 0;
        }

        .section-1-menu-toggle.is-open span:nth-child(3) {
            top: 13px;
            transform: translateX(-50%) rotate(-45deg);
        }

        @media (max-width: 1024px) {
            .section-1-header.menu-open {
                background: #ffffff;
                box-shadow: 0 0 0 100vmax #ffffff;
                clip-path: inset(0 -100vmax);
                top: 0;
                left: 0;
                right: 0;
                padding: 24px 20px 6px;
            }

            .section-1-header.menu-open::before {
                display: none;
            }


            .section-1-menu-panel {
                position: static;
                display: none;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                padding: 12px 0 6px;
                box-shadow: none;
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .section-1-menu-panel.is-open {
                display: flex;
                padding-bottom: 12px;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: #ffffff;
                padding: 88px 20px 64px;
                z-index: 40;
                text-align: center;
            }

            .section-1-nav {
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }

            .section-1-lang {
                justify-content: center;
            }

            .section-1-menu-toggle {
                display: inline-flex;
                justify-self: end;
                grid-column: 2;
                grid-row: 1;
            }

            .section-1-header {
                overflow: visible;
                right: 20px;
                left: 20px;
                grid-template-columns: auto auto;
                justify-content: space-between;
                gap: 12px;
                padding: 6px 0;
            }

            .section-1-logo img {
                height: 56px;
            }

            .section-1-menu-panel.is-open {
                position: relative;
            }

            .section-1-menu-panel.is-open::before {
                display: none;
            }
        }

        .section-1-text {
            width: 100%;
            color: #ffffff;
            text-align: center;
            letter-spacing: 0.1em;
            line-height: 1.2;
            /* Center positioning */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            white-space: normal;
            /* Ensure text is above background */
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.6rem;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .section-1-text .hero-title {
            font-size: 4rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            font-family: "Noto Serif TC", serif;
        }

        .section-1-text .hero-subtitle {
            font-size: 1.9rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            font-family: "Philosopher", "Noto Serif TC", serif;
        }

        .section-1-text .hero-desc {
            font-size: 1.3rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            max-width: 60ch;
        }


        /* Responsive text sizing for section 1 */
        @media (max-width: 768px) {
            .section-1-header.menu-open {
                background: #ffffff;
                top: 0;
                left: 0;
                right: 0;
                padding: 18px 16px 6px;
            }



            .section-1-header {
                top: 16px;
                left: 16px;
                right: 16px;
                grid-template-columns: auto auto;
                justify-content: space-between;
                gap: 12px;
                padding: 6px 0;
            }

            .section-1-header.header-auto-hide {
                transition: transform 0.3s ease, opacity 0.3s ease;
                will-change: transform, opacity;
            }

            .section-1-header.header-auto-hide.is-hidden {
                transform: translateY(-120%);
                opacity: 0;
                pointer-events: none;
            }

            .section-1-logo {
                grid-column: 1;
                grid-row: 1;
            }

            .section-1-logo img {
                height: 56px;
            }

            .section-1-menu-panel {
                position: static;
                display: none;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                padding: 12px 0 6px;
                background: transparent;
                box-shadow: none;
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .section-1-menu-panel.is-open {
                display: flex;
                left: 0;
                right: 0;
                background: #ffffff;
                padding: 84px 16px 56px;
                text-align: center;
            }

            .section-1-nav {
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }

            .section-1-nav a {
                font-size: 1rem;
            }

            .section-1-lang {
                justify-content: center;
            }

            .section-1-menu-toggle {
                display: inline-flex;
                justify-self: end;
                grid-column: 2;
                grid-row: 1;
            }

            .section-1-text {
                gap: 0.5rem;
                top: 42%;
            }

            .section-1-wave-bottom {
                height: 120px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V110 C1260,60 1020,60 820,96 C600,150 340,146 140,96 C80,76 30,70 0,64 Z'/%3E%3C/g%3E%3C/svg%3E");
            }

            .scroll-indicator {
                width: 24px;
                height: 38px;
                bottom: 14px;
            }

            .scroll-indicator::after {
                width: 5px;
                height: 5px;
            }
        }

        @media (max-width: 480px) {
            .section-1-header {
                top: 12px;
            }

            .section-1-logo img {
                height: 48px;
            }

            .section-1-nav {
                gap: 18px;
            }

            .section-1-nav a {
                font-size: 0.95rem;
            }

            .section-1-lang .lang-toggle {
                font-size: 0.85rem;
            }

            .section-1-text {
                text-align: center;
                max-width: 90vw;
                top: 40%;
            }

            .section-1-menu-panel.is-open {
                left: 0;
                right: 0;
                background: #ffffff;
                padding: 66px 16px 48px;
            }

            .section-1-header.menu-open {
                background: #ffffff;
            }


            .section-1-wave-bottom {
                height: 80px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg transform='translate(1440,260) scale(-1,-1)'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V85 C1260,48 1020,48 820,74 C600,112 340,110 140,74 C80,58 30,54 0,50 Z'/%3E%3C/g%3E%3C/svg%3E");
            }

            .scroll-indicator {
                width: 22px;
                height: 34px;
                bottom: 12px;
            }
        }

        @media (max-width: 768px) {
            .section-5 {
                margin-top: 0;
            }

            .core-carousel-list {
                font-size: 15px;
            }
        }

        /* Carbon Display System Styles for Section 5 */
        .carbon-display-container {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 20;
        }

        .carbon-header {
            position: absolute;
            top: 24px;
            left: 24px;
            padding: 12px 16px;
            z-index: 3;
            color: #3e3a39;
        }

        .carbon-display-container.centered-header .carbon-header {
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }


        .carbon-header h1 {
            margin: 0 0 12px 0;
            font-size: 28px;
            letter-spacing: 0.04em;
            font-family: "Philosopher", "Noto Serif TC", serif;
        }

        .carbon-header-title {
            display: inline-flex;
            align-items: baseline;
            gap: 10px;
        }

        .carbon-title-zh {
            font-family: "Noto Serif TC", serif;
        }

        .carbon-title-en {
            font-family: "Philosopher", "Noto Serif TC", serif;
            letter-spacing: 0.08em;
        }

        .carbon-title-divider {
            font-family: "Noto Serif TC", serif;
            opacity: 0.7;
            display: inline-block;
            transform: scaleY(0.65);
        }

        .carbon-header p {
            margin: 0;
            line-height: 1.5;
            font-size: 18px;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .carbon-spot {
            position: absolute;
            width: var(--spot-size, 140px);
            height: var(--spot-size, 140px);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.45);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            z-index: 2;
            overflow: hidden;
        }

        .carbon-spot::after {
            content: "";
            width: 72%;
            height: 72%;
            border-radius: 50%;
            border: 2px dashed rgba(255, 255, 255, 0.45);
            position: absolute;
        }

        .carbon-spot::before {
            content: "";
            position: absolute;
            inset: 6%;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.75);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
            opacity: 0;
            transform: scale(0.7);
            pointer-events: none;
        }


        .carbon-spot:hover::before,
        .carbon-spot:focus-visible::before {
            animation: ripple 1.6s ease-out infinite;
            box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.35);
        }


        .carbon-spot .spot-label-zh,
        .carbon-spot .spot-label-en {
            display: block;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-align: center;
            line-height: 1.1;
            position: relative;
            z-index: 1;
        }

        .carbon-spot .spot-label-zh {
            font-family: "Noto Serif TC", serif;
        }

        .carbon-spot .spot-label-en {
            font-family: "Philosopher", "Noto Serif TC", serif;
            letter-spacing: 0.08em;
            margin-top: 4px;
        }

        .carbon-spot .spot-label-en-second {
            margin-top: 0;
        }

        .carbon-spot.blue .spot-label-zh {
            font-size: 2.3rem;
            line-height: 1.3;
        }

        .carbon-spot.green .spot-label-zh {
            font-size: 2rem;
            line-height: 1.2;
        }

        .carbon-spot.yellow .spot-label-zh {
            font-size: 1.35rem;
            line-height: 1.2;
        }

        .carbon-spot.blue .spot-label-en {
            font-size: 1.85rem;
        }

        .carbon-spot.green .spot-label-en {
            font-size: 1.5rem;
        }

        .carbon-spot.yellow .spot-label-en {
            font-size: 1rem;
        }

        .carbon-spot.blue {
            background: #69c5e2;
            color: rgba(255, 255, 255, 1);
            --spot-delay: 0ms;
            --breathe-delay: 0s;
            overflow: visible;
        }

        .carbon-spot.blue,
        .carbon-spot.blue::after,
        .carbon-spot.blue::before {
            border: none;
        }

        .carbon-spot.blue::after {
            width: 100%;
            height: 100%;
            inset: 0;
            background: #1e9dc8;
            border-radius: 50%;
            transform: scale(0);
            transform-origin: center;
            opacity: 0;
            animation: pulse 2.5s ease-in-out infinite;
            z-index: 0;
        }

        .carbon-spot.green {
            background: #64954f;
            color: rgba(255, 255, 255, 1);
            --spot-delay: 300ms;
            --breathe-delay: 0.6s;
            overflow: visible;
        }

        .carbon-spot.green,
        .carbon-spot.green::after,
        .carbon-spot.green::before {
            border: none;
        }

        .carbon-spot.green::after {
            width: 100%;
            height: 100%;
            inset: 0;
            background: #3f7a3b;
            border-radius: 50%;
            transform: scale(0);
            transform-origin: center;
            opacity: 0;
            animation: pulse 2.5s ease-in-out infinite;
            z-index: 0;
        }

        .carbon-spot.yellow {
            background: #fdd300;
            color: rgba(0, 0, 0, 0.9);
            --spot-delay: 600ms;
            --breathe-delay: 1.2s;
            overflow: visible;
        }

        .carbon-spot.yellow,
        .carbon-spot.yellow::after,
        .carbon-spot.yellow::before {
            border: none;
        }

        .carbon-spot.yellow::after {
            width: 100%;
            height: 100%;
            inset: 0;
            background: #e3b800;
            border-radius: 50%;
            transform: scale(0);
            transform-origin: center;
            opacity: 0;
            animation: pulse 2.5s ease-in-out infinite;
            z-index: 0;
        }

        .carbon-spot:hover,
        .carbon-spot:focus-visible {
            will-change: transform, box-shadow;
            transform: scale(1.05);
            box-shadow: 0 0 55px rgba(255, 255, 255, 0.45);
        }

        .carbon-spot:hover::after,
        .carbon-spot:focus-visible::after {
            filter: opacity(0);
        }

        .carbon-display-container.is-animated .carbon-spot {
            opacity: 0;
            animation-name: spot-fade-in;
            animation-duration: 0.7s;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            animation-delay: var(--spot-delay, 0ms);
        }

        .carbon-info-card {
            display: block;
            position: absolute;
            left: auto;
            right: 90px;
            top: 63%;
            transform: translateY(-50%);
            bottom: auto;
            width: 320px;
            max-width: 320px;
            padding: 14px 20px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            z-index: 3;
            color: #3e3a39;
        }

        .carbon-info-card h2 {
            margin: 0 0 8px 0;
            font-size: 18px;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .carbon-info-title.blue {
            color: #66c6e2;
        }

        .carbon-info-title.green {
            color: #64954f;
        }

        .carbon-info-title.yellow {
            color: #ffce00;
        }

        .carbon-info-card p {
            margin: 0;
            font-size: 16px;
            line-height: 1.7;
            font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .carbon-info-nav {
            display: none;
        }

        @media (max-width: 1024px) {
            .carbon-info-card {
                left: 50%;
                right: auto;
                width: min(500px, 86%);
                max-width: 500px;
                top: 68%;
                bottom: auto;
                transform: translateX(-50%);
                padding: 12px 22px;
                font-size: 16px;
            }

            .carbon-info-nav {
                position: absolute;
                top: 50%;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                border: 1px solid rgba(62, 58, 57, 0.3);
                background: rgba(255, 255, 255, 0.85);
                display: grid;
                place-items: center;
                cursor: pointer;
                transform: translateY(-50%);
            }

            .carbon-info-nav svg {
                width: 16px;
                height: 16px;
                stroke: #3e3a39;
                stroke-width: 2.4;
                fill: none;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .carbon-info-nav--prev {
                left: -20px;
            }

            .carbon-info-nav--next {
                right: -20px;
            }

            .carbon-info-nav--prev svg {
                transform: rotate(180deg);
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
            will-change: opacity, transform;
        }

        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
            transform: translateY(calc(-50% + 14px));
        }

        .fade-enter-to,
        .fade-leave-from {
            opacity: 1;
            transform: translateY(-50%);
        }

        @keyframes ripple {
            0% {
                opacity: 0.75;
                transform: scale(0.6);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
            }
            100% {
                opacity: 0;
                transform: scale(1.5);
                box-shadow: 0 0 0 22px rgba(255, 255, 255, 0);
            }
        }

        @keyframes carbon-breathe {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.03);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            60% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.15);
                opacity: 0;
            }
        }

        @keyframes spot-fade-in {
            0% {
                opacity: 0;
                filter: blur(2px);
                transform: scale(0.7);
            }
            100% {
                opacity: 1;
                filter: blur(0);
                transform: scale(1);
            }
        }

        @keyframes scroll-dot {
            0% {
                opacity: 0;
                transform: translateY(0);
            }
            40% {
                opacity: 1;
                transform: translateY(6px);
            }
            100% {
                opacity: 0;
                transform: translateY(14px);
            }
        }

        @keyframes spot-glow {
            0%,
            100% {
                box-shadow: 0 0 16px rgba(255, 255, 255, 0.18), 0 0 0 0 rgba(255, 255, 255, 0.08);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 42px rgba(255, 255, 255, 0.5), 0 0 18px 6px rgba(255, 255, 255, 0.18);
                transform: scale(1.03);
            }
        }

        /* Responsive design for carbon display */
        @media (max-width: 768px) {
            .carbon-header {
                top: 18px;
                left: 18px;
                max-width: none;
                width: calc(100% - 36px);
                padding: 12px 16px;
            }

            .carbon-header h1 {
                font-size: 22px;
                white-space: nowrap;
            }

            .carbon-info-card {
                left: 50%;
                right: auto;
                width: min(380px, 86%);
                max-width: 380px;
                top: 68%;
                bottom: auto;
                transform: translateX(-50%);
                padding: 12px 22px;
                font-size: 16px;
            }
            
            .carbon-info-nav {
                position: absolute;
                top: 50%;
                width: 34px;
                height: 34px;
                border-radius: 50%;
                border: 1px solid rgba(62, 58, 57, 0.3);
                background: rgba(255, 255, 255, 0.85);
                display: grid;
                place-items: center;
                cursor: pointer;
                transform: translateY(-50%);
            }

            .carbon-info-nav svg {
                width: 16px;
                height: 16px;
                stroke: #3e3a39;
                stroke-width: 2.4;
                fill: none;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .carbon-info-nav--prev {
                left: -18px;
            }

            .carbon-info-nav--next {
                right: -18px;
            }

            .carbon-info-nav--prev svg {
                transform: rotate(180deg);
            }
            
            /* Adjust carbon spot sizes for mobile */
            .carbon-spot {
                /* Mobile spots will be sized by Vue.js responsive logic */
                border-width: 1.5px;
            }
            
            .carbon-spot::after {
                border-width: 1.5px;
            }
            
            .carbon-spot::before {
                border-width: 1.5px;
            }

            .carbon-spot::before {
                animation: none;
            }
            
            .carbon-spot .spot-label-zh {
                font-weight: 400;
            }

            .carbon-spot.blue .spot-label-zh {
                font-size: 1.8rem;
            }

            .carbon-spot.green .spot-label-zh {
                font-size: 1.5rem;
            }

            .carbon-spot.yellow .spot-label-zh {
                font-size: 1.35rem;
                line-height: 1.1;
            }


            .carbon-spot.blue .spot-label-en {
                font-size: 1.3rem;
            }

            .carbon-spot.green .spot-label-en {
                font-size: 1.15rem;
            }

            .carbon-spot.yellow .spot-label-en {
                font-size: 0.9rem;
            }

            .core-item {
                max-width: 220px;
            }

            .core-item--tl { left: 4%; top: 44%; }
            .core-item--tr { right: 4%; top: 40%; }
            .core-item--ml { left: 4%; top: 70%; }
            .core-item--bc { top: 76%; }
            .core-item--br { right: 4%; top: 72%; }
        }

        @media (max-width: 480px) {
            .scroll-indicator {
                display: none;
            }

            .carbon-header {
                top: 14px;
                left: 14px;
                padding: 12px 16px;
                max-width: none;
                width: calc(100% - 28px);
            }

            .carbon-header h1 {
                white-space: nowrap;
            }

            .carbon-header p {
                font-size: 16px;
            }

            .carbon-info-card {
                left: 50%;
                right: auto;
                top: 58%;
                bottom: auto;
                width: min(300px, 88%);
                max-width: 300px;
                padding: 14px 20px;
                border-radius: 4px;
                transform: translateX(-50%);
            }
            
            .carbon-info-card h2 {
                font-size: 18px;
                line-height: 1.5;
            }
            
            .carbon-info-card p {
                font-size: 16px;
                line-height: 1.6;
            }

            .carbon-info-nav {
                width: 36px;
                height: 36px;
            }
            
            .carbon-spot span {
                font-weight: 400;
            }

            .carbon-spot.blue span {
                font-size: 1.8rem;
            }

            .carbon-spot.blue .spot-label-zh {
                font-size: 1.55rem;
            }

            .carbon-spot.blue .spot-label-en {
                font-size: 1.25rem;
            }

            .carbon-spot.green span {
                font-size: 1.4rem;
            }

            .carbon-spot.green .spot-label-zh {
                font-size: 1.15rem;
            }

            .carbon-spot.green .spot-label-en {
                font-size: 1rem;
            }

            .carbon-spot.yellow span {
                font-size: 1.1rem;
            }

            .carbon-spot.yellow .spot-label-zh {
                font-size: 0.85rem;
            }

            .carbon-spot.yellow .spot-label-en {
                font-size: 0.7rem;
            }

            .carbon-spot.yellow .spot-label-en-second {
                font-size: 0.7rem;
            }

            .core-item {
                display: none;
            }

            .core-actions {
                display: none;
            }

            .core-item--tr .core-body,
            .core-item--br .core-body,
            .core-item--bc .core-body {
                flex-direction: row;
                text-align: left;
            }

            .core-item--bc {
                transform: none;
            }

            .core-body {
                max-width: none;
                justify-content: center;
            }

            .core-info-card {
                display: none;
            }
        }

        .section-1-text,
        .carbon-header {
            font-family: "Philosopher", "Noto Serif TC", serif;
        }

        @media (max-width: 768px) {
            .section-1-text .hero-title {
                font-size: 3.5rem;
                letter-spacing: 0.05em;
            }

            .section-1-text .hero-subtitle {
                font-size: 1rem;
                letter-spacing: 0.12em;
            }

            .section-1-text .hero-desc {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .section-1-text .hero-title {
                font-size: 2rem;
            }

            .section-1-text .hero-subtitle {
                font-size: 0.9rem;
                letter-spacing: 0.1em;
            }

            .section-1-text .hero-desc {
                font-size: 0.9rem;
            }
        }

        body * {
            text-shadow: none;
        }

        /* .section-1-text .hero-subtitle,
        .section-1-text .hero-desc {
            text-shadow:
                0 2px 6px rgba(255, 255, 255, 0.65),
                0 6px 14px rgba(90, 180, 215, 0.6);
        } */

        .section-1-text .hero-title {
            position: relative;
            display: inline-block;
        }

        .section-1-text .hero-title::before {
            content: attr(data-text);
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(90deg, #4aa6d9 0%, #5cc59b 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(10px);
            opacity: 0.7;
            pointer-events: none;
        }

         /* section-6 faq-collapse */
         .section-6 {
            background-color: #ccece6;
            padding-bottom: 20px;
         }
        .page{ 
            min-height:100%; 
            background: #ccece6;
        }

        .faq-hero{
            padding: 56px 20px 80px;
        }

        .wrap{
            max-width: 1400px;
            margin: 0 auto 20px;
        }

        .title-area{
            text-align: center;
            margin-bottom: 34px;
            color: #3e3a39;
        }

        .title{
            margin: 0;
            font-size: clamp(22px, 1.88vw, 28px);
            letter-spacing: .04em;
            font-family: "Noto Serif TC", "Philosopher", serif;
        }

        .title .sep{ opacity:.35; margin: 0 8px; }
        .title .en{ font-weight: 800; letter-spacing: .06em; }

        .subtitle{
            max-width: 830px;
            margin: 14px auto 0;
            font-size: 17px;
            line-height: 1.8;
            color: rgba(31,42,46,.75);
        }

        .faq-content{
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 20px;
            align-items: start;
        }

        .left-visual{
            position: sticky;
            top: 120px;          /* 可調：距離視窗頂端 */
            align-self: start;   /* 很重要：避免 grid 自己拉伸 */
            display: flex;
            justify-content: flex-end;
            padding: 10px 20px;
        }



        .left-visual img{
            width: min(620px, 100%);
            height: auto;
            display:block;
        }

        /* 右側 FAQ */
        .faq{
            display:flex;
            flex-direction: column;
            gap: 14px;
            padding: 0 10px;
        }

        .faq-item{
            border-radius: 12px;
            overflow: hidden;
            background: rgba(255,255,255,.55);
            border: 1px solid rgba(12, 50, 60, .10);
        }

        .faq-head{
            width: 100%;
            display:flex;
            align-items:center;
            gap: 10px;
            padding: 16px 18px;
            border: 0;
            cursor: pointer;
            background: rgba(255,255,255,.65);
            color: #3e3a39;
            font-weight: 700;
            letter-spacing: .02em;
        }

        .faq-head .icon{
            width: 24px;
            height: 24px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }

        /* 左側放大鏡 SVG */

        .faq-head .icon img{
            width: 20px;
            height: 20px;
            display:block;
        }

        .faq-title{
            font-size: 17px;
            color: #2b7ea1;
            font-family: "Noto Serif TC", "Philosopher", serif;
        }

        .spacer{ flex:1; }

        /* 右側 + / x */
        .toggle{
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid rgba(12, 50, 60, .10);
            background: rgba(255,255,255,.7);
            display:grid;
            place-items:center;
            /* font-size: 18px;
            line-height: 1; */
            color: rgba(0,0,0,.55);
        }

        .toggle{
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid rgba(12, 50, 60, .10);
            background: rgba(255,255,255,.7);
            display:grid;
            place-items:center;
            color: rgba(0,0,0,.55);
        }

        .toggle svg{
            width: 16px;
            height: 16px;
            display:block;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* 預設：只顯示 + */
        .toggle .toggle-plus { display: block; }
        .toggle .toggle-x { display: none; }

        /* 展開：只顯示 x */
        .faq-item.is-open .toggle .toggle-plus { display: none; }
        .faq-item.is-open .toggle .toggle-x { display: block; }

        .faq-panel{
            height: 0;
            overflow: hidden;
            transition: height 280ms ease;
            background: rgba(255,255,255,.86);
        }

        .faq-body{
            padding: 8px 36px 18px 22px;
            color: rgba(31,42,46,.85);
            font-size: 15px;
            line-height: 1.75;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }

        .faq-body ul{
            margin: 0;
            padding-left: 18px;
        }
        .faq-body li{ margin: 6px 0; }

        /* RWD：手機改上下排 */
        @media (max-width: 960px){
        .faq-hero {
            padding: 56px 32px 80px;
        }  
        .faq-content{
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .left-visual{
            order: 1;
        }
        .left-visual{
            position: static;
            top: auto;
            justify-content: center;
            padding: 10px;
        }
        .faq{
            padding: 0px;
        }
        .right-faq{
            order: 2;
        }
        .title-area{ margin-bottom: 18px; }
        }

        @media (max-width: 480px){
        .faq-hero {
            padding: 56px 20px 80px;
        }  
        }

        @media (max-width: 768px) {
            .publicinfo-header h1 {
                font-size: 21px;
            }
        }

        @media (max-width: 480px) {
            .publicinfo-content {
                padding: 0 10px;
            }

            .publicinfo-header-title {
                flex-direction: column;
                align-items: center;
                gap: 4px;
            }

            .publicinfo-title-divider {
                display: none;
            }

            .publicinfo-header--inline .publicinfo-header-title {
                flex-direction: row;
                gap: 10px;
                white-space: nowrap;
            }

            .publicinfo-header--inline .publicinfo-title-divider {
                display: inline-block;
            }

            .publicinfo-header--compact-en .publicinfo-title-en {
                font-size: 0.72em;
                letter-spacing: 0.04em;
            }

            .publicinfo-header--inline .publicinfo-header-title {
                font-size: 21px;
                letter-spacing: 0.03em;
            }

            .publicinfo-header p {
                font-size: 16px;
            }

            .publicinfo-links {
                grid-template-columns: 1fr;
            }

            .footer-section {
                background-image: url('assets/footer_bg_river_m.png');
                background-position: center top;
                background-size: cover;
                background-repeat: no-repeat;
                padding: 60px 20px 20px;
            }
        }