/* =========================================================================
   National Biopharmaceutical Research Center — Core Stylesheet
   Theme: matches nbpr-itest.vercel.app background & typography
   ========================================================================= */

:root {
    --bg: #ffffff;
    --bg-2: #f5f7fa;
    --surface: hsla(0, 0%, 100%, 0.92);
    --surface-2: #f5f7fa;
    --border: rgba(10, 37, 64, 0.10);
    --border-strong: rgba(10, 37, 64, 0.16);
    --text: #0a2540;
    --muted: #44566c;
    --muted-2: #6b7d92;
    --heading: #0a2540;
    --on-primary: #ffffff;
    --primary: #00aeef;
    --primary-2: #00d4ff;
    --accent: #1cc8a0;
    --accent-2: #22c55e;
    --gradient: linear-gradient(100deg, #00d4ff 0%, #1cc8a0 60%, #22c55e 100%);
    --gradient-soft: linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(28, 200, 160, 0.08));
    --header-bg: #3b7fb8;
    --header-bg-scrolled: #3474aa;
    --header-border: rgba(255, 255, 255, 0.18);
    --header-shadow: 0 10px 28px -14px rgba(10, 37, 64, 0.28);
    --navbar-link: rgba(255, 255, 255, 0.92);
    --navbar-link-hover: #ffffff;
    --navbar-link-muted: rgba(255, 255, 255, 0.72);
    --body-glow-1: rgba(0, 212, 255, 0.14);
    --body-glow-2: rgba(0, 174, 239, 0.06);
    --section-alt-bg: rgba(10, 37, 64, 0.02);
    --chip-bg: rgba(10, 37, 64, 0.03);
    --chip-hover-bg: rgba(10, 37, 64, 0.06);
    --page-hero-bg: rgba(0, 174, 239, 0.05);
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.12);
    --navbar-height: 82px;
    --brand-slot-height: 78px;
    --brand-slot-width: 390px;
    --site-gutter: clamp(2rem, 6.5vw, 5.5rem);
    --container-max: min(100%, 1540px);
    --ff-display: 'Sora', 'Inter', sans-serif;
    --ff-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); }

body {
    background-color: var(--bg);
    background-image: radial-gradient(circle at 50% 0, var(--body-glow-1), transparent 60%);
    color: var(--text);
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

main#main-content {
    position: relative;
    z-index: 1;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); color: var(--heading); letter-spacing: -0.02em; }

a { color: var(--primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }

p { color: var(--muted); }

img { max-width: 100%; height: auto; }

.skip-link { position: absolute; top: 8px; left: 8px; z-index: 2000; background: var(--primary); color: #001b18; padding: .5rem 1rem; border-radius: 8px; }

/* ---------- Section scaffolding ---------- */
.section { padding: 110px 0; position: relative; }
.section-sm { padding: 70px 0; }
.section-alt { background: linear-gradient(180deg, var(--section-alt-bg), transparent); }

.section-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--ff-body); font-size: .78rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--primary-2);
    padding: .35rem .85rem; border: 1px solid var(--border-strong);
    border-radius: 100px; background: var(--gradient-soft); margin-bottom: 1.1rem;
}
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.65rem); line-height: 1.12; margin-bottom: 1rem; max-width: 720px; }
.section-lead { color: var(--muted); font-size: 1.08rem; max-width: 680px; }
.section-lead h3 {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.5rem 0 0.65rem;
}
.section-lead h3:first-child { margin-top: 0; }
.section-lead ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.section-lead ul li { margin-bottom: 0.35rem; }
#about .section-lead { max-width: none; }
#about .section-title,
.about-block-wrap .section-title { max-width: none; }
.about-block-wrap { max-width: none; width: 100%; }
.about-block__visual .about-visual { max-height: 420px; object-fit: cover; }
.about-block__visual img.about-visual { aspect-ratio: auto; display: block; }
.about-visual--video {
  aspect-ratio: 16 / 9;
  max-height: 420px;
  padding: 0;
  background: #000;
}
.about-visual__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.section-head { margin-bottom: 3rem; }
.text-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 100px; padding: .72rem 1.6rem; transition: all .25s ease; border: 1px solid transparent; }
.btn-primary { background: var(--gradient); border: none; color: var(--on-primary); box-shadow: 0 14px 30px -12px rgba(20,184,166,.6); }
.btn-primary:hover { color: var(--on-primary); transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 38px -12px rgba(20,184,166,.7); }
.btn-outline-light { border-color: var(--border-strong); color: var(--text); background: var(--chip-bg); }
.btn-outline-light:hover { background: var(--chip-hover-bg); color: var(--heading); border-color: var(--border-strong); transform: translateY(-2px); }
.btn-ghost { color: var(--primary-2); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--accent); }

.section-view-all { margin-top: 2.5rem; }
.btn-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1.75rem;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--gradient-soft);
    color: var(--heading) !important;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
}
.btn-view-all:hover {
    background: var(--gradient);
    color: var(--on-primary) !important;
    border-color: transparent;
    transform: translateY(-2px);
}

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 1030;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    transition: background .3s ease, box-shadow .3s ease;
    min-height: var(--navbar-height);
}
.site-header.scrolled {
    background: var(--header-bg-scrolled);
    border-bottom-color: var(--header-border);
    box-shadow: var(--header-shadow);
}
.site-header .navbar {
    min-height: var(--navbar-height);
    padding: 0;
}
.site-header .navbar > .container {
    min-height: var(--navbar-height);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}
.site-header .navbar-brand {
    flex-shrink: 0;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--navbar-link-hover);
    line-height: 1;
    flex: 0 0 auto;
    align-self: center;
    height: var(--brand-slot-height);
    max-height: var(--brand-slot-height);
    padding: 0;
    margin: 0;
    font-size: 1rem;
}
.navbar-brand:hover { color: var(--navbar-link-hover); }
.navbar-brand-slot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    max-width: min(var(--brand-slot-width), 32vw);
    height: var(--brand-slot-height);
    flex: 0 0 auto;
}
.navbar-brand-logo {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}
.brand-mark {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--gradient); color: var(--on-primary); font-family: var(--ff-display); font-weight: 800; font-size: 1.2rem;
    box-shadow: 0 10px 24px -10px rgba(20,184,166,.7);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--ff-display); font-size: 1.05rem; }
.brand-text small { color: var(--navbar-link-muted); font-size: .72rem; letter-spacing: .04em; }
.site-header .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
}
.site-header .site-header__nav {
    margin-left: clamp(0.35rem, 1.2vw, 1rem);
    margin-right: auto;
    flex-wrap: nowrap;
    align-items: center;
}
.site-header .navbar .nav-link {
    color: var(--navbar-link) !important;
    font-weight: 700;
    font-size: 1.02rem;
    padding: .25rem .7rem !important;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
}
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link.active {
    color: var(--navbar-link-hover) !important;
    background: rgba(255, 255, 255, 0.12);
}
.site-header .navbar-toggler {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--header-border);
    color: var(--navbar-link-hover);
    font-size: 1.3rem;
    padding: .3rem .6rem;
    background: rgba(255, 255, 255, 0.1);
}
.site-header .navbar-toggler:focus { box-shadow: none; }
.site-header .dropdown-menu {
    background: var(--header-bg-scrolled);
    border: 1px solid var(--header-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .4rem;
}
.site-header .dropdown-item {
    color: var(--navbar-link);
    border-radius: 8px;
    padding: .55rem .8rem;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--navbar-link-hover);
}
.site-header .dropdown-item .text-muted {
    color: var(--navbar-link-muted) !important;
}

.navbar .nav-link {
    color: var(--muted) !important;
    font-weight: 500;
    font-size: .92rem;
    padding: .4rem .6rem !important;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--heading) !important; }
.navbar-toggler {
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--border-strong);
    color: var(--heading);
    font-size: 1.3rem;
    padding: .3rem .6rem;
}
.navbar-toggler:focus { box-shadow: none; }
.dropdown-menu {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: .4rem;
}
.dropdown-item { color: var(--muted); border-radius: 8px; padding: .55rem .8rem; }
.dropdown-item:hover, .dropdown-item.active { background: var(--gradient-soft); color: var(--heading); }

/* Language switcher */
.lang-switcher .lang-btn {
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 100px;
    padding: .4rem .8rem;
    font-size: .86rem;
    font-weight: 600;
    background: var(--chip-bg);
    white-space: nowrap;
}
.lang-switcher .lang-btn:hover { background: var(--chip-hover-bg); }
.site-header .lang-switcher .lang-btn {
    border: 1px solid var(--header-border);
    color: var(--navbar-link-hover);
    background: rgba(255, 255, 255, 0.12);
    font-size: .9rem;
    font-weight: 700;
    padding: .22rem .8rem;
}
.site-header .lang-switcher .lang-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--navbar-link-hover);
}
.lang-form { margin: 0; }
.lang-form .dropdown-item { width: 100%; text-align: left; background: none; border: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 120px 0 90px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; opacity: .25; background-size: cover; background-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 400px at 70% 20%, rgba(56,189,248,.14), transparent 60%); }
.hero-badge {
    display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600;
    padding: .45rem 1rem; border: 1px solid var(--border-strong); border-radius: 100px;
    background: var(--gradient-soft); color: var(--text); margin-bottom: 1.6rem;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-2); box-shadow: 0 0 0 4px rgba(45,212,191,.25); }
.hero-title { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; margin-bottom: 1.4rem; }
.hero-subtitle { font-size: 1.15rem; color: var(--muted); max-width: 620px; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-visual { position: relative; min-height: 360px; }
.hero-visual--empty { min-height: 360px; }

/* ---------- Stats ---------- */
.stats-row { margin-top: 4rem; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem 1.5rem; text-align: center; height: 100%; transition: all .3s ease;
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.stat-value { font-family: var(--ff-display); font-size: 2.6rem; font-weight: 800; line-height: 1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
.stat-icon { font-size: 1.6rem; color: var(--primary-2); margin-bottom: .6rem; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 1.5rem; }
.feature-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem; height: 100%; transition: all .3s ease; position: relative; overflow: hidden;
}
.feature-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--gradient); opacity:0; transition: opacity .3s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.feature-card:hover::before { opacity: 1; }
.feature-card.d-block { height: auto; }
.feature-icon {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
    background: var(--gradient-soft); color: var(--primary-2); border: 1px solid var(--border); margin-bottom: 1.2rem;
}
.feature-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.feature-card p { font-size: .95rem; margin-bottom: 1rem; }

/* ---------- About ---------- */
.about-visual { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--gradient-soft); aspect-ratio: 4/3; display:grid; place-items:center; }
.mv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; height: 100%; }
.mv-card h4 { display:flex; align-items:center; gap:.6rem; font-size:1.1rem; }
.mv-card h4 i { color: var(--primary-2); }
.value-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border:1px solid var(--border-strong); border-radius:100px; font-size:.88rem; color:var(--text); background:var(--chip-bg); margin:.25rem; }
.value-chip i { color: var(--primary-2); }
.mini-stat { text-align:center; padding:1rem; }
.mini-stat .v { font-family:var(--ff-display); font-weight:800; font-size:1.8rem; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mini-stat .l { color:var(--muted); font-size:.85rem; }

/* ---------- Publications ---------- */
.pub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; height: 100%; transition: all .3s ease; }
.pub-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.pub-card--flat,
.pub-card--flat:hover {
    transform: none;
    height: auto;
}
.vacancy-detail-section {
    padding-bottom: 120px;
}
.vacancy-apply-modal.modal {
    z-index: 1060;
}
.vacancy-apply-modal .modal-dialog,
.vacancy-apply-modal .modal-content,
.vacancy-apply-form .form-control {
    pointer-events: auto;
}
.vacancy-apply-modal .modal-content {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
body.vacancy-modal-open .modal-backdrop {
    z-index: 1055;
}
.vacancy-apply-form .form-label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--heading);
    margin-bottom: 0.35rem;
}
.vacancy-apply-form .form-control {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    background: var(--bg);
}
.vacancy-apply-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 239, 0.15);
}
.vacancy-apply-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}
.vacancy-apply-form input[type="file"].form-control {
    padding: 0.45rem 0.75rem;
}
.vacancy-thank-you {
    border-radius: var(--radius);
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(28, 200, 160, 0.08));
    color: var(--heading);
    padding: 1.25rem 1.35rem;
}
.vacancy-thank-you strong {
    font-family: var(--ff-display);
    font-size: 1.15rem;
}
.vacancy-thank-you .bi-check-circle-fill {
    color: var(--accent-2);
}
.badge-soft { background: var(--gradient-soft); color: var(--primary-2); border: 1px solid var(--border); border-radius: 100px; font-weight: 600; padding: .35rem .8rem; font-size: .75rem; }
.pub-card h3 { font-size: 1.12rem; line-height: 1.35; margin: .9rem 0 .5rem; }
.pub-meta { color: var(--muted-2); font-size: .85rem; }
.pub-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.pub-actions .btn { padding:.4rem .9rem; font-size:.82rem; }

/* ---------- Filters ---------- */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.filter-chip { border:1px solid var(--border-strong); background:var(--chip-bg); color:var(--muted); border-radius:100px; padding:.45rem 1.1rem; font-size:.88rem; font-weight:500; cursor:pointer; transition:all .2s ease; }
.filter-chip:hover { color:var(--heading); }
.filter-chip.active { background: var(--gradient); color:var(--on-primary); border-color:transparent; font-weight:600; }

/* ---------- Journal ---------- */
.journal-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }
.toc-item { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.toc-item:last-child { border-bottom:0; }
.toc-num { width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--gradient-soft); color:var(--primary-2); font-weight:700; border:1px solid var(--border); }
.metric-row { display:flex; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--border); }
.metric-row:last-child { border-bottom:0; }
.metric-row span:first-child { color: var(--muted); }
.metric-row span:last-child { font-weight:600; color:var(--heading); }

.journal-downloads { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.journal-downloads-compact .btn { padding:.35rem .55rem; }
.journal-pdf-viewer {
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
    background:var(--surface);
    min-height:480px;
}
.journal-pdf-viewer iframe {
    width:100%;
    height:min(78vh, 920px);
    border:0;
    display:block;
    background:#fff;
}
.toc-item { align-items:flex-start; }
.toc-item .journal-downloads { flex-shrink:0; margin-top:.15rem; }

/* ---------- Researchers ---------- */
.person-card { background: var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; text-align:center; height:100%; transition:all .3s ease; }
.person-card:hover { transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.avatar { width:84px; height:84px; border-radius:50%; margin:0 auto 1rem; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:1.6rem; color:var(--on-primary); background:var(--gradient); object-fit:cover; }
.person-card h3 { font-size:1.1rem; margin-bottom:.2rem; }
.person-role { color:var(--primary-2); font-size:.88rem; font-weight:600; }
.person-field { color:var(--muted); font-size:.85rem; }
.person-pubs { color:var(--muted-2); font-size:.8rem; margin-top:.5rem; }
.person-social { display:flex; justify-content:center; gap:.6rem; margin-top:1rem; }
.person-social a { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--border); color:var(--muted); }
.person-social a:hover { color:var(--heading); border-color:var(--border-strong); }

/* ---------- Collaborations ---------- */
.partner-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.4rem; display:flex; align-items:center; gap:1rem; transition:all .3s ease; height:100%; }
.partner-card:hover { border-color:var(--border-strong); transform:translateY(-3px); }
.partner-logo { width:52px; height:52px; flex:none; border-radius:12px; background:var(--gradient-soft); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary-2); font-weight:700; object-fit:contain; }
.partner-card h4 { font-size:1rem; margin:0; }
.partner-card small { color:var(--muted); }

/* ——— International collaborations ——— */
.collaborations-section {
  position: relative;
  background: linear-gradient(180deg, #eef4fb 0%, #f7fbff 100%);
  overflow: hidden;
}
.collaborations-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/world-map-bg.svg") center 55% / min(1100px, 95%) no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
.collaborations-section > .container { position: relative; z-index: 1; }
.collab-marquee {
  overflow: hidden;
  margin-inline: calc(-1 * var(--site-gutter, 1rem));
  padding-inline: var(--site-gutter, 1rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.collab-marquee__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  --marquee-distance: 50%;
  animation: collab-marquee-ltr 40s linear infinite;
  -webkit-animation: collab-marquee-ltr 40s linear infinite;
  will-change: transform;
}
.collab-marquee:hover .collab-marquee__track {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.collab-marquee__group {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 1.25rem;
  padding-right: 1.25rem;
}
@keyframes collab-marquee-ltr {
  from { transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes collab-marquee-ltr {
  from { -webkit-transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .collab-marquee:not(.collab-marquee--static) .collab-marquee__track {
    animation-duration: 120s;
    -webkit-animation-duration: 120s;
  }
}
.collab-marquee--static {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.collab-marquee--static .collab-marquee__track {
  animation: none;
  -webkit-animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.collab-marquee--static .collab-marquee__group {
  flex-wrap: wrap;
  justify-content: center;
  padding-right: 0;
  gap: 1.25rem;
}
.collab-card {
  flex: 0 0 280px;
  width: 280px;
  background: #fff;
  border: 1px solid rgba(13, 74, 138, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(13, 74, 138, 0.08);
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 240px;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.collab-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(13, 74, 138, 0.14);
}
.collab-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.collab-card__link:hover { color: inherit; }
.collab-card__link:hover h3 { color: var(--primary-2); }
.collab-card__logo {
  width: 100%;
  height: 130px;
  flex: none;
  display: grid;
  place-items: center;
}
.collab-card__logo img {
  max-width: min(200px, 90%);
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.collab-card__logo-fallback {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f3f7fb;
  border: 1px solid rgba(13, 74, 138, 0.08);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #0d4a8a;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.collab-card__info { min-width: 0; width: 100%; }
.collab-card__info h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0;
  line-height: 1.4;
  text-wrap: balance;
  transition: color 0.2s ease;
}
.collab-detail-section { padding-top: 0; }
.collab-detail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.collab-detail-card__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.collab-detail-card__logo {
  width: 96px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
}
.collab-detail-card__logo img {
  max-width: 96px;
  max-height: 88px;
  object-fit: contain;
}
.collab-detail-card__country {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  color: var(--muted);
}
.collab-detail-card__heading {
  font-size: 1.35rem;
  margin-bottom: 1rem;
  color: var(--heading);
}
.collab-detail-card__body { margin-bottom: 1.5rem; }
.collab-detail-card__actions { margin-bottom: 1.5rem; }
.collab-partner-site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
}
.collab-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.collab-detail-back:hover { color: var(--heading); }
.collab-view-all { margin-top: 2rem; }
.btn-collab-all {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.85rem;
  border: 2px solid #002b5b;
  border-radius: 999px;
  color: #002b5b;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-collab-all:hover {
  background: #002b5b;
  color: #fff;
  transform: translateY(-1px);
}
.collab-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.collab-empty i { font-size: 2rem; display: block; margin-bottom: 0.75rem; color: var(--primary-2); }

/* ---------- News ---------- */
.news-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; height:100%; transition:all .3s ease; display:flex; flex-direction:column; }
.news-card:hover { transform:translateY(-5px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.news-thumb { aspect-ratio:16/10; background:var(--gradient-soft); object-fit:cover; width:100%; display:grid; place-items:center; color:var(--primary-2); font-size:2rem; }
.news-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.news-body h3 { font-size:1.1rem; line-height:1.35; margin:.7rem 0 .5rem; }
.news-date { display:flex; align-items:center; gap:.5rem; color:var(--muted-2); font-size:.82rem; }
.news-featured { background:linear-gradient(135deg, var(--surface), var(--surface-2)); border:1px solid var(--border-strong); }

/* ---------- Gallery ---------- */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.gallery-tile { position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1; border:1px solid var(--border); background:var(--gradient-soft); }
.gallery-tile img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-tile:hover img { transform:scale(1.06); }
.gallery-tile .cap { position:absolute; inset:auto 0 0 0; padding:.8rem; background:linear-gradient(transparent, rgba(0,0,0,.8)); font-size:.85rem; color:#fff; }

/* ---------- Contact ---------- */
.contact-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.contact-info-item { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--border); }
.contact-info-item:last-child { border-bottom:0; }
.contact-info-item .ic { width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--gradient-soft); color:var(--primary-2); border:1px solid var(--border); font-size:1.2rem; }
.contact-info-item small { color:var(--muted); display:block; }
.contact-info-item strong { color:var(--heading); font-weight:600; }
.form-control, .form-select { background:var(--bg-2); border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-sm); padding:.75rem 1rem; }
.form-control:focus, .form-select:focus { background:var(--bg-2); color:var(--text); border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(20,184,166,.18); }
.form-control::placeholder { color:var(--muted-2); }
.map-embed { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); min-height:280px; background:var(--gradient-soft); display:grid; place-items:center; color:var(--muted); }
.map-embed iframe { width:100%; min-height:320px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer { background:var(--bg-2); border-top:1px solid var(--border); padding:64px 0 28px; margin-top:40px; position:relative; z-index:0; }
.footer-brand { display:flex; align-items:center; gap:.7rem; color:var(--heading); font-family:var(--ff-display); font-weight:700; margin-bottom:1rem; }
.footer-about { color:var(--muted); font-size:.92rem; }
.footer-title { color:var(--heading); font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.2rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.6rem; }
.footer-links a { color:var(--muted); font-size:.92rem; }
.footer-links a:hover { color:var(--primary-2); }
.footer-contact { list-style:none; padding:0; margin:1.2rem 0 0; }
.footer-contact li { color:var(--muted); font-size:.9rem; margin-bottom:.5rem; }
.footer-contact i { color:var(--primary-2); margin-right:.4rem; }
.footer-social { display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--border); color:var(--muted); }
.footer-social a:hover { color:var(--heading); border-color:var(--border-strong); background:var(--chip-hover-bg); }
.footer-newsletter { margin-bottom:1.2rem; }
.footer-newsletter .input-group { flex-wrap:nowrap; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-strong); background:var(--bg-2); }
.footer-newsletter .input-group .form-control { border:0; border-radius:0; background:transparent; min-width:0; }
.footer-newsletter .input-group .form-control:focus { box-shadow:none; }
.footer-newsletter .input-group .btn { flex:none; border-radius:0; padding:.72rem 1.15rem; box-shadow:none; display:grid; place-items:center; }
.footer-newsletter .input-group .btn:hover { transform:none; }
.footer-newsletter .input-group:focus-within { border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(20,184,166,.18); }
.newsletter-feedback { display:block; margin-top:.5rem; font-size:.82rem; }
.footer-bottom { border-top:1px solid var(--border); margin-top:48px; padding-top:24px; text-align:center; }
.footer-bottom p { color:var(--muted-2); font-size:.88rem; margin:0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding:70px 0 50px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, var(--page-hero-bg), transparent); }
.breadcrumb { --bs-breadcrumb-divider-color:var(--muted-2); font-size:.85rem; }
.breadcrumb a { color:var(--muted); }
.breadcrumb-item.active { color:var(--muted-2); }

/* ---------- Back to top ---------- */
.back-to-top { position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%; border:none; background:var(--gradient); color:var(--on-primary); font-size:1.2rem; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s ease; z-index:1040; box-shadow:0 14px 30px -12px rgba(20,184,166,.6); }
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity:1; transform:none; }

/* ---------- Messages ---------- */
.message-container { margin-top:1rem; }
.alert { border-radius:var(--radius-sm); border:1px solid var(--border-strong); }

/* ---------- Pagination ---------- */
.pagination { gap:.4rem; }
.page-link { background:var(--surface); border:1px solid var(--border); color:var(--muted); border-radius:10px !important; }
.page-link:hover { background:var(--surface-2); color:var(--heading); }
.page-item.active .page-link { background:var(--gradient); border-color:transparent; color:var(--on-primary); }

/* ---------- Auth ---------- */
.auth-wrap { min-height:calc(100vh - 80px); display:grid; place-items:center; padding:60px 0; }
.auth-card {
    width:100%;
    max-width:440px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2.4rem;
    box-shadow:var(--shadow);
    font-size: 1rem;
}
.auth-card h1,
.auth-card .section-title {
    font-size: 1.85rem;
    margin-bottom: 0.75rem;
}
.auth-card .auth-lead {
    font-size: 1.05rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}
.auth-card .form-label {
    font-size: 0.98rem;
    font-weight: 600;
}
.auth-card .form-control {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}
.auth-card .btn {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
}
.auth-card a {
    font-size: 0.98rem;
}

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state i { font-size:2.5rem; color:var(--muted-2); margin-bottom:1rem; }

/* ---------- Responsive ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .navbar .nav-link {
        font-size: 1.18rem;
        padding: .25rem .65rem !important;
    }
    :root {
        --brand-slot-width: 340px;
        --brand-slot-height: 92px;
    }
}
@media (min-width: 992px) {
    .site-header .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }
    .site-header .navbar-expand-lg .navbar-nav {
        flex-wrap: nowrap;
        align-items: center;
    }
    .site-header .navbar-nav .nav-item {
        flex-shrink: 0;
    }
}
@media (max-width: 991.98px) {
    .site-header .navbar > .container {
        flex-wrap: wrap;
    }
    .site-header .navbar-collapse {
        background: var(--header-bg-scrolled);
        border: 1px solid var(--header-border);
        border-radius: var(--radius-sm);
        padding: 1rem;
        margin-top: 1rem;
    }
    .navbar-collapse { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; margin-top:1rem; }
    .navbar-nav { flex-wrap: wrap; }
    .site-header .navbar .nav-link {
        font-size: 1.12rem;
        padding: .6rem .8rem !important;
        white-space: normal;
    }
    .section { padding:80px 0; }
    .hero { padding:70px 0 50px; }
    .hero-visual { margin-top:2.5rem; min-height:280px; }
}
@media (max-width: 575.98px) {
    .section { padding:60px 0; }
    :root { --navbar-height: 90px; --brand-slot-width: 300px; --brand-slot-height: 86px; }
    .feature-card, .pub-card, .journal-panel, .contact-card { padding:1.4rem; }
    .stat-value { font-size:2.1rem; }
    .back-to-top { right:16px; bottom:16px; }
}

/* --- Professional development / certificates --- */
.training-course-banner {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font-weight: 600;
}
.training-course-banner i { font-size: 1.2rem; }
.training-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: all .3s ease;
}
.training-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    color: inherit;
}
.training-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(10,37,64,.08), rgba(201,162,39,.12));
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
}
.training-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: .35rem;
}
.training-card-meta,
.training-card-dates {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}
.training-card-action {
    margin-top: auto;
    color: var(--accent);
    font-weight: 600;
    font-size: .92rem;
}
.training-detail-section { padding-top: 0; }
.training-detail-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.training-certificate-wrap {
    max-width: 980px;
    margin: 0 auto;
}
.training-certificate {
    background: #fff;
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow);
}
.training-certificate-border {
    padding: 14px;
    border: 2px solid #0a2540;
    border-radius: calc(var(--radius) + 2px);
}
.training-certificate-inner {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2rem;
    border: 1px solid #c9a227;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(201,162,39,.08), transparent 42%),
        linear-gradient(180deg, #fff, #fafbfd);
}
.training-certificate-inner::before {
    content: attr(data-watermark);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 800;
    color: rgba(10,37,64,.04);
    transform: rotate(-18deg);
    pointer-events: none;
}
.training-certificate-logo img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin-bottom: .75rem;
}
.training-certificate-org {
    margin: 0 0 .5rem;
    color: #475569;
    font-size: .95rem;
}
.training-certificate-heading {
    margin: 0 0 .35rem;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: .08em;
    color: #0a2540;
}
.training-certificate-course {
    margin: 0 0 1.5rem;
    font-weight: 700;
    color: #0a2540;
    font-size: 1.05rem;
}
.training-certificate-intro p {
    margin: 0 auto 1.25rem;
    max-width: 760px;
    line-height: 1.7;
    color: #1e293b;
}
.training-certificate-label {
    margin: 0 0 .35rem;
    color: #64748b;
    font-size: .95rem;
}
.training-certificate-name {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #0a2540;
}
.training-certificate-researcher {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #0a2540;
    font-style: italic;
    padding: 0.75rem 1rem;
    background: rgba(10, 37, 64, 0.05);
    border-left: 3px solid #0a2540;
    border-radius: 4px;
}
.training-certificate-researcher em {
    font-weight: 600;
    font-style: normal;
}
.training-certificate-period,
.training-certificate-hours {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    color: #1e293b;
}
.training-certificate-hours {
    font-weight: 700;
    margin-bottom: 1rem;
}
.training-certificate-issue {
    margin: 0 0 1.25rem;
    color: #64748b;
    font-size: .92rem;
}
.training-certificate-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: 1.5rem;
    text-align: left;
}
.training-certificate-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.training-certificate-qr {
    padding: 8px;
    background: #fff;
    border: 2px solid #0a2540;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1);
}
.training-certificate-qr .qr-code-image {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 6px;
}
.training-certificate-qr-info {
    text-align: center;
    margin-top: 0.25rem;
}
.qr-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a2540;
}
.qr-url {
    margin: 0.25rem 0 0;
    font-size: 0.7rem;
    color: #64748b;
    word-break: break-all;
}
.training-certificate-qr img {
    width: 110px;
    height: 110px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.training-certificate-qr span {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    color: #64748b;
}
.training-certificate-signature {
    margin-left: auto;
    text-align: right;
}
.training-certificate-signature strong {
    display: block;
    color: #0a2540;
}
.training-certificate-signature span {
    display: block;
    margin-top: .25rem;
    color: #64748b;
    font-size: .9rem;
}
.training-certificate-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    color: #64748b;
    font-size: .85rem;
}
@media (max-width: 767.98px) {
    .training-certificate-inner { padding: 1.5rem 1rem; }
    .training-certificate-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .training-certificate-signature {
        margin-left: 0;
        text-align: center;
    }
}

/* --- Researcher Certificates Section --- */
.certificate-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}
.certificate-card:hover {
    border-color: #0a2540;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.12);
    transform: translateY(-2px);
}
.certificate-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #0a2540;
    color: #fff;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.certificate-card h4 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: #0a2540;
    line-height: 1.4;
    padding-right: 3rem;
}
.certificate-info {
    flex-grow: 1;
    margin-bottom: 1rem;
}
.certificate-info p {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    color: #475569;
}
.certificate-info strong {
    color: #0a2540;
    font-weight: 600;
}
.certificate-dates {
    color: #0a2540 !important;
    font-weight: 500;
    margin-top: 0.75rem !important;
}