:root {
                --glass-radius: 1.5rem;
                --glass-radius-sm: 1rem;
                --glass-bg: rgba(255, 255, 255, 0.55);
                --glass-bg-strong: rgba(255, 255, 255, 0.75);
                --glass-border: 1px solid rgba(255, 255, 255, 0.6);
                --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
                --glass-shadow-hover: 0 20px 60px rgba(var(--bs-primary-rgb), 0.18);
                --ink: #1a1d29;
                --ink-soft: #5a6072;
            }

            /* ===== STAGE ===== */
            .stage {
                position: relative;
                background:
                    radial-gradient(1200px 600px at 10% -10%, rgba(var(--bs-primary-rgb), 0.18), transparent 60%),
                    radial-gradient(900px 500px at 110% 20%, rgba(var(--bs-primary-rgb), 0.12), transparent 60%),
                    radial-gradient(800px 600px at 50% 110%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%),
                    linear-gradient(180deg, #f5f7fb 0%, #eef1f8 100%);
                overflow: hidden;
            }

            .stage::before,
            .stage::after {
                content: "";
                position: absolute;
                border-radius: 50%;
                filter: blur(80px);
                z-index: 0;
                pointer-events: none;
            }

            .stage::before {
                width: 500px;
                height: 500px;
                background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.35), transparent 70%);
                top: 20%;
                left: -200px;
                animation: float-blob 18s ease-in-out infinite;
            }

            .stage::after {
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.22), transparent 70%);
                bottom: 10%;
                right: -250px;
                animation: float-blob 22s ease-in-out infinite reverse;
            }

            @keyframes float-blob {

                0%,
                100% {
                    transform: translate(0, 0) scale(1);
                }

                50% {
                    transform: translate(40px, -30px) scale(1.1);
                }
            }

            .stage>* {
                position: relative;
                z-index: 1;
            }

            /* ===== GLASS BASE ===== */
            .glass {
                background: var(--glass-bg);
                backdrop-filter: blur(20px) saturate(160%);
                -webkit-backdrop-filter: blur(20px) saturate(160%);
                border: var(--glass-border);
                border-radius: var(--glass-radius);
                box-shadow: var(--glass-shadow);
                transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
            }

            .glass-strong {
                background: var(--glass-bg-strong);
                backdrop-filter: blur(24px) saturate(180%);
                -webkit-backdrop-filter: blur(24px) saturate(180%);
                border: var(--glass-border);
                border-radius: var(--glass-radius);
                box-shadow: var(--glass-shadow);
            }

            .glass-hover:hover {
                transform: translateY(-6px);
                box-shadow: var(--glass-shadow-hover);
            }

            /* ===== TYPOGRAPHY ===== */
            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 0.25em;
                text-transform: uppercase;
                color: var(--bs-primary);
                padding: 0.4rem 0.9rem;
                background: rgba(var(--bs-primary-rgb), 0.1);
                border-radius: 999px;
                margin-bottom: 1.25rem;
            }

            .eyebrow .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--bs-primary);
                box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
            }

            .h-display {
                font-weight: 800;
                letter-spacing: -0.035em;
                line-height: 1.05;
                color: var(--ink);
            }

            .h-section {
                font-size: clamp(1.85rem, 3.5vw, 2.75rem);
                font-weight: 800;
                letter-spacing: -0.025em;
                line-height: 1.1;
                color: var(--ink);
                margin: 0;
            }

            .h-section .accent {
                background: linear-gradient(120deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.65));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .lead-soft {
                color: var(--ink-soft);
                font-size: 1.05rem;
                line-height: 1.7;
                max-width: 620px;
            }

            /* ===== SECTION SPACING ===== */
            .section-pad {
                padding-top: 6rem;
                padding-bottom: 2rem;
            }

            /*
                    @media (max-width: 768px) {
                        .section-pad {
                            padding-top: 4rem;
                            padding-bottom: 4rem;
                        }
                    } */

            /* ===== ABOUT ASYMMETRIC ===== */
            .about-grid {
                display: grid;
                grid-template-columns: 1.1fr 0.9fr;
                gap: 3rem;
                align-items: top;
            }

            @media (max-width: 991px) {
                .about-grid {
                    grid-template-columns: 1fr;
                    gap: 2.5rem;
                }
            }

            .about-visual {
                position: relative;
                aspect-ratio: 16 / 10;
            }

            .about-visual img {
                position: absolute;
                inset: 0;
                width: 100%;
                /* height: 100%; */
                /* object-fit: cover; */
                border-radius: var(--glass-radius);
                box-shadow: 0 30px 60px -20px rgba(var(--bs-primary-rgb), 0.35);
            }

            .about-badge {
                position: absolute;
                bottom: -1.5rem;
                left: -1.5rem;
                padding: 1.25rem 1.5rem;
                z-index: 3;
                min-width: 180px;
            }

            .about-badge .num {
                font-size: 2rem;
                font-weight: 800;
                color: var(--bs-primary);
                line-height: 1;
                letter-spacing: -0.02em;
            }

            .about-badge .lbl {
                font-size: 0.8rem;
                color: var(--ink-soft);
                margin: 0.25rem 0 0;
            }

            .about-ring {
                position: absolute;
                top: -1.5rem;
                right: -1.5rem;
                width: 140px;
                height: 140px;
                border: 2px dashed rgba(var(--bs-primary-rgb), 0.4);
                border-radius: 50%;
                z-index: 0;
                animation: spin 30s linear infinite;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            /* ===== TAUTAN PILLS ===== */
            .pill-link {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1.25rem 1.5rem;
                text-decoration: none;
                transition: all 0.4s ease;
                height: 100%;
            }

            .pill-link:hover {
                background: rgba(var(--bs-primary-rgb), 0.08);
            }

            .pill-link .pill-icon {
                width: 3rem;
                height: 3rem;
                border-radius: 0.85rem;
                background: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.7));
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                box-shadow: 0 8px 20px -8px rgba(var(--bs-primary-rgb), 0.6);
            }

            .pill-link .pill-text {
                flex: 1;
                min-width: 0;
            }

            .pill-link .pill-text h6 {
                margin: 0;
                font-weight: 700;
                color: var(--ink);
                font-size: 0.95rem;
            }

            .pill-link .pill-text small {
                color: var(--ink-soft);
                font-size: 0.78rem;
            }

            .pill-link .pill-arrow {
                color: var(--bs-primary);
                opacity: 0;
                transform: translateX(-8px);
                transition: all 0.3s ease;
            }

            .pill-link:hover .pill-arrow {
                opacity: 1;
                transform: translateX(0);
            }

            /* ===== BENTO ===== */
            .bento {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                gap: 1.5rem;
            }

            .bento>* {
                grid-column: span 12;
            }

            @media (min-width: 768px) {
                .bento .b-news-main {
                    grid-column: span 8;
                    grid-row: span 2;
                }

                .bento .b-news-side {
                    grid-column: span 4;
                }

                .bento .b-announce {
                    grid-column: span 4;
                    grid-row: span 2;
                }
            }

            @media (min-width: 992px) {
                .bento.with-announce .b-news-main {
                    grid-column: span 5;
                    grid-row: span 2;
                }

                .bento.with-announce .b-news-side {
                    grid-column: span 3;
                }

                .bento.with-announce .b-announce {
                    grid-column: span 4;
                    grid-row: span 2;
                }

                .bento.no-announce .b-news-main {
                    grid-column: span 6;
                    grid-row: span 2;
                }

                .bento.no-announce .b-news-side {
                    grid-column: span 3;
                }
            }

            .news-card {
                position: relative;
                display: block;
                overflow: hidden;
                border-radius: var(--glass-radius);
                background: #fff;
                box-shadow: var(--glass-shadow);
                text-decoration: none;
                transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
                height: 100%;
                min-height: 280px;
                aspect-ratio: 4 / 3;
            }

            .news-card:hover {
                transform: translateY(-6px);
                box-shadow: var(--glass-shadow-hover);
            }

            .news-card .news-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.8s ease;
            }

            .news-card:hover .news-img {
                transform: scale(1.08);
            }

            .news-card .news-veil {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
            }

            .news-card .news-body {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 1.5rem;
                color: #fff;
            }

            .news-card .news-date {
                display: inline-block;
                font-size: 0.7rem;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                background: rgba(var(--bs-primary-rgb), 0.9);
                backdrop-filter: blur(10px);
                color: #fff;
                padding: 0.3rem 0.7rem;
                border-radius: 999px;
                margin-bottom: 0.75rem;
                font-weight: 600;
            }

            .news-card .news-title {
                font-size: 1.05rem;
                font-weight: 700;
                line-height: 1.4;
                margin: 0;
                color: #fff;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }


            /* ===== ANNOUNCE ===== */
            .announce-panel {
                padding: 1.5rem 1.75rem;
                min-height: 500px;
                display: flex;
                flex-direction: column;
            }

            .announce-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 1rem;
                margin-bottom: 0.5rem;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                flex-shrink: 0;
            }

            .announce-head h5 {
                margin: 0;
                font-weight: 800;
                color: var(--ink);
                letter-spacing: -0.01em;
                font-size: 1rem;
            }

            .announce-head .badge-count {
                font-size: 0.7rem;
                font-weight: 700;
                color: var(--bs-primary);
                background: rgba(var(--bs-primary-rgb), 0.1);
                padding: 0.25rem 0.6rem;
                border-radius: 999px;
            }

            .announce-scroll {
                flex: 1;
                position: relative;
                min-height: 0;
            }

            .announce-list {
                position: absolute;
                inset: 0;
                overflow-y: auto;
                margin: 0 -0.5rem;
                padding: 0.25rem 0.5rem 1.5rem;
                scrollbar-width: thin;
                scrollbar-color: rgba(var(--bs-primary-rgb), 0.3) transparent;
            }

            .announce-list::-webkit-scrollbar {
                width: 4px;
            }

            .announce-list::-webkit-scrollbar-track {
                background: transparent;
            }

            .announce-list::-webkit-scrollbar-thumb {
                background: rgba(var(--bs-primary-rgb), 0.25);
                border-radius: 4px;
            }

            .announce-list::-webkit-scrollbar-thumb:hover {
                background: rgba(var(--bs-primary-rgb), 0.5);
            }

            .announce-scroll::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 40px;
                background: linear-gradient(180deg, transparent, var(--glass-bg-strong));
                pointer-events: none;
                border-bottom-left-radius: var(--glass-radius);
                border-bottom-right-radius: var(--glass-radius);
            }

            .announce-row {
                display: flex;
                gap: 0.85rem;
                padding: 0.85rem;
                border-radius: var(--glass-radius-sm);
                text-decoration: none;
                transition: background 0.3s ease;
                margin-bottom: 0.25rem;
            }

            .announce-row:hover {
                background: rgba(var(--bs-primary-rgb), 0.06);
            }

            .announce-row img {
                width: 56px;
                height: 56px;
                object-fit: cover;
                border-radius: 0.75rem;
                flex-shrink: 0;
            }

            .announce-row .a-date {
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: var(--bs-primary);
                margin: 0;
            }

            .announce-row .a-title {
                font-size: 0.88rem;
                color: var(--ink);
                margin: 0.2rem 0 0;
                line-height: 1.45;
                font-weight: 500;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            /* ===== STATS ASYMMETRIC ===== */
            /* ===== STATS BANNER ===== */
            .stats-banner {
                position: relative;
                overflow: hidden;
                border-radius: var(--glass-radius);
                background: linear-gradient(120deg, var(--bs-primary) 0%, rgba(var(--bs-primary-rgb), 0.82) 100%);
                color: #fff;
                padding: 2.5rem 3rem;
                box-shadow: 0 20px 50px -20px rgba(var(--bs-primary-rgb), 0.45);
            }

            .stats-banner::before,
            .stats-banner::after {
                content: "";
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
            }

            .stats-banner::before {
                width: 320px;
                height: 320px;
                background: rgba(255, 255, 255, 0.08);
                top: -40%;
                right: -8%;
            }

            .stats-banner::after {
                width: 220px;
                height: 220px;
                background: rgba(255, 255, 255, 0.06);
                bottom: -50%;
                left: 30%;
            }

            .stats-banner>* {
                position: relative;
                z-index: 1;
            }

            .stats-banner .sb-title {
                font-size: 1.5rem;
                font-weight: 800;
                color: #fff;
                margin: 0.25rem 0 0;
                letter-spacing: -0.015em;
                line-height: 1.2;
            }

            .stats-banner .sb-sub {
                color: rgba(255, 255, 255, 0.8);
                font-size: 0.9rem;
                margin: 0.5rem 0 0;
            }

            .stats-banner .eyebrow {
                background: rgba(255, 255, 255, 0.18);
                color: #fff;
                margin: 0;
            }

            .stats-banner .eyebrow .dot {
                background: #fff;
                box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
            }

            .sb-numbers {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 0;
            }

            .sb-num-item {
                padding: 0 1.5rem;
                position: relative;
                text-align: center;
            }

            .sb-num-item+.sb-num-item::before {
                content: "";
                position: absolute;
                left: 0;
                top: 15%;
                bottom: 15%;
                width: 1px;
                background: rgba(255, 255, 255, 0.22);
            }

            .sb-num-item .sb-val {
                font-size: clamp(1.75rem, 3vw, 2.5rem);
                font-weight: 800;
                color: #fff;
                line-height: 1;
                letter-spacing: -0.03em;
                margin: 0;
            }

            .sb-num-item .sb-lbl {
                color: rgba(255, 255, 255, 0.78);
                font-size: 0.78rem;
                margin: 0.5rem 0 0;
                font-weight: 500;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }

            .sb-num-item .sb-ic {
                color: rgba(255, 255, 255, 0.55);
                font-size: 1.1rem;
                margin-bottom: 0.4rem;
                display: block;
            }

            @media (max-width: 991px) {
                .stats-banner {
                    padding: 2rem 1.75rem;
                }

                .sb-numbers {
                    grid-template-columns: repeat(2, 1fr);
                    row-gap: 1.5rem;
                }

                .sb-num-item:nth-child(3)::before {
                    display: none;
                }
            }

            @media (max-width: 575px) {
                .sb-numbers {
                    grid-template-columns: 1fr;
                }

                .sb-num-item+.sb-num-item::before {
                    display: none;
                }

                .sb-num-item {
                    padding: 1rem 0;
                    border-top: 1px solid rgba(255, 255, 255, 0.18);
                }

                .sb-num-item:first-child {
                    border-top: none;
                }
            }

            /* ===== BOOKS ===== */
            .book-card {
                position: relative;
                border-radius: var(--glass-radius-sm);
                overflow: hidden;
                background: #fff;
                box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
                transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
                height: 100%;
            }

            .book-card:hover {
                transform: translateY(-10px) rotate(-1deg);
                box-shadow: 0 30px 50px -15px rgba(var(--bs-primary-rgb), 0.35);
            }

            .book-cover-wrap {
                position: relative;
                aspect-ratio: 2 / 3;
                overflow: hidden;
            }

            .book-cover-wrap img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .book-cover-wrap::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            .book-card:hover .book-cover-wrap::after {
                opacity: 1;
            }

            .book-title {
                padding: 0.75rem;
                font-size: 0.78rem;
                color: var(--ink);
                margin: 0;
                line-height: 1.4;
                font-weight: 500;
                background: #fff;
            }

            .book-title span {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                height: calc(0.78rem * 1.4 * 2);
            }

            /* ===== QUOTE ===== */
            .quote-stage {
                position: relative;
                padding: 5rem 0;
                overflow: hidden;
            }

            .quote-stage::before {
                content: "";
                position: absolute;
                inset: 0;
                background:
                    radial-gradient(circle at 20% 30%, rgba(var(--bs-primary-rgb), 0.35), transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(var(--bs-primary-rgb), 0.25), transparent 50%),
                    linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.7));
            }

            .quote-stage>* {
                position: relative;
                z-index: 1;
            }

            .quote-card {
                padding: 3rem 2.5rem;
                background: rgba(255, 255, 255, 0.12);
                backdrop-filter: blur(24px) saturate(180%);
                -webkit-backdrop-filter: blur(24px) saturate(180%);
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-radius: var(--glass-radius);
                text-align: center;
                position: relative;
            }

            .quote-card::before {
                content: "\201C";
                position: absolute;
                top: -1.5rem;
                left: 50%;
                transform: translateX(-50%);
                width: 4rem;
                height: 4rem;
                background: #fff;
                color: var(--bs-primary);
                border-radius: 50%;
                font-family: Georgia, serif;
                font-size: 4rem;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 1rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }

            .quote-text {
                font-size: clamp(1.15rem, 2.2vw, 1.6rem);
                color: #fff;
                font-weight: 400;
                line-height: 1.6;
                font-style: italic;
                margin: 1rem auto 2rem;
                max-width: 700px;
            }

            .quote-avatar {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                object-fit: cover;
                border: 3px solid rgba(255, 255, 255, 0.4);
                margin-bottom: 0.75rem;
            }

            /* ===== GALERI MASONRY-ish ===== */
            .gallery-grid {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                gap: 1rem;
            }

            .gallery-grid>* {
                grid-column: span 6;
                aspect-ratio: 1;
            }

            @media (min-width: 768px) {
                .gallery-grid>*:nth-child(4n + 1) {
                    grid-column: span 5;
                    aspect-ratio: 4/3;
                }

                .gallery-grid>*:nth-child(4n + 2) {
                    grid-column: span 7;
                    aspect-ratio: 16/9;
                }

                .gallery-grid>*:nth-child(4n + 3) {
                    grid-column: span 7;
                    aspect-ratio: 16/9;
                }

                .gallery-grid>*:nth-child(4n + 4) {
                    grid-column: span 5;
                    aspect-ratio: 4/3;
                }
            }

            .gallery-tile {
                position: relative;
                display: block;
                overflow: hidden;
                border-radius: var(--glass-radius-sm);
                box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.2);
            }

            .gallery-tile img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.7s ease;
            }

            .gallery-tile::after {
                content: "\f00e";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 1.5rem;
                background: rgba(var(--bs-primary-rgb), 0.6);
                backdrop-filter: blur(4px);
                opacity: 0;
                transition: opacity 0.4s ease;
            }

            .gallery-tile:hover img {
                transform: scale(1.1);
            }

            .gallery-tile:hover::after {
                opacity: 1;
            }

            /* ===== VISITOR ===== */
            .visitor-card {
                padding: 1.5rem;
                display: flex;
                align-items: center;
                gap: 1rem;
                height: 100%;
            }

            .visitor-icon {
                width: 3rem;
                height: 3rem;
                border-radius: 0.85rem;
                background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15), rgba(var(--bs-primary-rgb), 0.05));
                color: var(--bs-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 1.25rem;
            }

            .visitor-val {
                font-size: 1.5rem;
                font-weight: 800;
                color: var(--ink);
                margin: 0;
                letter-spacing: -0.02em;
                line-height: 1;
            }

            .visitor-lbl {
                color: var(--ink-soft);
                font-size: 0.78rem;
                margin: 0.25rem 0 0;
            }

            /* ===== PARTNER ===== */
            .partner-wrap {
                padding: 2.5rem;
            }

            .partner-wrap img {
                max-height: 60px;
                width: auto;
                margin: 0 auto;
                transition: transform 0.4s ease;
            }

            .partner-wrap img:hover {
                transform: scale(1.05);
            }

            /* ===== SLIDER OVERRIDES ===== */
            .tns-nav {
                margin-top: 1.5rem !important;
            }

            .tns-nav button {
                background-color: rgba(255, 255, 255, 0.4) !important;
                opacity: 1;
                border: none !important;
                width: 8px !important;
                height: 8px !important;
            }

            .tns-nav button.tns-nav-active {
                background-color: #fff !important;
                width: 24px !important;
                border-radius: 4px !important;
            }