@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Design tokens ── */
:root {
    --brand-primary: #1d4ed8;
    --brand-primary-dark: #1e3a8a;
    --brand-secondary: #7c3aed;
    --brand-accent: #f59e0b;
    --brand-accent-dark: #ea580c;
    --brand-teal: #0d9488;
    --brand-coral: #f43f5e;
    --brand-sky: #0ea5e9;
    --brand-emerald: #10b981;
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-hover-color: #7c3aed;
    --font-en: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-bn: 'SolaimanLipi', 'Noto Sans Bengali', system-ui, sans-serif;
    --bs-body-font-family: var(--font-en), var(--font-bn);
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --shadow-soft: 0 4px 24px rgba(29, 78, 216, 0.08);
    --shadow-card: 0 12px 40px rgba(15, 23, 42, 0.1);
    --shadow-hover: 0 20px 50px rgba(124, 58, 237, 0.18);
    --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 45%, #0ea5e9 100%);
    --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    --gradient-cool: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    --gradient-footer: linear-gradient(160deg, #0a0a1a 0%, #000000 40%, #010306 100%);
}

* { font-family: var(--bs-body-font-family); }

/* Keep Font Awesome icons visible (global font stack must not override icon fonts) */
.fas, .far, .fal, .fat,
.fa-solid, .fa-regular, .fa-light, .fa-thin,
i.fas, i.far, i.fal, i.fat,
i.fa-solid, i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    display: inline-block;
}
.fas, .fa-solid, i.fas, i.fa-solid {
    font-weight: 900 !important;
}
.far, .fa-regular, i.far, i.fa-regular {
    font-weight: 400 !important;
}

.fab, .fa-brands,
i.fab, i.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    display: inline-block;
}

/* Extra specificity for header/footer/nav where Bengali font stack leaked in */
.site-header i.fab,
.site-header .fab,
.top-bar i.fab,
.top-bar .fab,
#footer i.fab,
#footer .fab,
.site-nav i.fab,
.site-nav .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.site-header i.fas,
.site-header i.far,
.top-bar i.fas,
.top-bar i.far,
.site-nav i.fas,
.site-nav i.far,
#footer i.fas,
#footer i.far {
    font-family: "Font Awesome 6 Free" !important;
}

/* Bengali-heavy content — prefer Solaiman Lipi */
.font-bn,
.detail-prose,
.detail-title,
.detail-related-title,
.section-title,
.campaign-card-title,
.nd-prose,
.page-prose,
.content_wrp {
    font-family: var(--font-bn), var(--font-en);
}

html {
    overflow-x: hidden;
    max-width: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #1e293b;
}

.container,
.content_wrp, .content_wrp *, #footer, #footer *, .nd-page, .nd-prose {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.content_wrp, .nd-page { max-width: 100%; min-width: 0; }

/* ── Frontend layout shell (admin-controlled) ── */
body.site-layout-boxed {
    background: var(--site-page-bg, #e8edf5) !important;
}
body.site-layout-full {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}
.site-page-shell {
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.site-page-shell-boxed {
    max-width: var(--site-container-max, 1320px);
    margin-inline: auto;
    background: var(--site-shell-bg, #fff);
    border-radius: var(--site-shell-radius, 16px);
}
body.site-layout-shadow .site-page-shell-boxed {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 24px 60px rgba(15, 23, 42, 0.12);
}
.site-page-shell-boxed .site-header,
.site-page-shell-boxed .site-main-content,
.site-page-shell-boxed #footer {
    background-color: transparent;
}
.site-layout-boxed .container {
    max-width: 100%;
    padding-left: var(--site-container-px, 1.25rem);
    padding-right: var(--site-container-px, 1.25rem);
}
.site-layout-full .container {
    width: 100%;
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 576px) {
    .site-layout-full .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .site-layout-full .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .site-layout-full .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .site-layout-full .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .site-layout-full .container { max-width: 1320px; }
}
.site-layout-boxed .site-hero-breakout {
    margin-left: calc(-1 * var(--site-container-px, 1.25rem));
    margin-right: calc(-1 * var(--site-container-px, 1.25rem));
    width: calc(100% + (2 * var(--site-container-px, 1.25rem)));
    max-width: none;
    border-radius: 0;
}
@media (max-width: 575.98px) {
    body.site-layout-boxed .site-page-shell-boxed {
        border-radius: 0;
        max-width: 100%;
        width: 100%;
        margin-inline: 0;
    }
    body.site-layout-shadow .site-page-shell-boxed {
        box-shadow: none;
    }
    body.site-layout-boxed {
        background: var(--site-shell-bg, #fff) !important;
    }
    .site-layout-boxed .container,
    .site-layout-full .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 991.98px) {
    .site-page-shell,
    .site-page-shell-boxed,
    .site-main-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    body.site-layout-boxed .site-page-shell-boxed {
        border-radius: 0;
        max-width: 100%;
        width: 100%;
    }
}

/* Facebook page plugin — full width on mobile */
.fb-page-embed {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 0;
}
.fb-page-embed__iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}
.fb-page-embed iframe,
.fb-page-embed span {
    max-width: 100% !important;
}
.fb-page-embed ._2p3a,
.fb-page-embed ._2p3a iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ── Typography & brand ── */
.text-brand { color: var(--brand-primary-dark) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-gradient {
    background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-secondary) 50%, var(--brand-sky) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-brand-gradient { background: var(--gradient-hero) !important; }
.bg-top-bar {
    background: linear-gradient(90deg, #581beb 0%, #121e3f 35%, #4f46e5 70%, #051211 100%) !important;
    position: relative;
}
.bg-top-bar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #f43f5e, #a855f7, #0ea5e9, #10b981);
}

/* ── Sections ── */
.site-section { padding: 3rem 0; position: relative; }
@media (min-width: 768px) { .site-section { padding: 4.5rem 0; } }

.site-section-light {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%);
}
.site-section-alt {
    background: linear-gradient(135deg, #fef3c7 0%, #fff 40%, #ede9fe 100%);
}
.site-section-mint {
    background: linear-gradient(135deg, #ecfdf5 0%, #fff 50%, #f0fdfa 100%);
}

/* ── Universal vivid section theme (every homepage section) ── */
.section-vivid {
    isolation: isolate;
}
.section-vivid > .container,
.section-vivid .container {
    position: relative;
    z-index: 2;
}
.section-vivid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.section-vivid::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #10b981, #f43f5e);
    z-index: 1;
}

/* Per-section colorful backgrounds */
.about-section {
    background: linear-gradient(160deg, #eff6ff 0%, #faf5ff 35%, #fff7ed 70%, #f0fdf4 100%);
}
.about-section .about-prose {
    font-family: var(--font-bn), var(--font-en);
    font-size: 1.125rem;
    line-height: 2.05;
    color: #1e293b;
    font-weight: 500;
}
.about-section .about-prose p {
    margin-bottom: 1.15em;
}
@media (min-width: 768px) {
    .about-section .about-prose {
        font-size: 1.2rem;
        line-height: 2.1;
    }
}
@media (min-width: 992px) {
    .about-section .about-prose {
        font-size: 1.28rem;
        line-height: 2.15;
    }
}
.about-section #about-content-wrap {
    font-size: inherit;
}
.team-section {
    background: linear-gradient(160deg, #faf5ff 0%, #fff 30%, #ede9fe 60%, #eff6ff 100%);
}
#programs {
    background: linear-gradient(160deg, #eff6ff 0%, #faf5ff 40%, #fff7ed 100%);
}
.news-section {
    background: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 30%, #eff6ff 65%, #fff 100%);
}

/* Card image date strip — readable on light or dark thumbnails */
.card-media-date {
    z-index: 2;
    color: #fff;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.92) 0%,
        rgba(15, 23, 42, 0.72) 55%,
        rgba(15, 23, 42, 0) 100%
    );
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.02em;
}
.card-media-date i {
    opacity: 0.95;
}

.story-section .story-card-title,
.publication-section .pub-card-body h3,
.news-section .news-card-title,
.project-section .project-card-title,
.campaign-section .campaign-card-title {
    font-family: var(--font-bn), var(--font-en);
}

.publication-section {
    background: linear-gradient(160deg, #fef3c7 0%, #fff 40%, #e0e7ff 80%, #f0fdfa 100%);
}
.service-section {
    background: linear-gradient(160deg, #e0f2fe 0%, #fff 35%, #ede9fe 65%, #ecfdf5 100%);
}
.project-section {
    background: linear-gradient(160deg, #fef3c7 0%, #fff 30%, #ddd6fe 60%, #dbeafe 100%);
}
.photo-section {
    background: linear-gradient(160deg, #f0fdf4 0%, #fff 40%, #e0f2fe 75%, #faf5ff 100%);
}
.campaign-section {
    background: linear-gradient(160deg, #fff7ed 0%, #fff 25%, #fef3c7 50%, #ede9fe 75%, #eff6ff 100%);
}

/* Floating deco orbs — reusable */
.section-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    animation: partner-float 14s ease-in-out infinite;
}
.section-orb-2 { animation-delay: -5s; }
.section-orb-3 { animation-delay: -9s; }

/* 3D cards — all vivid sections */
.section-vivid .site-card,
.section-vivid .team-card.card {
    border-radius: 1.25rem !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.04),
        0 14px 32px rgba(79, 70, 229, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    overflow: hidden;
    position: relative;
}
.section-vivid .site-card::before,
.section-vivid .team-card.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
}
.section-vivid .site-card:hover,
.section-vivid .team-card.card:hover {
    transform: translateY(-12px) scale(1.01) !important;
    box-shadow:
        0 8px 20px rgba(79, 70, 229, 0.1),
        0 24px 48px rgba(124, 58, 237, 0.16),
        0 40px 70px rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(147, 197, 253, 0.5) !important;
}
.section-vivid .site-card:hover::before,
.section-vivid .team-card.card:hover::before {
    opacity: 1;
}

/* Campaign card accent */
.campaign-section .campaign-card .campaign-progress-bar {
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
}

/* Publication cards */
.publication-section .pub-card {
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(145deg, #fff, #f8fafc);
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.1);
    transition: all 0.4s ease;
    height: 100%;
}
.publication-section .pub-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px rgba(124, 58, 237, 0.18);
}
.publication-section .pub-card-body {
    font-family: var(--font-bn), var(--font-en);
}
.publication-section .pub-card-cover {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fef2f2, #fff7ed);
}
.publication-section .pub-pdf-icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 2.25rem;
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.35);
}
.publication-section .pub-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #d1d5db;
    transition: all 0.2s;
}
.publication-section .pub-swiper-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #7c3aed, #4f46e5) !important;
    width: 1.75rem;
    border-radius: 4px;
}

/* Photo gallery 3D tiles */
.photo-section .photo-gallery-item {
    border-radius: 1rem !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    transition: all 0.4s ease;
}
.photo-section .photo-gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 45px rgba(79, 70, 229, 0.2);
}

/* Swiper wrap padding in vivid sections */
.section-vivid .campaign-swiper-wrap,
.section-vivid .news-swiper-wrap,
.section-vivid .story-swiper-wrap,
.section-vivid .project-swiper-wrap,
.section-vivid .publication-swiper-wrap,
.section-vivid .org-swiper-wrap {
    padding: 0 2.75rem;
    perspective: 1200px;
}
@media (max-width: 575.98px) {
    .section-vivid .campaign-swiper-wrap,
    .section-vivid .news-swiper-wrap,
    .section-vivid .story-swiper-wrap,
    .section-vivid .project-swiper-wrap,
    .section-vivid .publication-swiper-wrap,
    .section-vivid .org-swiper-wrap {
        padding: 0 1.75rem;
    }
    .news-section .news-swiper-prev,
    .news-section .news-swiper-next {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.section-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2.5rem;
    gap: 0.15rem;
}
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.badge-blue   { background: linear-gradient(135deg, #dbeafe, #e0e7ff); color: #1d4ed8; border: 1px solid #93c5fd; }
.badge-amber  { background: linear-gradient(135deg, #fef3c7, #ffedd5); color: #b45309; border: 1px solid #fcd34d; }
.badge-purple { background: linear-gradient(135deg, #ede9fe, #fae8ff); color: #7c3aed; border: 1px solid #c4b5fd; }
.badge-teal   { background: linear-gradient(135deg, #ccfbf1, #d1fae5); color: #0f766e; border: 1px solid #5eead4; }
.badge-coral  { background: linear-gradient(135deg, #ffe4e6, #fce7f3); color: #e11d48; border: 1px solid #fda4af; }
.badge-sky    { background: linear-gradient(135deg, #e0f2fe, #dbeafe); color: #0369a1; border: 1px solid #7dd3fc; }

.section-title {
    font-family: var(--font-bn), var(--font-en);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.35rem;
    width: 100%;
    max-width: 52rem;
}
.section-title.text-gradient { display: block; }

.section-subtitle {
    color: #64748b;
    font-size: 1.05rem;
    max-width: 44rem;
    margin: 0.35rem auto 0;
    line-height: 1.65;
}

.section-header {
    position: relative;
    display: block;
    margin-bottom: 0.85rem;
    padding-bottom: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.section-header.text-gradient,
.text-center .section-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-header::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 6px;
    background: linear-gradient(90deg, #f59e0b, #f43f5e, #8b5cf6, #3b82f6);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}
.text-center .section-header::after { left: 50%; transform: translateX(-50%); }

/* ── Header ── */
.site-header {
    z-index: 1030;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: none;
    box-shadow: 0 4px 30px rgba(29, 78, 216, 0.08);
}
.site-header::after {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #1d4ed8, #7c3aed, #f59e0b, #10b981);
}

.website_name { font-size: 1.1rem; font-weight: 800; }
.website_name a {
    background: linear-gradient(135deg, #1e3a8a, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.logo { width: 200px; transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.04); }
.logo img { width: 100%; height: auto; }

.top-bar a { transition: all 0.25s ease; color: #fff !important; text-decoration: none; opacity: 0.92; }
.top-bar a:hover { color: #fde68a !important; opacity: 1; transform: translateY(-1px); }
.top-bar .fab, .top-bar .fas { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

.site-nav .nav-link {
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding: 0.55rem 1rem !important;
    border-radius: 0.5rem;
    transition: all 0.25s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.show {
    color: var(--brand-primary) !important;
    background: linear-gradient(135deg, rgba(219,234,254,0.8), rgba(237,233,254,0.6));
}
.site-nav .nav-link::after { display: none; }

.site-header .dropdown-menu {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    padding: 0.5rem;
    min-width: 220px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
}
.site-header .dropdown-item {
    border-radius: 0.6rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
}
.site-header .dropdown-item:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    transform: translateX(4px);
}

#menuToggle {
    background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    top: 117px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    z-index: 1040;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
}
.mobile-menu.active { display: flex; }
.mobile-menu-content {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(165deg, #1e3a8a 0%, #4f46e5 50%, #0f172a 100%);
    padding: 1.5rem;
    border-radius: 0 0 0 1.5rem;
    max-height: calc(100vh - 117px);
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}
.mobile-menu-content a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.mobile-menu-content a:hover {
    color: #fde68a;
    background: rgba(255,255,255,0.12);
    transform: translateX(4px);
}

/* ── Cards ── */
.site-card {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.9);
    position: relative;
}
.site-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.site-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(147, 197, 253, 0.5);
}
.site-card:hover::before { opacity: 1; }
.site-card img { transition: transform 0.5s ease; }
.site-card:hover img { transform: scale(1.06); }

/* ── Buttons ── */
.btn-site-primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    padding: 0.7rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transition: all 0.3s ease;
}
.btn-site-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.45);
    color: #fff;
    background: linear-gradient(135deg, #1e40af 0%, #6d28d9 100%);
}

.btn-site-accent {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}
.btn-site-accent:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }

.btn-read-more {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.85rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-read-more:hover,
.btn-read-more:focus {
    color: #fff !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.42);
}
.btn-read-more:active {
    transform: translateY(-1px) scale(1.01);
}

.btn-primary {
    background: linear-gradient(135deg, #1d4ed8, #4f46e5) !important;
    border: none !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1e40af, #6d28d9) !important;
    transform: translateY(-1px);
}

/* ── Hero slider ── */
.mySwiper {
    border-radius: 0 0 1.5rem 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}
.mySwiper .swiper-slide img {
    max-height: 520px;
    object-fit: cover;
}
.mySwiper .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #f59e0b, #f43f5e) !important;
}

/* ── About section ── */
.about-media-wrap {
    position: relative;
    max-width: 22rem;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .about-media-wrap {
        margin-inline: 0;
        max-width: 100%;
    }
}
.about-media-glow {
    position: absolute;
    inset: -6px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #f59e0b);
    border-radius: 1.35rem;
    opacity: 0.35;
    filter: blur(10px);
    transition: opacity 0.4s ease;
    z-index: 0;
}
.about-media-wrap:hover .about-media-glow { opacity: 0.55; }
.about-media-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(147, 197, 253, 0.45);
    box-shadow:
        0 12px 32px rgba(30, 58, 138, 0.12),
        0 4px 14px rgba(79, 70, 229, 0.08);
}
.about-media-frame {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}
.about-media-portrait {
    aspect-ratio: 4 / 5;
    width: 100%;
    min-height: 280px;
    border-radius: 0;
}
.about-media-portrait .about-media-img,
.about-media-portrait .image-fallback-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform 0.65s ease;
}
.about-media-wrap:hover .about-media-portrait .about-media-img,
.about-media-wrap:hover .about-media-portrait .image-fallback-img {
    transform: scale(1.04);
}
.about-media-portrait .image-fallback-placeholder {
    position: absolute;
    inset: 0;
    min-height: 100%;
}
.about-media-video {
    display: block;
    border-radius: 0;
    background: #0f172a;
}
.about-media-ratio {
    border-radius: 0;
}
.about-media-caption {
    padding: 1rem 1.15rem 1.15rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 55%, #fff7ed 100%);
    border-top: 1px solid rgba(147, 197, 253, 0.35);
}
.about-media-person {
    font-family: var(--font-bn), var(--font-en);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.45;
    color: #1e3a8a;
}
.about-media-designation {
    font-family: var(--font-bn), var(--font-en);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.55;
    color: #475569;
}
.about-media-deco {
    position: absolute;
    bottom: -1.25rem;
    right: -1.25rem;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1rem;
    opacity: 0.22;
    background-image: radial-gradient(#6366f1 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 0;
}
.about-read-chevron { transition: transform 0.3s ease; font-size: 0.85rem; }
.about-read-chevron-open { transform: rotate(180deg); }

.hero-section {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}
.hero-section::after { display: none; }

/* ── Organizations ── */
#programs .org-card:active .org-card-inner { transform: scale(0.98); }
#programs .org-card-logo { filter: drop-shadow(0 2px 8px rgba(30, 58, 138, 0.1)); }
#programs .org-card:hover .org-card-logo { filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.2)); }
#programs .org-logo-placeholder { transition: transform 0.3s ease; }
#programs .org-card:hover .org-logo-placeholder { transform: scale(1.04); }
#programs .logoSwiper .swiper-slide { height: auto; }
#programs .org-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px; background: #cbd5e1; opacity: 1; transition: all 0.3s;
}
#programs .org-swiper-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #4f46e5, #f59e0b) !important;
    width: 1.75rem; border-radius: 4px;
}

.org-card-border {
    border-radius: 1.25rem;
    padding: 2px;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    transition: all 0.45s ease;
    box-shadow: var(--shadow-soft);
}
.org-card:hover .org-card-border {
    background: linear-gradient(135deg, #60a5fa, #c084fc, #fbbf24);
    box-shadow: var(--shadow-hover);
    transform: translateY(-10px);
}
.org-card-inner {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-radius: 1.2rem;
    min-height: 210px;
}
.org-card-logo-wrap {
    min-height: 110px;
    background: linear-gradient(135deg, #fff, #eff6ff);
    border: 1px solid #dbeafe;
    border-radius: 0.85rem;
}
.org-ph-blue   { background: linear-gradient(135deg, #dbeafe, #e0e7ff); border: 1px solid #93c5fd; }
.org-ph-amber  { background: linear-gradient(135deg, #fef3c7, #ffedd5); border: 1px solid #fcd34d; }
.org-ph-emerald{ background: linear-gradient(135deg, #d1fae5, #ccfbf1); border: 1px solid #6ee7b7; }
.org-ph-violet { background: linear-gradient(135deg, #ede9fe, #fae8ff); border: 1px solid #c4b5fd; }
.org-ph-rose   { background: linear-gradient(135deg, #ffe4e6, #fce7f3); border: 1px solid #fda4af; }
.org-ph-sky    { background: linear-gradient(135deg, #e0f2fe, #dbeafe); border: 1px solid #7dd3fc; }

/* ── Image fallbacks (missing/broken media) ── */
.image-fallback-wrap {
    position: relative;
    overflow: hidden;
    background: #f8fafc;
}
.about-media-img-wrap {
    min-height: 220px;
    border-radius: inherit;
}
.about-section .about-media-img-wrap.about-media-portrait {
    min-height: 210px;
    border-radius: 0;
    height: 522px;
}
.image-fallback-placeholder {
    width: 100%;
    min-height: 100%;
    padding: 1.25rem;
    border-radius: inherit;
    gap: 0.35rem;
}
.image-fallback-art {
    width: 42%;
    max-width: 6.5rem;
    height: auto;
    opacity: 0.92;
}
.image-fallback-initials {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}
.image-fallback-label {
    opacity: 0.72;
    font-weight: 600;
}
.team-photo-frame {
    width: 7rem;
    height: 7rem;
}
.team-photo-fallback {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
}
.team-photo-fallback .image-fallback-art {
    width: 55%;
    max-width: 3rem;
}
.team-photo-fallback .image-fallback-initials {
    font-size: 0.85rem;
}
.team-photo-fallback .image-fallback-label {
    display: none;
}

/* ── Team ── */
.team-card {
    transition: all 0.35s ease;
    border: 1px solid #e9d5ff !important;
    background: linear-gradient(180deg, #fff 0%, #faf5ff 100%) !important;
}
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.15) !important;
    border-color: #c4b5fd !important;
}
.btn-read-more-team {
    background: linear-gradient(135deg, #9333ea, #4f46e5);
    box-shadow: 0 6px 20px rgba(147, 51, 234, 0.32);
    font-size: 0.9rem;
    padding: 0.7rem 1.5rem;
}
.btn-read-more-team:hover,
.btn-read-more-team:focus {
    box-shadow: 0 12px 32px rgba(147, 51, 234, 0.42);
}

.team-speech-box {
    font-family: var(--font-bn), var(--font-en);
    font-size: 1.05rem;
    line-height: 2;
    color: #334155;
    padding: 1rem 1.1rem;
    background: rgba(243, 232, 255, 0.65);
    border-radius: 0.85rem;
    border: 1px solid rgba(196, 181, 253, 0.45);
}
@media (min-width: 768px) {
    .team-speech-box {
        font-size: 1.12rem;
        line-height: 2.05;
    }
}
.team-read-chevron {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}
.team-read-chevron-open {
    transform: rotate(180deg);
}

.team-gradient-title {
    background: linear-gradient(135deg, #7c3aed, #4f46e5, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.team-social {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.team-social:hover { transform: scale(1.12) translateY(-2px); color: #fff !important; }

/* ── Swiper nav ── */
.swiper-button-next, .swiper-button-prev {
    background: rgba(255, 255, 255, 0.95) !important;
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    color: var(--brand-primary) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #fff !important;
}
.swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #f59e0b, #f43f5e) !important;
    width: 28px !important;
    border-radius: 6px !important;
}

.swiper-nav-btn {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #3b82f6, #8b5cf6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.swiper-nav-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.35);
}

/* ── Campaign progress ── */
.campaign-progress { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.campaign-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

/* ── Partners (3D) ── */
.partners-section {
    background: linear-gradient(160deg, #eef2ff 0%, #fae8ff 28%, #fff7ed 55%, #ecfdf5 82%, #e0f2fe 100%);
    isolation: isolate;
}
.partners-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 10% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 90% 15%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 70% 55% at 50% 100%, rgba(16, 185, 129, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 75% 70%, rgba(244, 63, 94, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.partners-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.partners-section .partners-deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: partner-float 12s ease-in-out infinite;
}
.partners-deco-1 { width: 280px; height: 280px; top: 10%; left: -5%; background: rgba(139, 92, 246, 0.25); }
.partners-deco-2 { width: 220px; height: 220px; bottom: 5%; right: -3%; background: rgba(14, 165, 233, 0.22); animation-delay: -4s; }
.partners-deco-3 { width: 160px; height: 160px; top: 40%; right: 15%; background: rgba(245, 158, 11, 0.2); animation-delay: -8s; }

@keyframes partner-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -25px) scale(1.08); }
}

.partners-section .container { position: relative; z-index: 2; }

.partners-swiper-wrap {
    perspective: 1200px;
    padding: 1rem 2.5rem 0.5rem;
}
.partners-swiper .swiper-slide {
    width: 220px;
    height: auto;
}
@media (min-width: 768px) {
    .partners-swiper .swiper-slide { width: 240px; }
}
@media (min-width: 1200px) {
    .partners-swiper .swiper-slide { width: 260px; }
}

/* Centered grid when few partners (no swiper) */
.partners-grid .partner-card-3d {
    max-width: 280px;
    margin: 0 auto;
}

.partner-card-3d {
    display: block;
    height: 100%;
    text-decoration: none;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.partner-card-3d:hover { transform: translateY(-4px); }

.partner-card-inner {
    position: relative;
    height: 100%;
    min-height: 160px;
    padding: 1.75rem 1.5rem;
    border-radius: 1.35rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 45%, #f0f4ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 12px 28px rgba(79, 70, 229, 0.1),
        0 24px 48px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(226, 232, 240, 0.5);
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.partner-card-3d:hover .partner-card-inner {
    transform: translateY(-14px) rotateX(4deg) scale(1.02);
    box-shadow:
        0 8px 16px rgba(79, 70, 229, 0.08),
        0 20px 40px rgba(79, 70, 229, 0.18),
        0 40px 70px rgba(245, 158, 11, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(147, 197, 253, 0.6);
}
.partner-card-3d:active .partner-card-inner {
    transform: translateY(-6px) scale(0.98);
}

.partner-card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%);
    transform: rotate(25deg) translateX(-100%);
    transition: transform 0.7s ease;
    pointer-events: none;
}
.partner-card-3d:hover .partner-card-shine { transform: rotate(25deg) translateX(100%); }

.partner-card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #10b981);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.partner-card-3d:hover .partner-card-inner::before { opacity: 1; }

.partner-logo-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(239,246,255,0.5));
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.04);
    min-height: 90px;
}

.partner-logo {
    max-width: 100%;
    max-height: 4.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(30%) drop-shadow(0 4px 12px rgba(30, 58, 138, 0.12));
    opacity: 0.92;
    transition: all 0.4s ease;
}
.partner-card-3d:hover .partner-logo {
    filter: grayscale(0%) drop-shadow(0 8px 20px rgba(79, 70, 229, 0.2));
    opacity: 1;
    transform: scale(1.08);
}

.partner-card-name {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    text-align: center;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.partner-card-3d:hover .partner-card-name { color: #4f46e5; }

.partners-section .partners-swiper .swiper-slide {
    height: auto;
    padding: 0.75rem 0.25rem;
}

.partners-section .partners-swiper-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #cbd5e1;
    opacity: 1;
    transition: all 0.35s ease;
}
.partners-section .partners-swiper-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #4f46e5, #f59e0b, #10b981) !important;
    width: 2rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35);
}

.partners-section .swiper-nav-btn {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.2);
}

/* ── Video section ── */
.video-section {
    background: linear-gradient(135deg, #47816b 0%, #0e422f 40%, #86ff95 100%) !important;
    position: relative;
}
.video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(14, 165, 233, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 60% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 40%);
    pointer-events: none;
}
.video-section .section-header {
    background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.video-section .section-header::after {
    background: linear-gradient(90deg, #f59e0b, #f43f5e, #a78bfa);
    box-shadow: 0 2px 14px rgba(245, 158, 11, 0.4);
}
.video-section .section-subtitle {
    color: rgba(255, 255, 255, 0.72);
}

/* ── Footer ── */
#footer {
    background: var(--gradient-footer);
    padding-top: 3.5rem;
    color: #e2e8f0;
    position: relative;
}
#footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #10b981, #f43f5e);
}
#footer a { transition: all 0.25s ease; text-decoration: none; color: #cbd5e1; }
#footer a:hover { color: #fde68a !important; transform: translateX(3px); }
#footer .footer-title {
    color: #7dd3fc;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
}
#footer .footer-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 2.5rem; height: 3px;
    background: linear-gradient(90deg, #f59e0b, #f43f5e);
    border-radius: 2px;
}
#footer .text-center .footer-title::after { left: 50%; transform: translateX(-50%); }

.footer-slogan {
    color: #a5f3fc;
    font-style: italic;
    margin-top: 12px;
    border: 1px dashed rgba(94, 234, 212, 0.4);
    padding: 12px;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.05);
}
.footer-contact-btn {
    padding: 0.65rem 2rem;
    background: linear-gradient(135deg, #0ea5e9, #4f46e5);
    border-radius: 999px;
    border: none;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
    transition: all 0.3s ease;
}
.footer-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.4);
    color: #fff;
}

.footer-social a {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.footer-social a:hover {
    transform: translateY(-4px) scale(1.1) !important;
    background: linear-gradient(135deg, #4f46e5, #0ea5e9);
    color: #fff !important;
}

#footer .border-top {
    border-color: rgba(255,255,255,0.12) !important;
}
#footer .small, #footer p { color: #94a3b8; }
#footer .form-control {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 0.75rem 0 0 0.75rem;
}
#footer .form-control::placeholder { color: #94a3b8; }
#footer .form-control:focus {
    background: rgba(255,255,255,0.12);
    border-color: #5eead4;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.2);
}
#footer .btn-subscribe {
    background: linear-gradient(135deg, #f59e0b, #f43f5e) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 0.75rem 0.75rem 0 !important;
    font-weight: 700;
}
#footer .list-unstyled a {
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.9375rem;
    padding: 0.15rem 0;
}
#footer .list-unstyled a:hover {
    color: #fde68a !important;
}
#footer .list-unstyled li {
    transition: transform 0.2s ease;
}
#footer .list-unstyled li:hover {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    #footer .footer-link-col,
    #footer .footer-contact-col {
        text-align: center;
    }
    #footer .footer-link-col .footer-title::after,
    #footer .footer-contact-col .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    #footer .footer-link-col .list-unstyled a {
        justify-content: center;
    }
    #footer .footer-link-col .list-unstyled li:hover {
        transform: none;
    }
    #footer .footer-contact-col .list-unstyled li.d-flex {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
    #footer .footer-contact-col .list-unstyled li.d-flex i {
        margin-right: 0 !important;
        margin-bottom: 0.35rem;
    }
    #footer a:hover {
        transform: none;
    }
}

/* Footer bottom bar */
.footer-bottom {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.footer-bottom-grid {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .footer-bottom-grid {
        grid-template-columns: 1fr auto 1fr;
        text-align: left;
    }
    .footer-bottom-links {
        justify-self: end;
        text-align: right;
    }
}
.footer-copyright {
    color: #94a3b8;
}
.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}
.footer-bottom-links a {
    color: #94a3b8 !important;
    font-weight: 500;
    padding: 0.2rem 0.35rem;
    border-radius: 0.35rem;
    transform: none !important;
}
.footer-bottom-links a:hover {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.06);
}
.footer-link-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.45);
    flex-shrink: 0;
}

/* Donet IT credit button */
.footer-credit-wrap {
    display: flex;
    justify-content: center;
}
.footer-credit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.15rem 0.6rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(148, 163, 184, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e2e8f0 !important;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-decoration: none !important;
    box-shadow:
        0 4px 20px rgba(15, 23, 42, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: none !important;
}
.footer-credit-btn:hover,
.footer-credit-btn:focus-visible {
    color: #fff !important;
    border-color: rgba(94, 234, 212, 0.55);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.42), rgba(14, 165, 233, 0.28));
    box-shadow:
        0 12px 36px rgba(79, 70, 229, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-3px) scale(1.02) !important;
}
.footer-credit-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #4f46e5, #0ea5e9);
    color: #fff;
    font-size: 0.75rem;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45);
}
.footer-credit-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    text-align: left;
}
.footer-credit-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.footer-credit-brand {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #5eead4 0%, #38bdf8 45%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-credit-arrow {
    font-size: 0.65rem;
    opacity: 0.55;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.footer-credit-btn:hover .footer-credit-arrow,
.footer-credit-btn:focus-visible .footer-credit-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* ── Decorations ── */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
.animate-blob { animation: blob 8s ease-in-out infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
[x-cloak] { display: none !important; }

.decor-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.45;
    pointer-events: none;
}

.ratio-16x9-custom { position: relative; width: 100%; padding-top: 56.25%; }
.ratio-16x9-custom > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.video-card { transition: transform 0.3s ease; }
.video-card:hover { transform: translateY(-6px); }
.video-play-btn { animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }

.video-card-media { isolation: isolate; }
.video-thumb-wrap { z-index: 1; }
.video-card-overlay-layer {
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), transparent);
}
.video-card-play-layer {
    z-index: 3;
    pointer-events: none;
}
.video-card-title-layer {
    z-index: 3;
    pointer-events: none;
}
.video-play-btn {
    pointer-events: auto;
    position: relative;
    z-index: 4;
}

.video-site-modal {
    z-index: 1080;
}
.video-site-modal-close {
    z-index: 1081;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.12);
}
.video-site-modal-frame {
    max-width: 56rem;
}

/* YouTube thumbnail fallback */
.video-thumb-wrap {
    overflow: hidden;
    background: linear-gradient(135deg, #1e1b4b, #4f46e5 45%, #f59e0b);
}
.video-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 50%, #d97706 100%);
}
.video-thumb-fallback-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-item .video-thumb-wrap,
.video-card .video-thumb-wrap {
    z-index: 0;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    50% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.gallery-item { position: relative; overflow: hidden; border-radius: 1rem; cursor: pointer; }
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(245, 158, 11, 0.75));
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.gallery-item:hover::before { opacity: 1; }

.line-clamp-2, .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.page-hero .page-title {
    text-shadow: 0 4px 30px rgba(0,0,0,0.25);
    letter-spacing: -0.02em;
}
.page-prose p { margin-bottom: 1.25em; line-height: 1.75; color: #374151; }
.page-prose img { max-width: 100%; height: auto; }
.table-scroll-wrapper { overflow-x: auto; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4f46e5, #f59e0b);
    border-radius: 5px;
}

aside.nd-sidebar {
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-soft);
}

/* ── Detail pages (campaign, news, etc.) ── */
.detail-page {
    position: relative;
    overflow: hidden;
    padding: 0 0 4rem;
    min-height: 60vh;
}
@media (min-width: 768px) {
    .detail-page { padding-bottom: 5rem; }
}

.campaign-detail-section {
    background: linear-gradient(160deg, #ffedd5 0%, #fff 18%, #fde68a 38%, #e9d5ff 62%, #bfdbfe 85%, #ecfdf5 100%);
}

.news-detail-section {
    background: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 22%, #dbeafe 48%, #e0e7ff 72%, #fff 100%);
}

.project-detail-section {
    background: linear-gradient(160deg, #fef3c7 0%, #fff 20%, #ddd6fe 45%, #dbeafe 70%, #f0fdf4 100%);
}

/* Detail pages — shared panel spacing & depth */
.campaign-detail-section .detail-panel,
.news-detail-section .detail-panel,
.project-detail-section .detail-panel {
    border-radius: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.06),
        0 24px 56px rgba(79, 70, 229, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
.campaign-detail-section .detail-panel::before,
.news-detail-section .detail-panel::before,
.project-detail-section .detail-panel::before {
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #7c3aed, #f59e0b, #ef4444);
}
.campaign-detail-section .detail-panel-body,
.news-detail-section .detail-panel-body,
.project-detail-section .detail-panel-body {
    padding: 2rem;
}
@media (min-width: 768px) {
    .campaign-detail-section .detail-panel-body,
    .news-detail-section .detail-panel-body,
    .project-detail-section .detail-panel-body { padding: 2.25rem 2.5rem; }
}
.campaign-detail-section .detail-panel + .detail-panel,
.campaign-detail-section .detail-sidebar-sticky > .detail-panel,
.news-detail-section .detail-panel + .detail-panel,
.news-detail-section .detail-sidebar-sticky > .detail-panel,
.project-detail-section .detail-panel + .detail-panel,
.project-detail-section .detail-sidebar-sticky > .detail-panel {
    margin-bottom: 1.75rem !important;
}
.campaign-detail-section .detail-sidebar-sticky > .detail-panel:last-child,
.news-detail-section .detail-sidebar-sticky > .detail-panel:last-child,
.project-detail-section .detail-sidebar-sticky > .detail-panel:last-child {
    margin-bottom: 0 !important;
}

.detail-fund-card {
    background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 35%, #fef3c7 70%, #fff 100%);
    border: 2px solid #f59e0b;
    border-radius: 1.15rem;
    padding: 1.75rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow:
        0 10px 28px rgba(245, 158, 11, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.detail-fund-card .campaign-progress {
    height: 16px;
    background: #fed7aa;
    border: 1px solid #fdba74;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.detail-fund-card .campaign-progress-bar {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
}
.detail-fund-card .btn-site-accent {
    padding: 0.85rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 0.85rem;
    margin-top: 0.5rem !important;
    box-shadow: 0 10px 28px rgba(234, 88, 12, 0.45);
}
.detail-fund-stats {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.15rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}
.detail-fund-stat strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}
.detail-fund-stat:first-child strong {
    color: #ea580c;
}
.detail-fund-stat:last-child strong {
    color: #1d4ed8;
}

.detail-fund-stat span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #78716c;
}
.detail-fund-pct {
    font-size: 2.1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, 0.25));
}

.detail-block-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4f46e5;
    margin-bottom: 1.15rem;
    margin-top: 0.25rem;
}

.detail-prose {
    font-size: 1.12rem;
    line-height: 2;
    color: #1e293b;
}
.detail-prose p { margin-bottom: 1.6em; }
.detail-prose h2 {
    font-size: 1.55rem;
    margin: 2.25em 0 0.85em;
    color: #1e3a8a;
    padding-bottom: 0.45rem;
    border-bottom: 3px solid #f59e0b;
    display: inline-block;
    scroll-margin-top: 6rem;
}
.detail-prose h3 {
    font-size: 1.28rem;
    color: #4f46e5;
    margin: 1.75em 0 0.65em;
    scroll-margin-top: 6rem;
}
.detail-prose a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration-color: #f59e0b;
}
.detail-prose > p:first-of-type::first-letter {
    font-size: 3.75em;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.detail-footer-divider {
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 2px solid #e2e8f0;
}
.detail-share-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.detail-share-label i {
    font-size: 0.85rem;
    color: #8b5cf6;
}
.detail-related-section {
    margin-top: 4rem;
    padding-top: 1rem;
}
.campaign-detail-section .detail-content-row,
.news-detail-section .detail-content-row,
.project-detail-section .detail-content-row {
    --bs-gutter-y: 2rem;
    --bs-gutter-x: 2rem;
}
@media (min-width: 992px) {
    .campaign-detail-section .detail-content-row,
    .news-detail-section .detail-content-row,
    .project-detail-section .detail-content-row {
        --bs-gutter-y: 2.5rem;
        --bs-gutter-x: 2.75rem;
    }
}

.detail-hero-banner-news {
    background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 50%, #4f46e5 100%);
}
.detail-hero-banner-project {
    background: linear-gradient(135deg, #b45309 0%, #4f46e5 50%, #1d4ed8 100%);
}

.detail-news-highlight {
    background: linear-gradient(145deg, #ecfdf5 0%, #f0fdfa 50%, #e0f2fe 100%);
    border: 2px solid #5eead4;
    border-radius: 1.15rem;
    padding: 1.35rem 1.25rem 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.15);
}
.detail-project-highlight {
    background: linear-gradient(145deg, #fffbeb 0%, #ede9fe 50%, #dbeafe 100%);
    border: 2px solid #a5b4fc;
    border-radius: 1.15rem;
    padding: 1.35rem 1.25rem 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.15);
}
.news-detail-section .detail-prose h2 {
    border-bottom-color: #14b8a6;
}
.news-detail-section .detail-prose > p:first-of-type::first-letter {
    background: linear-gradient(135deg, #0d9488, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.project-detail-section .detail-prose h2 {
    border-bottom-color: #6366f1;
}
.project-detail-section .detail-prose > p:first-of-type::first-letter {
    background: linear-gradient(135deg, #d97706, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Full-width hero with title overlay */
.detail-hero-banner {
    position: relative;
    min-height: clamp(280px, 42vw, 480px);
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
    overflow: hidden;
    isolation: isolate;
}
.detail-hero-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform 8s ease;
}
.detail-hero-banner:hover .detail-hero-banner-img {
    transform: scale(1.04);
}
.detail-hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.35) 42%, rgba(15, 23, 42, 0.92) 100%),
        linear-gradient(90deg, rgba(30, 58, 138, 0.55) 0%, transparent 55%, rgba(234, 88, 12, 0.35) 100%);
    pointer-events: none;
}
.detail-hero-banner-fallback {
    background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 45%, #0ea5e9 100%);
    min-height: 320px;
}
.detail-hero-banner-fallback .detail-hero-banner-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.detail-hero-banner-content {
    z-index: 2;
    width: 100%;
    padding: 2rem 0 3rem;
}
@media (min-width: 768px) {
    .detail-hero-banner-content { padding: 2.5rem 0 3.5rem; }
}

.detail-body-wrap {
    z-index: 2;
    margin-top: 0;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}
@media (min-width: 992px) {
    .detail-body-wrap { padding-top: 3.5rem; }
}

.detail-breadcrumb-hero {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.detail-breadcrumb-hero a {
    color: #fde68a;
}
.detail-breadcrumb-hero a:hover { color: #fff; }
.detail-breadcrumb-hero .sep { opacity: 0.55; color: rgba(255,255,255,0.6); }
.detail-breadcrumb-hero span:last-child {
    color: #fff;
    font-weight: 700;
}

.detail-title-hero {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(30, 58, 138, 0.4);
    max-width: 54rem;
    margin-top: 0.25rem;
    line-height: 1.2;
}
.detail-hero-banner .detail-type-badge {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.15rem;
    font-size: 0.78rem;
    padding: 0.45rem 1.1rem;
}

#detail-progress {
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #f43f5e);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

#detail-toast {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    background: linear-gradient(135deg, #1e3a8a, #4f46e5);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 9998;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.35);
}
#detail-toast.show { opacity: 1; transform: translateY(0); }

.detail-breadcrumb {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 1.5rem;
}
.detail-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}
.detail-breadcrumb a:hover { color: var(--brand-primary); }
.detail-breadcrumb .sep { opacity: 0.4; margin: 0 0.35rem; }

.detail-panel {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.25rem;
    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.04),
        0 16px 40px rgba(79, 70, 229, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
    position: relative;
}
.detail-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b);
    z-index: 1;
}
.detail-panel-body { padding: 1.5rem; }
@media (min-width: 768px) {
    .detail-panel-body { padding: 2rem; }
}

.detail-sidebar-sticky {
    position: sticky;
    top: 7rem;
}

.detail-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
}
.detail-info-row:last-child { border-bottom: none; }
.detail-info-label { color: #64748b; font-size: 0.8rem; font-weight: 500; }
.detail-info-value { color: #1e293b; font-weight: 600; text-align: right; }

.detail-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}
.detail-status-active {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
    border: 1px solid #6ee7b7;
}
.detail-status-inactive {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.detail-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.detail-title {
    font-size: clamp(1.65rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.detail-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    margin: 1.75rem 0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}
.detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(15, 23, 42, 0.35));
    pointer-events: none;
}
.detail-hero img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.detail-hero:hover img { transform: scale(1.03); }

.detail-prose blockquote {
    border-left: 4px solid var(--brand-accent);
    margin: 2em 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: #475569;
}
.detail-prose img {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 1.75em 0;
    box-shadow: var(--shadow-card);
}

/* ── Smart share block ── */
.detail-share-block {
    margin-top: 0.25rem;
}
.detail-share-head {
    margin-bottom: 1rem;
}
.detail-share-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.detail-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    padding: 0.55rem 1rem;
    border-radius: 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.detail-share-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 55%);
    pointer-events: none;
}
.detail-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.detail-share-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.detail-share-btn:hover {
    transform: translateY(-4px) scale(1.03);
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.detail-share-btn:hover .detail-share-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.detail-share-fb {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
    color: #1d4ed8;
}
.detail-share-fb .detail-share-icon { background: #1877f2; color: #fff; }
.detail-share-fb:hover { background: #1877f2; border-color: #1877f2; }

.detail-share-tw {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border-color: #cbd5e1;
    color: #0f172a;
}
.detail-share-tw .detail-share-icon { background: #0f172a; color: #fff; }
.detail-share-icon-x { font-weight: 900; }
.detail-share-icon-x i { font-size: 0.95rem; }
.detail-share-tw:hover { background: #0f172a; border-color: #0f172a; }

.detail-share-li {
    background: linear-gradient(145deg, #eff6ff, #e0f2fe);
    border-color: #7dd3fc;
    color: #0369a1;
}
.detail-share-li .detail-share-icon { background: #0a66c2; color: #fff; }
.detail-share-li:hover { background: #0a66c2; border-color: #0a66c2; }

.detail-share-em {
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-color: #cbd5e1;
    color: #475569;
}
.detail-share-em .detail-share-icon { background: #64748b; color: #fff; }
.detail-share-em:hover { background: #475569; border-color: #475569; }

.detail-share-cp {
    background: linear-gradient(145deg, #fff7ed, #ffedd5);
    border-color: #fdba74;
    color: #c2410c;
}
.detail-share-cp .detail-share-icon {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
}
.detail-share-cp:hover {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-color: transparent;
}

/* Sidebar compact share — icon tiles */
.detail-share-compact .detail-share-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}
.detail-share-compact .detail-share-btn {
    flex-direction: column;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0.5rem;
    border-radius: 1rem;
    gap: 0;
}
.detail-share-compact .detail-share-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    font-size: 1.05rem;
}
@media (max-width: 380px) {
    .detail-share-compact .detail-share-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Footer expanded share — labeled pills */
.detail-share-expanded .detail-share-btn {
    border-radius: 999px;
    padding: 0.6rem 1.15rem;
}
.detail-share-expanded .detail-share-grid {
    gap: 0.55rem;
}

.detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s;
}
.detail-back-link:hover {
    color: var(--brand-primary);
    transform: translateX(-4px);
}

.detail-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: detail-toc;
}
.detail-toc-list li {
    counter-increment: detail-toc;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #64748b;
}
.detail-toc-list li::before {
    content: counter(detail-toc, decimal-leading-zero);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-primary);
    flex-shrink: 0;
    padding-top: 0.15rem;
}
.detail-toc-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.detail-toc-list a:hover { color: var(--brand-primary); }

.detail-footer-divider {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.detail-related-section { margin-top: 3rem; }
.detail-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(145deg, #fff, #f8fafc);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--shadow-soft);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.detail-related-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(147, 197, 253, 0.5);
}
.detail-related-card .detail-related-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}
.detail-related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.detail-related-card:hover img { transform: scale(1.06); }
.detail-related-card .detail-related-body { padding: 1.15rem 1.25rem 1.35rem; }
.detail-related-date {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.45rem;
}
.detail-related-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.detail-related-card:hover .detail-related-title { color: var(--brand-accent-dark); }

.detail-not-found {
    text-align: center;
    padding: 5rem 1rem;
}
.detail-not-found i {
    font-size: 4rem;
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
    .detail-sidebar-sticky { position: static; }
    .detail-order-side { order: 1; }
    .detail-order-main { order: 2; }
}

@media (max-width: 768px) {
    .section-header { font-size: 1.5rem; }
    .mobile-menu-content { max-width: 100%; border-radius: 0; }
    .mySwiper .swiper-slide img { max-height: 280px; }
}