/* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(241, 245, 249, 0.5);
    }

    ::-webkit-scrollbar-thumb {
        background: #CB5601;
        border-radius: 5px;
        transition: background 0.3s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a34600;
    }

    /* Firefox */
    * {
        scrollbar-color: #CB5601 rgba(241, 245, 249, 0.5);
        scrollbar-width: thin;
    }

    /* ===== NEWS HERO ===== */
    .news-hero-image {
        height: 400px;
        overflow: hidden;
        background: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .news-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .news-hero-wrapper {
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 6px 28px rgba(15, 23, 42, 0.10);
    }

    .news-hero-card {
        background: #fff;
    }

    .news-hero-panel {
        padding: 18px 22px 22px;
        background: #ffffff;
        border-top: 1px solid #f1f5f9;
    }

    .news-hero-title {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.55;
        color: #111827;
        margin: 6px 0 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-hero-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #2563eb;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        transition: gap 0.2s ease, color 0.2s ease;
    }

    .news-hero-link:hover {
        color: #1d4ed8;
        gap: 10px;
        text-decoration: none;
    }

    .deferred-section {
        content-visibility: auto;
        contain-intrinsic-size: 960px;
    }

    .news-hero-text {
        line-height: 1.75;
        margin-top: 0;
        margin-bottom: 10px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        color: #4b5563;
    }

    /* ===== JOURNAL SPOTLIGHT ===== */
    .journal-spotlight {
        position: relative;
        background: transparent;
        overflow: visible;
    }

    .journal-shell {
        --journal-primary: #2563eb;
        --journal-primary-deep: #1d4ed8;
        --journal-primary-soft: #eef4ff;
        --journal-border: #d7e5ff;
        --journal-warm: #CB5601;
        --journal-warm-soft: #fff2e8;
        --journal-text: #475569;
        position: relative;
        padding: 0;
        border-radius: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .journal-shell::before {
        display: none;
    }

    .journal-shell>* {
        position: relative;
        z-index: auto;
    }

    .journal-shell-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 10px;
    }

    .journal-heading-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .journal-heading-icon {
        width: auto;
        height: auto;
        border-radius: 0;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        box-shadow: none;
        color: var(--journal-primary);
        font-size: 1.35rem;
    }

    .journal-section-kicker {
        color: var(--journal-primary);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .journal-section-title {
        font-size: clamp(1.35rem, 2vw, 2rem);
        line-height: 1.2;
        color: #2d465e;
        font-weight: 800;
    }

    .journal-section-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .journal-section-link:hover {
        transform: translateY(-1px);
        text-decoration: none;
    }

    .journal-section-summary {
        margin: 12px 0 10px;
        color: var(--journal-text);
        line-height: 1.8;
        font-size: 1rem;
    }

    .journal-section-type {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        color: var(--journal-warm);
        font-size: 0.9rem;
        font-weight: 600;
    }

    .journal-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        align-items: stretch;
    }

    .journal-grid.is-single {
        grid-template-columns: minmax(0, 360px);
        justify-content: center;
    }

    .journal-grid-item {
        min-width: 0;
    }

    .journal-grid-item.is-single {
        max-width: 420px;
        justify-self: center;
        width: 100%;
    }

    .journal-grid-full {
        grid-column: 1 / -1;
    }

    .journal-entry-card,
    .journal-empty-state {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(215, 229, 255, 0.95);
        box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
    }

    .journal-entry-card {
        padding: 16px;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .journal-entry-card:hover {
        transform: translateY(-5px);
        border-color: rgba(37, 99, 235, 0.28);
        box-shadow: 0 22px 42px rgba(37, 99, 235, 0.14);
    }

    .journal-entry-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .journal-entry-code {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 10px;
        background: var(--journal-warm-soft);
        border: 1px solid rgba(203, 86, 1, 0.16);
        color: var(--journal-warm);
        font-size: 0.86rem;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    .journal-entry-date {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .journal-entry-date i {
        color: var(--journal-primary);
    }

    .journal-entry-cover {
        position: relative;
        height: 290px;
        margin-bottom: 16px;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid rgba(37, 99, 235, 0.18);
        background:
            linear-gradient(145deg, #f5f9ff 0%, #ffffff 52%, #eef4ff 100%);
    }

    .journal-entry-cover::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(118deg, rgba(37, 99, 235, 0.92) 0%, rgba(37, 99, 235, 0.92) 18%, rgba(37, 99, 235, 0) 19%),
            linear-gradient(120deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 7%, rgba(255, 255, 255, 0) 8%),
            linear-gradient(105deg, rgba(203, 86, 1, 0.08) 0%, rgba(203, 86, 1, 0) 40%);
        background-size: 100% 100%, 100% 100%, 100% 100%;
        pointer-events: none;
    }

    .journal-entry-cover::after {
        content: '';
        position: absolute;
        left: -18%;
        right: -16%;
        bottom: -52px;
        height: 122px;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 58%, #60a5fa 100%);
        pointer-events: none;
    }

    .journal-cover-band {
        position: absolute;
        top: 20px;
        left: 28px;
        width: 73%;
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 8px 18px;
        background: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(37, 99, 235, 0.14);
        clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.14);
    }

    .journal-cover-logo {
        max-width: 100%;
        height: 28px;
        object-fit: contain;
        display: block;
    }

    .journal-cover-inner {
        position: relative;
        height: 100%;
        padding: 72px 24px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .journal-cover-title-th {
        color: #1d4ed8;
        font-size: 1.95rem;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0.03em;
    }

    .journal-cover-title-hospital {
        margin-top: 8px;
        color: #2563eb;
        font-size: 1.08rem;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .journal-cover-title-en {
        margin-top: 8px;
        color: #4b6cb7;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.09em;
    }

    .journal-cover-photo-ring {
        width: 138px;
        height: 138px;
        margin-top: auto;
        margin-bottom: 2px;
        border-radius: 50%;
        padding: 4px;
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 18px 32px rgba(37, 99, 235, 0.18);
    }

    .journal-cover-photo {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        object-fit: cover;
        background: #ffffff;
    }

    .journal-entry-title {
        margin: 0 0 10px;
        color: #1e3a8a;
        font-size: 1.14rem;
        line-height: 1.45;
        font-weight: 800;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 4.95rem;
    }

    .journal-entry-published {
        margin: 0 0 14px;
        color: #64748b;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .journal-entry-actions {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #e1ebff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .journal-entry-pdf,
    .journal-entry-detail,
    .journal-section-footer-link {
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .journal-entry-pdf {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--journal-warm);
        font-weight: 800;
    }

    .journal-entry-pdf:hover {
        color: #a34600;
        text-decoration: none;
        transform: translateX(1px);
    }

    .journal-entry-detail {
        color: var(--journal-primary);
        font-weight: 700;
    }

    .journal-entry-detail:hover {
        color: var(--journal-primary-deep);
        text-decoration: none;
    }

    .journal-section-footer {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 18px;
    }

    .journal-section-footer-link {
        color: #64748b;
        font-weight: 700;
    }

    .journal-section-footer-link:hover {
        color: var(--journal-primary);
        text-decoration: none;
    }

    .journal-section-footer-link.is-primary {
        color: var(--journal-primary);
    }

    .journal-empty-state {
        align-items: center;
        justify-content: center;
        padding: 36px 24px;
        text-align: center;
        border-style: dashed;
        border-color: rgba(37, 99, 235, 0.2);
        background: rgba(245, 249, 255, 0.88);
    }

    .journal-empty-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        background: var(--journal-primary-soft);
        color: var(--journal-primary);
        font-size: 1.9rem;
    }

    @media (min-width: 768px) {
        .journal-grid:not(.is-single) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 992px) {
        .journal-grid:not(.is-single) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .journal-shell-header {
            flex-direction: column;
            align-items: stretch;
        }

        .journal-section-link {
            align-self: flex-start;
        }
    }

    @media (max-width: 767.98px) {
        .journal-grid.is-single {
            grid-template-columns: minmax(0, 1fr);
        }

        .journal-entry-cover {
            height: 280px;
        }

        .journal-cover-title-th {
            font-size: 1.75rem;
        }

        .journal-cover-title-hospital {
            font-size: 1rem;
        }
    }

    @media (max-width: 575.98px) {
        .journal-heading-wrap {
            gap: 12px;
        }

        .journal-heading-icon {
            font-size: 1.2rem;
        }

        .journal-section-link {
            width: 100%;
            justify-content: center;
        }

        .journal-grid,
        .journal-grid.is-single {
            grid-template-columns: minmax(0, 1fr);
        }

        .journal-entry-card {
            padding: 14px;
        }

        .journal-entry-cover {
            height: 260px;
        }

        .journal-cover-band {
            left: 16px;
            right: 16px;
            width: auto;
        }

        .journal-cover-logo {
            height: 24px;
        }

        .journal-cover-inner {
            padding: 70px 16px 16px;
        }

        .journal-cover-title-th {
            font-size: 1.55rem;
        }

        .journal-cover-title-hospital {
            font-size: 0.92rem;
        }

        .journal-cover-title-en {
            font-size: 0.68rem;
            letter-spacing: 0.06em;
        }

        .journal-cover-photo-ring {
            width: 124px;
            height: 124px;
        }

        .journal-entry-title {
            min-height: auto;
            font-size: 1.05rem;
        }

        .journal-entry-actions,
        .journal-section-footer {
            flex-direction: column;
            align-items: stretch;
        }
    }

    /* ===== SHARED HOME SECTION SHELL ===== */
    .home-section-shell {
        position: relative;
        overflow: hidden;
    }

    .home-section-shell>* {
        position: relative;
        z-index: 1;
    }

    .home-section-shell--featured {
        padding: 2.35rem;
        border-radius: 28px;
        border-color: rgba(191, 219, 254, 0.9);
        border: 1px solid rgba(191, 219, 254, 0.9);
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0) 26%),
            radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 24%),
            linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.07);
    }

    .home-section-shell--featured::before {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        pointer-events: none;
    }

    .home-section-shell--soft {
        padding: 2rem;
        border-radius: 24px;
        border: 1px solid rgba(219, 234, 254, 0.92);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #f6faff 100%);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
    }

    .home-section-shell--soft::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        pointer-events: none;
    }

    .home-section-shell--plain {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .home-section-shell--plain::before {
        content: none;
    }

    /* ===== JOURNAL SPOTLIGHT THEME OVERRIDES ===== */
    .journal-spotlight {
        background: transparent;
    }

    .journal-spotlight-shell {
        position: relative;
        overflow: hidden;
        padding: 2.5rem;
        border-radius: 28px;
        border: 1px solid rgba(191, 219, 254, 0.9);
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0) 26%),
            radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 24%),
            linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.07);
    }

    .journal-spotlight-shell::before {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.75);
        pointer-events: none;
    }

    .journal-section-header {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .journal-section-summary {
        max-width: 720px;
        margin: 0 auto;
        line-height: 1.8;
        color: #64748b;
    }

    .journal-section-type {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 0;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid #dbe7fb;
        background: #f8fbff;
        color: #2563eb;
        font-size: 0.92rem;
        font-weight: 600;
    }

    .journal-news-card {
        border-radius: 16px !important;
        max-width: 100%;
        border: 1px solid rgba(219, 234, 254, 0.95) !important;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08) !important;
    }

    .journal-news-cover {
        height: 198px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px;
        background: #f8fafc;
        border-bottom: 1px solid #eef2f7;
    }

    .journal-news-card .card-body {
        padding: 1rem;
    }

    .journal-news-cover-uploaded {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #fff;
        border-radius: 12px;
    }

    .journal-news-cover-empty {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #94a3b8;
    }

    .journal-news-cover-empty i {
        font-size: 2.5rem;
    }

    .journal-news-cover-empty span {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: #eaf1fb;
        color: #2563eb;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .journal-news-card .card-title {
        color: #111827;
        line-height: 1.6;
    }

    .journal-news-card .card-text {
        line-height: 1.7;
    }

    .journal-news-actions {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .journal-news-pdf,
    .journal-news-detail {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .journal-news-pdf {
        color: #dc3545;
    }

    .journal-news-pdf:hover {
        color: #bb2d3b;
        text-decoration: none;
        transform: translateX(1px);
    }

    .journal-news-detail {
        color: #2563eb;
    }

    .journal-news-detail:hover {
        color: #1d4ed8;
        text-decoration: none;
    }

    .journal-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 24px;
        text-align: center;
        border-radius: 16px;
        border: 1px dashed #cbd5e1;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

    .journal-empty-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        background: #eef4ff;
        color: #2563eb;
        font-size: 1.9rem;
    }

    @media (max-width: 991.98px) {
        .home-section-shell--featured,
        .home-section-shell--soft {
            padding: 2rem 1.5rem;
            border-radius: 24px;
        }

        .journal-spotlight-shell {
            padding: 2rem 1.5rem;
            border-radius: 24px;
        }

        .journal-section-type {
            margin-top: 4px;
        }
    }

    @media (max-width: 575.98px) {
        .home-section-shell--featured,
        .home-section-shell--soft {
            padding: 1.5rem 1rem;
            border-radius: 20px;
        }

        .home-section-shell--featured::before,
        .home-section-shell--soft::before {
            inset: 10px;
            border-radius: 16px;
        }

        .journal-spotlight-shell {
            padding: 1.5rem 1rem;
            border-radius: 20px;
        }

        .journal-spotlight-shell::before {
            inset: 10px;
            border-radius: 16px;
        }

        .journal-section-header {
            margin-bottom: 2rem !important;
        }

        .journal-news-cover {
            height: 188px;
        }

        .journal-news-actions {
            flex-wrap: wrap;
        }
    }

    /* ===== MODERN HERO DECORATION ===== */
    .hero.section {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 28%),
            radial-gradient(circle at 86% 14%, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0) 24%),
            radial-gradient(circle at 78% 82%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 22%),
            linear-gradient(135deg, #edf6ff 0%, #ffffff 42%, #f8fbff 72%, #eef8f7 100%);
        background-size: 180% 180%;
        background-position: 0% 50%;
        animation: gradient-animation 18s ease-in-out infinite;
    }

    .hero.section::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0) 62%),
            repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 96px),
            repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.06) 0 1px, transparent 1px 96px);
        opacity: 0.55;
        z-index: 0;
        pointer-events: none;
    }

    .hero.section::after {
        content: '';
        position: absolute;
        width: 60%;
        height: 85%;
        right: -12%;
        bottom: -42%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 38%, rgba(255, 255, 255, 0) 72%);
        transform: rotate(-10deg);
        z-index: 0;
        pointer-events: none;
    }

    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }

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

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

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

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

    .hero-blob {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 70%);
        filter: blur(60px);
        border-radius: 50%;
        z-index: 1;
        pointer-events: none;
        opacity: 0.95;
        mix-blend-mode: screen;
        animation: blob-float 9s ease-in-out infinite;
    }

    .blob-1 {
        top: -140px;
        left: -140px;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.24) 0%, rgba(37, 99, 235, 0) 68%);
        box-shadow: 0 0 100px rgba(37, 99, 235, 0.12);
    }

    .blob-2 {
        bottom: -200px;
        right: -40px;
        background: radial-gradient(circle, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0) 72%);
        width: 600px;
        height: 600px;
        box-shadow: 0 0 100px rgba(45, 212, 191, 0.12);
    }

    @keyframes blob-float {
        0% {
            transform: translate(0, 0) scale(1);
        }

        25% {
            transform: translate(40px, -50px) scale(1.08);
        }

        50% {
            transform: translate(80px, 40px) scale(1.15);
        }

        75% {
            transform: translate(30px, 60px) scale(1.1);
        }

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

    .hero-orbit {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(37, 99, 235, 0.15);
        z-index: 0;
        pointer-events: none;
        animation: orbit-drift 16s ease-in-out infinite;
    }

    .orbit-1 {
        width: 520px;
        height: 520px;
        top: 70px;
        right: 2%;
    }

    .orbit-2 {
        width: 360px;
        height: 360px;
        top: 150px;
        right: 11%;
        border-style: dashed;
        border-color: rgba(16, 185, 129, 0.18);
        animation-delay: -6s;
    }

    @keyframes orbit-drift {

        0%,
        100% {
            transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
            opacity: 0.45;
        }

        50% {
            transform: translate3d(16px, -18px, 0) scale(1.04) rotate(8deg);
            opacity: 0.9;
        }
    }

    .hero-spark {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: radial-gradient(circle at 35% 35%, #ffffff 0%, #bfdbfe 42%, rgba(191, 219, 254, 0) 72%);
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.24), 0 10px 26px rgba(37, 99, 235, 0.16);
        z-index: 1;
        pointer-events: none;
        animation: spark-float 6.5s ease-in-out infinite;
    }

    .spark-1 {
        top: 130px;
        left: 9%;
    }

    .spark-2 {
        top: 260px;
        right: 24%;
        animation-delay: -2.3s;
    }

    .spark-3 {
        bottom: 100px;
        left: 44%;
        animation-delay: -4.2s;
    }

    @keyframes spark-float {

        0%,
        100% {
            transform: translateY(0) scale(0.95);
            opacity: 0.55;
        }

        50% {
            transform: translateY(-16px) scale(1.08);
            opacity: 1;
        }
    }

    #hero>.container {
        position: relative;
        z-index: 2;
    }

    .hero .hero-content {
        max-width: 100%;
    }

    .hero-content {
        position: relative;
        z-index: 2;
    }

    .hero-content::before {
        content: '';
        position: absolute;
        width: 220px;
        height: 220px;
        top: -40px;
        left: -50px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
        z-index: -1;
        pointer-events: none;
    }

    .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        margin-bottom: 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
        color: #1d4ed8;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.02em;
    }

    .hero-kicker i {
        font-size: 15px;
    }

    /* ===== TYPOGRAPHY & GRADIENT ===== */
    .gradient-text {
        background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.5px;
    }

    .font-inter {
        font-family: 'Inter', sans-serif;
    }

    /* ===== GLASSMORPHISM CARDS ===== */
    .director-box {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow:
            0 8px 32px rgba(37, 99, 235, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.4);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .director-box:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 25px 60px rgba(37, 99, 235, 0.15);
        border-color: rgba(37, 99, 235, 0.2);
    }

    .director-img-container {
        width: 100%;
        height: 380px;
        overflow: hidden;
        position: relative;
    }

    .director-img-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 70%, rgba(255, 255, 255, 0.8) 100%);
    }

    .director-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transition: transform 0.6s ease;
    }

    .director-box:hover .director-hero-img {
        transform: scale(1.08);
    }

    .director-content {
        padding: 22px 25px 25px;
        background: rgba(255, 255, 255, 0.82);
        position: relative;
        z-index: 2;
    }

    /* ===== VISION TILES ===== */
    .vision-tile {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 18px;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-right: 4px solid #2563eb;
        border-radius: 12px;
        margin-bottom: 12px;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .vision-tile:hover {
        background: #ffffff;
        transform: translateX(8px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
    }

    .vision-tile i {
        font-size: 1.2rem;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #eff6ff;
        color: #2563eb;
        flex-shrink: 0;
    }

    .vision-tile h6 {
        margin: 0;
        font-weight: 700;
        font-size: 14px;
    }

    .vision-tile p {
        margin: 0;
        font-size: 13px;
        color: #64748b;
        line-height: 1.4;
    }

    /* ===== NEWS HERO GLASS ===== */
    .news-hero-panel {
        padding: 18px 22px 22px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(241, 245, 249, 0.8);
    }

    .news-hero-title {
        font-size: 1.1rem;
        font-weight: 700;
        background: linear-gradient(135deg, #111827 0%, #374151 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 6px 0 10px;
    }

    .news-hero-wrapper {
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08);
    }

    /* ===== UPDATE COLOR MAP & BADGES ===== */
    .company-badge {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563eb !important;
        border: 1px solid rgba(37, 99, 235, 0.1);
        padding: 6px 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ===== PINNED NEWS ===== */
    .pinned-news-title {
        line-height: 1.6;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pinned-news-excerpt {
        line-height: 1.8;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pinned-news-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: 16px !important;
        overflow: hidden;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07) !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .pinned-news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13) !important;
    }

    /* Colored shadows for pinned news cards by category */
    .pinned-news-card.pinned-card-primary:hover {
        box-shadow: 0 16px 40px rgba(13, 110, 253, 0.25) !important;
    }

    .pinned-news-card.pinned-card-success:hover {
        box-shadow: 0 16px 40px rgba(25, 135, 84, 0.25) !important;
    }

    .pinned-news-card.pinned-card-warning:hover {
        box-shadow: 0 16px 40px rgba(255, 193, 7, 0.3) !important;
    }

    .pinned-news-card.pinned-card-danger:hover {
        box-shadow: 0 16px 40px rgba(220, 53, 69, 0.25) !important;
    }

    .pinned-news-card.pinned-card-secondary:hover {
        box-shadow: 0 16px 40px rgba(108, 117, 125, 0.25) !important;
    }

    .pinned-news-card.pinned-card-info:hover {
        box-shadow: 0 16px 40px rgba(13, 202, 240, 0.25) !important;
    }

    .pinned-news-img {
        height: 220px;
        width: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        background: linear-gradient(135deg, #f0f7ff 0%, #f8f9fa 100%);
    }

    .pinned-news-card .card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .pinned-news-card .stretched-link {
        margin-top: auto;
    }

    #news-filters {
        scroll-margin-top: 90px;
    }

    #news-latest {
        scroll-margin-top: 90px;
    }

    @media (max-width: 1199.98px) {
        #news-filters {
            scroll-margin-top: 66px;
        }

        #news-latest {
            scroll-margin-top: 66px;
        }
    }

    /* ===== NEWS CARDS ===== */
    .news-card {
        border-radius: 16px !important;
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13) !important;
    }

    /* Colored shadows for news cards by category */
    .news-card.news-card-primary:hover {
        box-shadow: 0 16px 40px rgba(13, 110, 253, 0.25) !important;
    }

    .news-card.news-card-success:hover {
        box-shadow: 0 16px 40px rgba(25, 135, 84, 0.25) !important;
    }

    .news-card.news-card-warning:hover {
        box-shadow: 0 16px 40px rgba(255, 193, 7, 0.3) !important;
    }

    .news-card.news-card-danger:hover {
        box-shadow: 0 16px 40px rgba(220, 53, 69, 0.25) !important;
    }

    .news-card.news-card-secondary:hover {
        box-shadow: 0 16px 40px rgba(108, 117, 125, 0.25) !important;
    }

    .news-card.news-card-info:hover {
        box-shadow: 0 16px 40px rgba(13, 202, 240, 0.25) !important;
    }

    .news-card.news-card-proc:hover {
        box-shadow: 0 16px 40px rgba(255, 140, 0, 0.28) !important;
    }

    .news-card .card-img-top {
        height: 220px;
        width: 100%;
        object-fit: contain;
        background: linear-gradient(135deg, #f0f7ff 0%, #f8f9fa 100%);
    }

    .news-card .card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.6;
    }

    .news-card .card-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ===== PROC CARDS ===== */
    .proc-card .proc-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.6;
    }

    .proc-card .proc-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.7;
    }

    .proc-card .proc-thumb {
        height: 180px;
        width: 100%;
        object-fit: contain;
        background: #f8fafc;
    }

    /* ===== VISION TILES ===== */
    .vision-tile {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 13px 20px;
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 16px;
        margin-bottom: 14px;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.03);
    }

    .vision-tile:hover {
        background: #ffffff;
        transform: translateX(10px);
        box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.2);
    }

    .vision-tile i {
        font-size: 1.25rem;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #eff6ff;
        color: #2563eb;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .vision-tile:hover i {
        transform: scale(1.1) rotate(5deg);
        background: #2563eb;
        color: #fff;
    }

    .vision-tile h6 {
        margin: 0;
        font-weight: 700;
        font-size: 15px;
        color: #1e3a8a;
    }

    .vision-tile p {
        margin: 0;
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
    }

    /* ===== PREMIUM BADGE & PANEL ===== */
    .company-badge {
        background: rgba(37, 99, 235, 0.07) !important;
        color: #2563eb !important;
        border: 1px solid rgba(37, 99, 235, 0.15);
        padding: 6px 18px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        font-size: 11px;
        border-radius: 50px;
    }

    .news-hero-panel {
        padding: 22px 25px 25px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(241, 245, 249, 0.8);
    }

    .activity-media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
        border-radius: 14px;
        overflow: hidden;
    }

    .activity-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .activity-slide-card h5 {
        line-height: 1.6;
        margin-top: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .activity-slide-card p {
        line-height: 1.7;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
        flex-grow: 1;
    }

    .myActivitySwiper .stretched-link::after {
        z-index: 1;
    }

    .myActivitySwiper .swiper-button-next,
    .myActivitySwiper .swiper-button-prev,
    .myActivitySwiper .swiper-pagination {
        z-index: 10;
    }

    /* ===== SECTION EYEBROW LABEL ===== */
    .section-eyebrow {
        display: inline-block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: #2563eb;
        background: #eef4ff;
        padding: 4px 14px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    /* ===== HOVER EFFECTS via section scope ===== */
    #ita-years .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    #ita-years .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13) !important;
    }

    #policies .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    #policies .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13) !important;
    }

    #departments .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    #departments .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    }

    #download .download-card {
        border-radius: 16px !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    #download .download-card:hover {
        transform: translateY(-5px);
    }

    /* Colored shadows - primary */
    #download .download-card.text-primary:hover {
        box-shadow: 0 16px 40px rgba(13, 110, 253, 0.3) !important;
    }

    /* Colored shadows - success */
    #download .download-card.text-success:hover {
        box-shadow: 0 16px 40px rgba(25, 135, 84, 0.3) !important;
    }

    /* Colored shadows - warning */
    #download .download-card.text-warning:hover {
        box-shadow: 0 16px 40px rgba(255, 193, 7, 0.35) !important;
    }

    /* Colored shadows - danger */
    #download .download-card.text-danger:hover {
        box-shadow: 0 16px 40px rgba(220, 53, 69, 0.3) !important;
    }

    /* Colored shadows - secondary */
    #download .download-card.text-secondary:hover {
        box-shadow: 0 16px 40px rgba(108, 117, 125, 0.3) !important;
    }

    /* Colored shadows - info */
    #download .download-card.text-info:hover {
        box-shadow: 0 16px 40px rgba(13, 202, 240, 0.3) !important;
    }

    #web-services .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
        overflow: hidden;
    }

    #web-services .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.13) !important;
    }

    /* Icon styling */
    #web-services .card .service-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        border: 1px solid rgba(191, 219, 254, 0.9);
        background: linear-gradient(135deg, #eff6ff, #ffffff);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    #web-services .card:hover .service-icon {
        transform: scale(1.1) rotate(5deg);
    }

    #web-services .card .service-icon.service-icon-image {
        width: min(132px, 100%);
        height: 78px;
        padding: 0;
        border-radius: 18px;
    }

    #web-services .card:hover .service-icon.service-icon-image {
        transform: scale(1.04);
    }

    #web-services .card .service-icon .service-icon-media {
        display: block;
        width: 100%;
        height: 100%;
        padding: 8px 12px;
    }

    #web-services .card .service-icon img,
    #web-services .card .service-icon .service-icon-asset {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }

    /* Dynamic color styles for web services cards */
    #web-services .ws-card-primary .service-icon i {
        color: #2563eb;
    }

    #web-services .ws-card-primary h6 {
        color: #2563eb;
    }

    #web-services .ws-card-primary:hover {
        box-shadow: 0 16px 40px rgba(37, 99, 235, 0.25) !important;
    }

    #web-services .ws-card-success .service-icon i {
        color: #10b981;
    }

    #web-services .ws-card-success h6 {
        color: #10b981;
    }

    #web-services .ws-card-success:hover {
        box-shadow: 0 16px 40px rgba(25, 135, 84, 0.25) !important;
    }

    #web-services .ws-card-warning .service-icon i {
        color: #f59e0b;
    }

    #web-services .ws-card-warning h6 {
        color: #f59e0b;
    }

    #web-services .ws-card-warning:hover {
        box-shadow: 0 16px 40px rgba(245, 158, 11, 0.3) !important;
    }

    #web-services .ws-card-danger .service-icon i {
        color: #ef4444;
    }

    #web-services .ws-card-danger h6 {
        color: #ef4444;
    }

    #web-services .ws-card-danger:hover {
        box-shadow: 0 16px 40px rgba(239, 68, 68, 0.25) !important;
    }

    #web-services .ws-card-info .service-icon i {
        color: #06b6d4;
    }

    #web-services .ws-card-info h6 {
        color: #06b6d4;
    }

    #web-services .ws-card-info:hover {
        box-shadow: 0 16px 40px rgba(6, 182, 212, 0.25) !important;
    }

    #web-services .ws-card-secondary .service-icon i {
        color: #6c757d;
    }

    #web-services .ws-card-secondary h6 {
        color: #6c757d;
    }

    #web-services .ws-card-secondary:hover {
        box-shadow: 0 16px 40px rgba(108, 117, 125, 0.25) !important;
    }

    #about .row.g-3 [class*="p-3"] {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #about .row.g-3 [class*="p-3"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09) !important;
    }

    /* ===== VIDEO CARDS ===== */
    .hv-card:hover .hv-title {
        color: #2563eb;
        transition: color 0.2s ease;
    }

    /* ===== HERO TITLE SHADOW ===== */
    .hero-title {
        font-size: clamp(2.3rem, 4vw, 3.6rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
        filter: drop-shadow(0 8px 16px rgba(13, 110, 253, 0.2));
    }

    .hero-subtitle {
        max-width: 560px;
        margin: 0 auto 1.25rem;
        font-size: 17px;
        line-height: 1.75;
        color: #475569;
    }

    .hero-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 26px;
    }

    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.82);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        color: #1f2937;
        font-size: 13px;
        font-weight: 700;
        backdrop-filter: blur(8px);
    }

    .hero-tag i {
        color: #2563eb;
    }

    /* ===== HERO ORG LIST ===== */
    .hero-org-list {
        list-style: none;
        padding: 0;
        display: grid;
        gap: 12px;
    }

    .hero-org-item {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 0;
        padding: 14px 18px 14px 16px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.82);
        border-radius: 18px;
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.05);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .hero-org-item::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        border-radius: 18px;
        background: linear-gradient(180deg, #2563eb 0%, #38bdf8 100%);
    }

    .hero-org-item::after {
        content: '';
        position: absolute;
        width: 140px;
        height: 140px;
        right: -60px;
        top: -72px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
        pointer-events: none;
    }

    .hero-org-item:nth-child(2)::before {
        background: linear-gradient(180deg, #16a34a 0%, #4ade80 100%);
    }

    .hero-org-item:nth-child(3)::before {
        background: linear-gradient(180deg, #d97706 0%, #facc15 100%);
    }

    .hero-org-item:nth-child(4)::before {
        background: linear-gradient(180deg, #dc2626 0%, #f97316 100%);
    }

    .hero-org-item:hover {
        transform: translateX(5px) translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
        border-color: rgba(37, 99, 235, 0.2);
    }

    .hero-org-label {
        position: relative;
        z-index: 1;
        font-weight: 700;
        font-size: 17px;
        line-height: 1.35;
        display: block;
    }

    .hero-org-label i {
        font-size: 15px;
    }

    .hero-org-text {
        position: relative;
        z-index: 1;
        display: block;
        font-size: 15px;
        line-height: 1.55;
        color: #1f2937;
        padding-left: 22px;
    }

    @media (min-width: 992px) {
        .hero .hero-content {
            max-width: 100%;
            padding-right: 10px;
        }

        .hero-subtitle {
            margin-bottom: 1rem;
            font-size: 16px;
            line-height: 1.65;
        }

        .hero-tags {
            gap: 8px;
            margin-bottom: 18px;
        }

        .hero-tag {
            padding: 8px 12px;
            font-size: 12px;
        }

        .hero-org-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .hero-org-item {
            gap: 8px;
            padding: 16px 20px 16px 18px;
        }

        .hero-org-label {
            font-size: 19px;
        }

        .hero-org-label i {
            font-size: 16px;
        }

        .hero-org-text {
            font-size: 16px;
            line-height: 1.5;
            padding-left: 22px;
        }
    }

    @media (max-width: 991.98px) {
        .hero-orbit {
            display: none;
        }

        .hero .hero-content {
            max-width: 100%;
        }

        .hero-content::before {
            left: 50%;
            transform: translateX(-50%);
        }
    }

    @media (max-width: 767.98px) {
        .hero-spark {
            display: none;
        }

        .hero-kicker {
            font-size: 12px;
            padding: 8px 14px;
        }

        .hero-subtitle {
            font-size: 15px;
            line-height: 1.65;
            margin-bottom: 1rem;
        }

        .hero-tags {
            gap: 8px;
            margin-bottom: 20px;
        }

        .hero-tag {
            padding: 8px 12px;
            font-size: 12px;
        }

        .hero-org-item {
            padding: 13px 16px;
            border-radius: 18px;
        }

        .hero-org-label {
            font-size: 16px;
        }

        .hero-org-text {
            font-size: 14px;
            line-height: 1.5;
            padding-left: 16px;
        }
    }

        .hv-card {
            border: 0;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06);
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .hv-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .10);
        }

        .hv-thumb {
            position: relative;
            overflow: hidden;
            background: #f8f9fa;
        }

        .hv-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hv-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: rgba(0, 0, 0, .25);
            color: #fff;
            cursor: pointer;
        }

        .hv-play:hover {
            background: rgba(0, 0, 0, .35);
        }

        .hv-play i {
            font-size: 56px;
            line-height: 1;
        }

        .hv-body {
            padding: 14px 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            height: 100%;
        }

        .hv-title {
            font-weight: 800;
            font-size: 1rem;
        }

        .hv-desc {
            color: #6c757d;
            font-size: .875rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.6em;
        }

        .hv-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .hv-meta {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }