/* ============================================================
   MAIN.CSS — Global Styles, Typography, Layout
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
  overflow-x: hidden;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}
h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p { color: var(--text-secondary); margin-bottom: 1rem; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent); }

.text-accent  { color: var(--color-accent) !important; }
.text-gold    { color: var(--color-gold)   !important; }
.text-muted   { color: var(--text-muted)   !important; }
.text-primary-c { color: var(--color-primary) !important; }

/* ── Section Layout ──────────────────────────────────────── */
section { padding: 72px 0; }

.section-alt { background-color: var(--bg-section-alt); }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(0,180,216,0.12);
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 0.75rem;
}
.section-header h2 { margin-bottom: 1rem; }
.section-header p  { max-width: 600px; margin: 0 auto; }

.divider-line {
  width: 60px;
  height: 4px;
  background: var(--gradient-card);
  border-radius: 2px;
  margin: 1rem auto 0;
}

/* ── Preloader ───────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.hide { opacity: 0; visibility: hidden; }

.preloader-logo {
  width: 90px;
  margin-bottom: 2rem;
  animation: pulseLogo 1.5s ease-in-out infinite;
}
.preloader-ring {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* ── Navbar ──────────────────────────────────────────────── */
#mainNav {
  position: fixed;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 0;
  background: transparent;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
#mainNav.scrolled {
  background: var(--bg-navbar);
  padding: 0.6rem 0;
  box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#mainNav .navbar-brand img { height: 48px; width: auto; max-width: 180px; object-fit: contain; transition: height 0.3s; }
#mainNav.scrolled .navbar-brand img { height: 40px; }

.nav-link-custom {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-primary) !important;
  padding: 0.5rem 0.9rem !important;
  position: relative;
  transition: color 0.2s;
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width 0.3s, left 0.3s;
  border-radius: 1px;
}
.nav-link-custom:hover { color: var(--color-accent) !important; }
.nav-link-custom:hover::after { width: 80%; left: 10%; }
.nav-link-custom.active { color: var(--color-accent) !important; }

/* Navbar on transparent (hero) — white links */
#mainNav:not(.scrolled) .nav-link-custom,
#mainNav:not(.scrolled) .navbar-brand,
#mainNav:not(.scrolled) .btn-icon-ctrl { filter: brightness(10); }

/* Dropdown — hover open on desktop */
@media (min-width: 992px) {
  .nav-item.dropdown:hover > .dropdown-menu-custom {
    display: block;
    animation: menuSlideDown 0.18s ease;
  }
}
/* Hide Bootstrap's default caret on nav links */
.nav-link-custom.dropdown-toggle::after { display: none !important; }

.dropdown-menu-custom {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(1,61,140,0.15);
  padding: 0.5rem;
  min-width: 220px;
  margin-top: 0.25rem;
}
.dropdown-item-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.2s, color 0.2s;
}
.dropdown-item-custom:hover {
  background: var(--bg-overlay);
  color: var(--color-primary);
}
.dropdown-item-custom i { width: 18px; color: var(--color-accent); }

/* Navbar Controls */
.navbar-controls { display: flex; align-items: center; gap: 0.4rem; }

/* Generic icon control button (lang, a11y, theme, hamburger) */
.btn-icon-ctrl {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 0.6rem;
  background: transparent;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-icon-ctrl:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--bg-overlay); }
.btn-icon-ctrl.active { border-color: var(--color-primary); color: var(--color-primary); }

/* Small dropdown chevron inside control buttons */
.nav-caret { font-size: 0.6rem; opacity: 0.55; transition: transform 0.2s; }
.btn-icon-ctrl[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Keep old btn-theme-toggle as alias */
.btn-theme-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1.5px solid var(--border-color); border-radius: 8px;
  color: var(--text-primary); font-size: 1rem; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s; }
.btn-theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Lang + a11y compact dropdown menus */
.nav-ctrl-menu {
  min-width: 150px; padding: 0.4rem;
  border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card-hover);
}
.nav-ctrl-menu .dropdown-item-custom { font-size: 0.8rem; padding: 0.45rem 0.7rem; gap: 0.5rem; }
.nav-ctrl-menu .lang-btn {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; background: transparent; border: none;
  padding: 0.45rem 0.7rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.nav-ctrl-menu .lang-btn:hover, .nav-ctrl-menu .lang-btn.active {
  background: var(--bg-overlay); color: var(--color-primary);
}
.nav-ctrl-menu .lang-btn img { border-radius: 2px; }

/* Lang flag + code shown on toggle button */
.lang-flag-cur { border-radius: 2px; }
.lang-code-cur { font-size: 0.75rem; font-weight: 700; }

/* Settings menu (combined a11y + theme) */
.settings-menu { min-width: 220px; }
.settings-section { padding: 0.65rem 0.85rem; }
.settings-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 0.55rem; display: block;
}
.fs-btn-row { display: flex; gap: 5px; }
.btn-fs {
  flex: 1; background: transparent; border: 1.5px solid var(--border-color);
  border-radius: 7px; padding: 0.35rem 0.1rem;
  font-weight: 700; color: var(--text-muted); cursor: pointer; text-align: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  line-height: 1.3;
}
.btn-fs:nth-child(1) { font-size: 0.7rem; }
.btn-fs:nth-child(2) { font-size: 0.85rem; }
.btn-fs:nth-child(3) { font-size: 1rem; }
.btn-fs:hover, .btn-fs.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--bg-overlay); }

/* Theme toggle row inside settings */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.theme-switch {
  position: relative;
  width: 42px; height: 24px;
  background: var(--border-color);
  border-radius: 12px;
  transition: background 0.3s;
  flex-shrink: 0;
}
.theme-switch::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform 0.3s, background 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .theme-switch {
  background: var(--color-primary);
}
[data-theme="dark"] .theme-switch::after {
  transform: translateX(18px);
}
.theme-toggle-row .t-label {
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 0.5rem;
}
.theme-toggle-row .t-label i { color: var(--color-accent); font-size: 0.95rem; }

/* ── Mobile Side Drawer ───────────────────────────────────── */
#mobileMenu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  background: var(--bg-card);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
#mobileMenu.open { transform: translateX(0); }

#mobileBackdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1099;
  opacity: 0; visibility: hidden;
  transition: opacity 0.38s ease, visibility 0.38s ease;
  backdrop-filter: blur(3px);
}
#mobileBackdrop.open { opacity: 1; visibility: visible; }

.mobile-menu-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.mobile-menu-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-overlay); border: none; border-radius: 8px;
  font-size: 1rem; color: var(--text-primary); cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mobile-menu-close:hover { background: var(--color-accent); color: #fff; }

.mobile-menu-body { flex: 1; overflow-y: auto; padding: 0.75rem 1.4rem; }

.mobile-menu-foot {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem;
}
.mobile-lang-row { display: flex; gap: 6px; }
.mobile-lang-row .lang-btn {
  display: flex; align-items: center; gap: 4px;
  flex: 1; justify-content: center;
  background: transparent; border: 1.5px solid var(--border-color); border-radius: 6px;
  padding: 0.3rem 0.2rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.mobile-lang-row .lang-btn:hover, .mobile-lang-row .lang-btn.active {
  border-color: var(--color-primary); color: var(--color-primary); background: var(--bg-overlay);
}

.mobile-nav-link {
  display: flex; align-items: center; width: 100%;
  padding: 0.8rem 0;
  font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary);
  border: none; border-bottom: 1px solid var(--border-color);
  background: transparent; text-align: left; text-decoration: none;
  transition: color 0.2s; cursor: pointer;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--color-accent); }
.mobile-nav-link i.ms-auto { margin-left: auto !important; transition: transform 0.25s; opacity: 0.5; }
.mobile-nav-toggle[aria-expanded="true"] i.ms-auto { transform: rotate(180deg); }

.mobile-nav-group { border-bottom: 1px solid var(--border-color); }
.mobile-nav-group .mobile-nav-link { border-bottom: none; }

.mobile-nav-sub { display: none; padding: 0.2rem 0 0.6rem 0.9rem; }
.mobile-nav-sub.open { display: block; }
.mobile-nav-sub a {
  display: block; padding: 0.35rem 0; font-size: 0.855rem;
  color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.mobile-nav-sub a:hover { color: var(--color-primary); }

/* ── Hero Section ────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #050C1C;
  background-image:
    radial-gradient(ellipse at 15% 60%, rgba(1,61,140,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(0,180,216,0.15) 0%, transparent 45%);
}

/* Video/Image background support */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-bg video,
.hero-video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.48) saturate(1.3) contrast(1.08);
  display: block;
}

/* Dot grid texture overlay */
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

#particles-js {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Directional brand gradient — left (text) dark, right (video) visible */
    linear-gradient(105deg,
      rgba(5,12,28,0.95)  0%,
      rgba(1,61,140,0.80) 20%,
      rgba(1,61,140,0.45) 50%,
      rgba(1,61,140,0.10) 75%,
      transparent         100%),
    /* Bottom vignette — smooth transition to stats strip */
    linear-gradient(to top,
      rgba(5,12,28,0.90) 0%,
      rgba(5,12,28,0.30) 18%,
      transparent        40%),
    /* Top vignette — keeps navbar readable */
    linear-gradient(to bottom,
      rgba(5,12,28,0.50) 0%,
      transparent        12%);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
}

/* Hero row */
.hero-row {
  min-height: 100vh;
  padding: 150px 0 80px;
  align-items: center;
}

/* Hero visual (floating stat cards) */
.hero-visual {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-emblem {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(1,61,140,0.25);
  border: 1.5px solid rgba(0,180,216,0.35);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 0 60px rgba(0,180,216,0.2);
  animation: floatY 6s ease-in-out infinite;
}
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,180,216,0.15);
  pointer-events: none;
  animation: expandRing 4s ease-out infinite;
}
.hero-ring-1 { width: 220px; height: 220px; animation-delay: 0s; }
.hero-ring-2 { width: 340px; height: 340px; animation-delay: 1s; }
.hero-ring-3 { width: 460px; height: 460px; animation-delay: 2s; }

.hero-stat-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(13,27,46,0.75);
  border: 1px solid rgba(0,180,216,0.25);
  border-radius: 16px;
  padding: 0.85rem 1.2rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  min-width: 155px;
}
.hero-stat-pill i {
  font-size: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.hero-stat-pill .n {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hero-stat-pill .l {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin-top: 2px;
}
.hero-stat-1 { top: 10%;  left: 0;   animation: floatY  7s ease-in-out infinite; }
.hero-stat-2 { top: 42%;  right: 0;  animation: floatY  9s ease-in-out infinite reverse; }
.hero-stat-3 { bottom: 8%; left: 8%; animation: floatY 11s ease-in-out infinite; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,180,216,0.15);
  border: 1px solid rgba(0,180,216,0.35);
  color: var(--color-accent);
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.5rem;
}
.hero-title span { color: var(--color-accent); }
.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.75);
  max-width: 580px;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounceScroll 2s ease infinite;
}
.hero-scroll-indicator i { font-size: 1.2rem; }

/* ── Stats Strip ─────────────────────────────────────────── */
.stats-strip {
  background: var(--gradient-card);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.stats-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.stat-item { text-align: center; padding: 1rem; }
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  display: block;
}
.stat-suffix { color: var(--color-gold); }
.stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  margin-top: 0.5rem;
  display: block;
}
.stat-divider {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto;
}

/* ── Page Hero (inner pages) ─────────────────────────────── */
.page-hero {
  background: var(--gradient-card);
  padding: 140px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero h1 { color: #fff; margin-bottom: 0.5rem; }
.breadcrumb-custom { background: none; padding: 0; margin: 0; }
.breadcrumb-custom .breadcrumb-item { color: rgba(255,255,255,0.65); font-size: 0.875rem; }
.breadcrumb-custom .breadcrumb-item a { color: rgba(255,255,255,0.65); }
.breadcrumb-custom .breadcrumb-item a:hover { color: #fff; }
.breadcrumb-custom .breadcrumb-item.active { color: #fff; }
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }

/* ── Back to Top ─────────────────────────────────────────── */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 46px; height: 46px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  box-shadow: 0 4px 16px rgba(1,61,140,0.3);
}
#backToTop.visible { opacity: 1; transform: translateY(0); }
#backToTop:hover { background: var(--color-accent); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--bg-footer);
  color: rgba(255,255,255,0.65);
  padding-top: 0;
}
.footer-wave {
  display: block;
  width: 100%;
  height: 70px;
}
.footer-body { padding: 60px 0 40px; }
.footer-brand img { height: 52px; margin-bottom: 1rem; filter: brightness(10); }
.footer-desc { font-size: 0.875rem; max-width: 300px; color: rgba(255,255,255,0.55); }
.footer-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.2rem;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  transition: color 0.2s, padding-left 0.2s;
}
.footer-links a:hover { color: var(--color-accent); padding-left: 4px; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
}
.footer-contact-item i { color: var(--color-accent); margin-top: 3px; flex-shrink: 0; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.social-icon {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.social-icon:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(0,180,216,0.1);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.2rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ── Map iframe ──────────────────────────────────────────── */
.map-iframe {
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 12px;
  filter: grayscale(40%) opacity(0.8);
}

/* ── Utility ─────────────────────────────────────────────── */
.container-xl-custom { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }
.glow-primary { box-shadow: 0 0 30px rgba(1,61,140,0.25); }
.glow-accent  { box-shadow: 0 0 30px rgba(0,180,216,0.25); }
.rounded-xl   { border-radius: 16px !important; }
.rounded-2xl  { border-radius: 24px !important; }

/* Responsive */
@media (max-width: 991.98px) {
  section { padding: 56px 0; }
  .desktop-only { display: none !important; }
  #mainNav:not(.scrolled) .nav-link-custom,
  #mainNav:not(.scrolled) .navbar-brand { filter: none; }
  #mainNav { background: var(--bg-navbar); top: 0; }
  .hero-row { padding: 88px 0 54px; }
  .hero-visual { height: 280px; }
}
@media (max-width: 767.98px) {
  section { padding: 44px 0; }
  .stats-strip { padding: 36px 0; }
  .stat-divider { display: none; }
  .hero-row { padding: 80px 0 48px; }
  .utility-bar { display: none; }
}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 30px;
  background: rgba(3,7,18,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  z-index: 1001;
  backdrop-filter: blur(10px);
}
.utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.utility-bar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.utility-official-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.utility-official-tag i { font-size: 0.68rem; }
.utility-bar-sep { color: rgba(255,255,255,0.15); font-size: 0.7rem; }
.utility-ministry-link {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.67rem;
  font-weight: 500;
  transition: color 0.2s;
}
.utility-ministry-link:hover { color: rgba(255,255,255,0.85); }
.utility-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.utility-doc-link {
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  font-size: 0.67rem;
  font-weight: 500;
  padding: 0 0.25rem;
  transition: color 0.2s;
}
.utility-doc-link:hover { color: rgba(255,255,255,0.75); }

/* ============================================================
   NAVBAR — BRAND TEXT + APPLY CTA
   ============================================================ */
.navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.brand-tagline {
  font-size: 0.58rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
/* On transparent hero: brand text turns white via parent filter */
#mainNav:not(.scrolled) .brand-name,
#mainNav:not(.scrolled) .brand-tagline { color: #fff; }

.btn-apply-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-gold);
  color: #1a1a2e !important;
  border: none;
  border-radius: 6px;
  padding: 0.42rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  filter: none !important;
}
.btn-apply-nav:hover {
  background: var(--color-gold-dark);
  color: #1a1a2e !important;
  transform: translateY(-1px);
}

/* ============================================================
   HERO — NEW COMPONENTS
   ============================================================ */
.hero-title {
  letter-spacing: -0.02em;
}

/* Eyebrow label */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.4rem;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Pipeline strip */
.hero-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 28px 0 36px;
}
.hero-pipeline span {
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-pipeline i {
  color: rgba(255,255,255,0.2);
  font-size: 0.55rem;
}

/* Tertiary text link */
.hero-tertiary-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.hero-tertiary-link:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* Hero image frame */
.hero-image-frame {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.hero-image-frame img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(1.1);
}

/* Upcoming programs card */
.hero-upcoming-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(5,12,28,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 220px;
}
.upcoming-card-title {
  font-size: 0.67rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.upcoming-card-title i { color: var(--color-gold); font-size: 0.7rem; }
.upcoming-card-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.upcoming-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
.upc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.upc-dot--green { background: #22c55e; }
.upc-dot--gold  { background: var(--color-gold); }
.upc-dot--blue  { background: var(--color-accent); }

/* ============================================================
   INSTITUTIONAL REDESIGN v2 — Premium Official Platform
   ============================================================ */

/* ── Navbar: refined deep navy ─────────────────────────────── */
#mainNav {
  top: 30px !important;
  background: rgba(11,28,60,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(50,90,180,0.18) !important;
  padding: 0.82rem 0 !important;
}
#mainNav.scrolled {
  background: rgba(10,26,56,0.99) !important;
  box-shadow: 0 2px 28px rgba(0,0,0,0.45) !important;
  padding: 0.55rem 0 !important;
  border-bottom-color: rgba(50,90,180,0.22) !important;
}

/* Disable filter hacks — dark navbar handles text color directly */
#mainNav .nav-link-custom,
#mainNav .navbar-brand,
#mainNav .btn-icon-ctrl,
#mainNav:not(.scrolled) .nav-link-custom,
#mainNav:not(.scrolled) .navbar-brand,
#mainNav:not(.scrolled) .btn-icon-ctrl { filter: none !important; }

/* Nav links on dark blue navbar */
.nav-link-custom { color: rgba(210,225,255,0.80) !important; }
.nav-link-custom:hover { color: #ffffff !important; }
.nav-link-custom.active { color: #ffffff !important; font-weight: 700 !important; }
.nav-link-custom::after { background: rgba(120,170,255,0.65) !important; }

/* Brand identity — strong and clear */
.navbar-brand img { height: 46px !important; }
#mainNav.scrolled .navbar-brand img { height: 40px !important; }
.brand-name {
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
}
.brand-tagline {
  color: rgba(160,195,255,0.52) !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.12em !important;
}
#mainNav:not(.scrolled) .brand-name { color: #ffffff !important; }
#mainNav:not(.scrolled) .brand-tagline { color: rgba(160,195,255,0.50) !important; }

/* Navbar controls on blue-navy background */
.btn-icon-ctrl {
  color: rgba(210,228,255,0.76) !important;
  border: 1.5px solid rgba(80,130,220,0.22) !important;
  background: transparent !important;
}
.btn-icon-ctrl:hover {
  background: rgba(60,110,200,0.16) !important;
  color: #ffffff !important;
  border-color: rgba(100,155,240,0.40) !important;
}
.btn-icon-ctrl[aria-expanded="true"] {
  background: rgba(60,110,200,0.20) !important;
  border-color: rgba(100,155,240,0.45) !important;
  color: #fff !important;
}
.lang-code-cur { color: rgba(255,255,255,0.92) !important; }
.nav-caret { color: rgba(160,195,255,0.45) !important; }

/* Dropdown menus — white panels from dark navbar */
.dropdown-menu-custom,
.nav-ctrl-menu {
  background: #ffffff !important;
  border: 1px solid #E0E8F4 !important;
  box-shadow: 0 8px 32px rgba(8,24,48,0.18), 0 2px 8px rgba(0,0,0,0.06) !important;
  border-radius: 10px !important;
}
.dropdown-menu-custom { min-width: 260px !important; }
.dropdown-item-custom {
  color: #1A2B45 !important;
  white-space: nowrap !important;
  font-size: 0.855rem !important;
  padding: 0.6rem 1.1rem !important;
}
.dropdown-item-custom:hover {
  background: #F2F6FC !important;
  color: #0C2340 !important;
}
.dropdown-item-custom i { color: #1B7A8C !important; }
.nav-ctrl-menu { min-width: 160px !important; }
.nav-ctrl-menu .lang-btn { color: #1A2B45 !important; }
.nav-ctrl-menu .lang-btn:hover,
.nav-ctrl-menu .lang-btn.active {
  background: #F2F6FC !important;
  color: #0C2340 !important;
}
.settings-menu { min-width: 230px !important; }
.settings-label { color: #7B90B2 !important; }
.theme-toggle-row .t-label { color: #1A2B45 !important; }
.btn-fs { color: #7B90B2 !important; border-color: #DEE5EF !important; }
.btn-fs:hover, .btn-fs.active {
  color: #0C2340 !important;
  border-color: #0C2340 !important;
  background: #F2F6FC !important;
}
.dropdown-divider { border-color: #EEF1F6 !important; }
/* Reading mode item */
#readingModeBtn { color: #1A2B45 !important; }
#readingModeBtn:hover { background: #F2F6FC !important; }

/* ── Utility Bar: darker than navbar for clear visual layering ── */
.utility-bar {
  background: #030915 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.utility-ministry-link {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.67rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.utility-ministry-link:hover { color: rgba(255,255,255,0.90) !important; }
.utility-bar-sep { color: rgba(255,255,255,0.14) !important; font-size: 0.6rem !important; }
.utility-doc-link { color: rgba(255,255,255,0.44) !important; font-size: 0.67rem !important; }
.utility-doc-link:hover { color: rgba(255,255,255,0.80) !important; }
.utility-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.67rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.utility-contact-item:hover { color: rgba(255,255,255,0.78); }
.utility-contact-item i { font-size: 0.6rem; opacity: 0.65; }
.utility-bar-left { gap: 0.55rem !important; flex-wrap: nowrap; }

/* ── Hero Section: premium deep navy ───────────────────────── */
.hero-section {
  background: #060F22 !important;
  background-image:
    radial-gradient(ellipse at 18% 60%, rgba(18,72,175,0.58) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 22%, rgba(0,148,204,0.13) 0%, transparent 46%),
    radial-gradient(ellipse at 50% 90%, rgba(8,36,88,0.45) 0%, transparent 55%) !important;
  border-bottom: none !important;
  overflow: hidden !important;
  /* Remove section-level vertical centering so padding controls position */
  align-items: flex-start !important;
}
/* Subtle dot grid on hero */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.hero-video-bg { display: none !important; }
.hero-overlay  { display: none !important; }
.hero-scroll-indicator { display: none !important; }
.hero-content { position: relative; z-index: 2; width: 100%; }

.hero-row {
  /* Let natural content height drive the row — section min-height fills the rest */
  min-height: auto !important;
  padding: 116px 0 72px !important;
  align-items: center;
}

.hero-title {
  color: #ffffff !important;
  font-size: clamp(1.9rem, 3.7vw, 3.1rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 24px rgba(8,36,100,0.40) !important;
}

.hero-subtitle {
  color: rgba(210,225,255,0.76) !important;
  font-size: clamp(0.95rem, 1.45vw, 1.08rem) !important;
  max-width: 540px !important;
  line-height: 1.80 !important;
}

.hero-eyebrow {
  color: rgba(130,185,255,0.82) !important;
  font-size: 0.67rem !important;
  letter-spacing: 0.14em !important;
}
.eyebrow-dot { background: rgba(100,168,255,0.90) !important; }

/* Pipeline: numbered step pills */
.hero-pipeline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 5px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(60,110,220,0.20) !important;
  border-bottom: 1px solid rgba(60,110,220,0.20) !important;
  margin: 26px 0 32px !important;
}
.hero-pipeline .step-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(20,65,160,0.16);
  border: 1px solid rgba(80,140,230,0.22);
  border-radius: 5px;
  padding: 5px 12px 5px 6px;
  font-size: 0.67rem;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.hero-pipeline .step-pill:hover {
  background: rgba(30,80,180,0.24);
  border-color: rgba(100,160,240,0.35);
}
.hero-pipeline .step-num {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(40,100,210,0.38);
  color: rgba(255,255,255,0.92);
  font-size: 0.56rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}
.hero-pipeline > i {
  color: rgba(80,130,220,0.30) !important;
  font-size: 0.5rem !important;
}

/* Hero image frame: premium atmospheric */
.hero-image-frame {
  border-radius: 8px !important;
  border: 1px solid rgba(60,120,220,0.14) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,0.60), 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) !important;
  position: relative;
}
.hero-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(6,15,34,0.65) 100%);
  border-radius: 8px;
  pointer-events: none;
}
.hero-image-frame img {
  height: 440px !important;
  filter: brightness(0.82) saturate(1.08) contrast(1.04) !important;
}

/* Hero CTA buttons on dark background */
.hero-section .btn-primary-custom {
  background: rgba(18,72,180,0.85) !important;
  border-color: rgba(60,130,230,0.70) !important;
  box-shadow: 0 4px 18px rgba(10,50,160,0.35) !important;
}
.hero-section .btn-primary-custom:hover {
  background: rgba(28,90,200,0.95) !important;
  border-color: rgba(80,150,240,0.85) !important;
  box-shadow: 0 6px 24px rgba(10,50,160,0.50) !important;
}
.hero-section .btn-outline-primary-c {
  color: rgba(200,220,255,0.88) !important;
  border-color: rgba(80,130,220,0.35) !important;
  background: rgba(20,60,140,0.12) !important;
}
.hero-section .btn-outline-primary-c:hover {
  background: rgba(20,70,160,0.22) !important;
  color: #fff !important;
  border-color: rgba(100,160,240,0.55) !important;
  transform: translateY(-2px);
}

/* ── Section backgrounds — alternating institutional rhythm ──── */
/* dark hero → #F2F6FC pillars → white about → #F2F6FC programs
   → white directions → #F2F6FC timeline → white news
   → #F2F6FC partners → dark contact → dark footer            */
.section-pillars    { background: #F2F6FC !important; }
.section-about      { background: #ffffff; }
.section-programs   { background: #F2F6FC; }
.section-directions { background: #ffffff; }
.section-timeline   { background: #F2F6FC; }
.section-news       { background: #ffffff; }
.section-partners   { background: #F5F7FA; }
.section-contact-cta{ background: #0C2340; }

/* ── Pillar cards on light background ──────────────────────── */
.section-pillars .pillar-card {
  background: #ffffff;
  border: 1px solid #DDE6F0;
  border-top: 3px solid #0C2340;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(12,35,64,0.04), 0 4px 14px rgba(12,35,64,0.06);
  padding: 2rem 1.5rem;
  height: 100%;
  transition: box-shadow 0.25s, transform 0.25s;
}
.section-pillars .pillar-card:hover {
  box-shadow: 0 4px 8px rgba(12,35,64,0.07), 0 12px 28px rgba(12,35,64,0.10);
  transform: translateY(-3px);
}
.pillar-num {
  font-size: 2.8rem;
  font-weight: 800;
  color: #0C2340;
  opacity: 0.09;
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
  font-family: 'Montserrat', sans-serif;
}
.pillar-card h5 { font-size: 0.95rem; font-weight: 700; color: #1A2B45; margin-bottom: 0.45rem; }
.pillar-card p  { font-size: 0.82rem; color: #7B90B2; margin: 0; line-height: 1.65; }

/* ── Section header on light backgrounds ─────────────────────── */
.section-pillars .section-header h3,
.section-pillars .section-header h2 { color: #1A2B45; }
.section-pillars .section-header p  { color: #445A7A; }

/* ── Contact CTA section ────────────────────────────────────── */
.section-contact-cta { padding: 72px 0; }
.section-contact-cta .section-header .tag {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.65) !important;
}
.section-contact-cta h2 { color: #ffffff; }
.section-contact-cta p  { color: rgba(255,255,255,0.62); }
.section-contact-cta .btn-primary-custom {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.section-contact-cta .btn-primary-custom:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
.section-contact-cta .contact-info-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.section-contact-cta .contact-info-card h6 { color: rgba(255,255,255,0.90) !important; }
.section-contact-cta .contact-info-card p  { color: rgba(255,255,255,0.55) !important; }
.section-contact-cta .contact-info-icon {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.75) !important;
}
.section-contact-cta .link-animated { color: rgba(255,255,255,0.75) !important; }
.section-contact-cta .link-animated:hover { color: #fff !important; }

/* ── Contact Info Block ────────────────────────────────────── */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  height: 100%;
  box-shadow: var(--shadow-card);
}
.contact-info-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-info-card h6 { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.contact-info-card p  { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ── Back to top: refined ───────────────────────────────────── */
#backToTop {
  width: 36px  !important;
  height: 36px !important;
  font-size: 0.82rem !important;
  background: rgba(12,35,64,0.78) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(12,35,64,0.22) !important;
  bottom: 1.75rem !important;
  right: 1.75rem !important;
}
#backToTop:hover { background: #1C4F8C !important; }

/* ── Stats strip ───────────────────────────────────────────── */
.stats-strip { background: linear-gradient(135deg, #0C2340 0%, #1C4F8C 100%) !important; }

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] .hero-section {
  background: #04091A !important;
  background-image:
    radial-gradient(ellipse at 18% 60%, rgba(16,65,160,0.50) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 22%, rgba(0,140,196,0.11) 0%, transparent 46%),
    radial-gradient(ellipse at 50% 90%, rgba(6,28,72,0.48) 0%, transparent 55%) !important;
}
[data-theme="dark"] .section-pillars    { background: var(--bg-section-alt) !important; }
[data-theme="dark"] .section-about     { background: var(--bg-page); }
[data-theme="dark"] .section-programs  { background: var(--bg-section-alt); }
[data-theme="dark"] .section-directions{ background: var(--bg-page); }
[data-theme="dark"] .section-timeline  { background: var(--bg-section-alt); }
[data-theme="dark"] .section-news      { background: var(--bg-page); }
[data-theme="dark"] .section-partners  { background: var(--bg-section-alt); }
[data-theme="dark"] .section-pillars .pillar-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  border-top-color: var(--color-primary);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  #mainNav { top: 0 !important; padding: 0.72rem 0 !important; }
  #mainNav.scrolled { padding: 0.5rem 0 !important; }
  .hero-section { align-items: flex-start !important; }
  .hero-row { min-height: auto !important; padding: 88px 0 54px !important; }
}
@media (max-width: 767.98px) {
  .hero-row { padding: 80px 0 48px !important; }
  .hero-image-frame img { height: 280px !important; }
}

/* ============================================================
   REDESIGN v3 — Premium Palette · Grain · Local Glow · Icons
   ============================================================ */

/* ── v3 Hero: new gradient background ─────────────────────── */
.hero-section {
  background: #08152E !important;
  background-image:
    radial-gradient(ellipse at 5%  0%,  rgba(18,48,95,0.78)  0%, transparent 52%),
    radial-gradient(ellipse at 85% 12%, rgba(11,30,68,0.60)  0%, transparent 50%),
    radial-gradient(ellipse at 38% 72%, rgba(103,211,255,0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 72% 55%, rgba(18,48,95,0.28)  0%, transparent 42%),
    linear-gradient(135deg, #08152E 0%, #0B1E44 60%, #12305F 100%) !important;
}

/* Grain texture on hero (::after — sits above dot grid) */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.055;
}
/* Ensure hero content stays above grain */
.hero-content { z-index: 3 !important; }

/* ── v3 Navbar: grain + glow border ──────────────────────── */
#mainNav {
  background: rgba(8,21,46,0.88) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(103,211,255,0.12) !important;
  overflow: visible;
}
#mainNav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.045;
}
/* Navbar bottom glow line */
#mainNav::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103,211,255,0.40), rgba(56,127,187,0.30), transparent);
  pointer-events: none;
  z-index: 10;
}
#mainNav.scrolled {
  background: rgba(5,13,28,0.96) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  box-shadow: 0 2px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(103,211,255,0.12) !important;
}

/* ── Utility bar: v3 ─────────────────────────────────────── */
.utility-bar {
  background: #030D1C !important;
  border-bottom: 1px solid rgba(103,211,255,0.08) !important;
}

/* ── v3 Text colors on dark backgrounds ──────────────────── */
.nav-link-custom { color: rgba(245,249,255,0.78) !important; }
.nav-link-custom:hover { color: #F5F9FF !important; }
.nav-link-custom.active { color: #F5F9FF !important; }
.nav-link-custom::after { background: rgba(103,211,255,0.70) !important; }
.brand-name { color: #F5F9FF !important; }
.brand-tagline { color: rgba(183,196,217,0.55) !important; }
.lang-code-cur { color: #F5F9FF !important; }

.utility-ministry-link { color: rgba(183,196,217,0.60) !important; }
.utility-ministry-link:hover { color: #F5F9FF !important; }
.utility-contact-item { color: rgba(183,196,217,0.55) !important; }
.utility-contact-item:hover { color: rgba(245,249,255,0.85) !important; }
.utility-doc-link { color: rgba(183,196,217,0.48) !important; }
.utility-doc-link:hover { color: rgba(245,249,255,0.82) !important; }
.utility-bar-sep { color: rgba(103,211,255,0.16) !important; }

/* ── v3 Hero text colors ─────────────────────────────────── */
.hero-title {
  color: #F5F9FF !important;
  text-shadow: 0 2px 32px rgba(8,21,46,0.55) !important;
}
.hero-subtitle { color: rgba(183,196,217,0.80) !important; }
.hero-eyebrow { color: rgba(103,211,255,0.88) !important; }
.eyebrow-dot { background: #67D3FF !important; }

/* Step pills: v3 palette */
.hero-pipeline {
  border-top-color: rgba(56,127,187,0.24) !important;
  border-bottom-color: rgba(56,127,187,0.24) !important;
}
.hero-pipeline .step-pill {
  background: rgba(11,30,68,0.25) !important;
  border-color: rgba(103,211,255,0.26) !important;
  color: rgba(245,249,255,0.82) !important;
}
.hero-pipeline .step-pill:hover {
  background: rgba(11,30,68,0.40) !important;
  border-color: rgba(103,211,255,0.42) !important;
}
.hero-pipeline .step-num {
  background: rgba(56,127,187,0.40) !important;
  color: #F5F9FF !important;
}
.hero-pipeline > i { color: rgba(103,211,255,0.32) !important; }

/* Hero CTA: v3 */
.hero-section .btn-primary-custom {
  background: rgba(11,30,68,0.75) !important;
  border-color: rgba(103,211,255,0.55) !important;
  color: #F5F9FF !important;
  box-shadow: 0 4px 20px rgba(8,21,46,0.45), 0 0 0 1px rgba(103,211,255,0.12) !important;
}
.hero-section .btn-primary-custom:hover {
  background: rgba(27,90,150,0.85) !important;
  border-color: rgba(103,211,255,0.80) !important;
  box-shadow: 0 6px 28px rgba(8,21,46,0.55), 0 0 18px rgba(103,211,255,0.22) !important;
}
.hero-section .btn-outline-primary-c {
  color: rgba(183,196,217,0.88) !important;
  border-color: rgba(103,211,255,0.28) !important;
  background: rgba(11,30,68,0.12) !important;
}
.hero-section .btn-outline-primary-c:hover {
  background: rgba(11,30,68,0.28) !important;
  border-color: rgba(103,211,255,0.55) !important;
  color: #F5F9FF !important;
}

/* ── Footer: v3 deep navy + grain ───────────────────────── */
footer {
  background: #061224 !important;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8%  20%, rgba(11,30,68,0.55) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(18,48,95,0.35) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: auto, auto, 200px 200px;
  mix-blend-mode: normal;
  opacity: 1;
}
footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.05;
}
.footer-wave, .footer-body, .footer-bottom { position: relative; z-index: 1; }

/* Footer text: v3 */
.footer-desc { color: rgba(183,196,217,0.60) !important; }
.footer-title { color: rgba(183,196,217,0.38) !important; }
.footer-links a { color: rgba(183,196,217,0.62) !important; }
.footer-links a:hover { color: var(--c-accent-bright, #67D3FF) !important; }
.footer-contact-item { color: rgba(183,196,217,0.62) !important; }
.footer-contact-item i { color: #67D3FF !important; }
.footer-bottom { color: rgba(183,196,217,0.32) !important; border-top-color: rgba(56,127,187,0.14) !important; }
.social-icon { border-color: rgba(56,127,187,0.25) !important; color: rgba(183,196,217,0.62) !important; }
.social-icon:hover { border-color: #67D3FF !important; color: #67D3FF !important; background: rgba(103,211,255,0.10) !important; }

/* ── Contact CTA section: v3 ─────────────────────────────── */
.section-contact-cta {
  background: #061224 !important;
  position: relative;
  overflow: hidden;
}
.section-contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(11,30,68,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(18,48,95,0.40) 0%, transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: auto, auto, 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.80;
}
.section-contact-cta > .container { position: relative; z-index: 1; }
.section-contact-cta h2 { color: #F5F9FF !important; }
.section-contact-cta p  { color: rgba(183,196,217,0.68) !important; }
.section-contact-cta .tag { color: rgba(103,211,255,0.88) !important; background: rgba(56,127,187,0.15) !important; }
.section-contact-cta .contact-info-card {
  background: rgba(11,30,68,0.22) !important;
  border-color: rgba(56,127,187,0.20) !important;
}
.section-contact-cta .contact-info-card h6 { color: rgba(245,249,255,0.92) !important; }
.section-contact-cta .contact-info-card p  { color: rgba(183,196,217,0.62) !important; }
.section-contact-cta .contact-info-icon {
  background: rgba(56,127,187,0.22) !important;
  color: #67D3FF !important;
}

/* ── Direction icon containers: per-card gradient palette ─── */
.direction-card {
  border-color: rgba(11,30,68,0.10) !important;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s !important;
}
.direction-card:hover {
  border-color: rgba(103,211,255,0.30) !important;
  box-shadow: 0 8px 28px rgba(8,21,46,0.12), 0 0 0 1px rgba(103,211,255,0.14) !important;
}
.direction-icon {
  width: 72px !important; height: 72px !important;
  border-radius: 18px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 1.1rem !important;
  position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
}
.direction-card:hover .direction-icon {
  transform: translateY(-2px);
}
.direction-card:nth-child(1) .direction-icon {
  background: linear-gradient(145deg, #0A1F3E 0%, #1A4E82 100%);
  border: 1px solid rgba(103,211,255,0.22);
  box-shadow: 0 8px 22px rgba(8,21,46,0.50), 0 0 0 1px rgba(103,211,255,0.10);
}
.direction-card:nth-child(2) .direction-icon {
  background: linear-gradient(145deg, #071328 0%, #0E3A6E 100%);
  border: 1px solid rgba(103,211,255,0.18);
  box-shadow: 0 8px 22px rgba(18,48,95,0.52), 0 0 0 1px rgba(103,211,255,0.09);
}
.direction-card:nth-child(3) .direction-icon {
  background: linear-gradient(145deg, #08152E 0%, #0B1E44 100%);
  border: 1px solid rgba(103,211,255,0.20);
  box-shadow: 0 8px 22px rgba(8,21,46,0.55), 0 0 0 1px rgba(103,211,255,0.09);
}
.direction-card:nth-child(4) .direction-icon {
  background: linear-gradient(145deg, #0B1E44 0%, #1A5A90 100%);
  border: 1px solid rgba(103,211,255,0.28);
  box-shadow: 0 8px 22px rgba(18,48,95,0.45), 0 0 0 1px rgba(103,211,255,0.13);
}
.direction-card:nth-child(5) .direction-icon {
  background: linear-gradient(145deg, #071328 0%, #12305F 100%);
  border: 1px solid rgba(103,211,255,0.18);
  box-shadow: 0 8px 22px rgba(18,48,95,0.50), 0 0 0 1px rgba(103,211,255,0.09);
}
.direction-card:nth-child(6) .direction-icon {
  background: linear-gradient(145deg, #08152E 0%, #14396A 100%);
  border: 1px solid rgba(103,211,255,0.20);
  box-shadow: 0 8px 22px rgba(8,21,46,0.52), 0 0 0 1px rgba(103,211,255,0.09);
}
.direction-icon svg { display: block; }
/* Legacy icon font fallback sizing */
.direction-icon > i:not(svg *) { font-size: 1.4rem !important; color: #67D3FF !important; }

/* ── Feature icon boxes: v3 gradient ────────────────────── */
.feature-icon-box .icon {
  background: linear-gradient(145deg, #0B1E44, #1A4E82) !important;
  border: 1px solid rgba(103,211,255,0.22) !important;
  box-shadow: 0 6px 18px rgba(11,30,68,0.40) !important;
  border-radius: 14px !important;
  width: 52px !important; height: 52px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  color: #67D3FF !important;
  font-size: 1.2rem !important;
}

/* ── Program card icon: v3 ──────────────────────────────── */
.program-card-icon {
  background: linear-gradient(135deg, #08152E 0%, #0B1E44 60%, #1A5A90 100%) !important;
  border: 1px solid rgba(103,211,255,0.20) !important;
  box-shadow: 0 6px 18px rgba(8,21,46,0.40) !important;
}

/* ── Timeline dots: v3 ──────────────────────────────────── */
.timeline-dot {
  background: linear-gradient(135deg, #0B1E44, #1A5A90) !important;
  border-color: rgba(103,211,255,0.35) !important;
  box-shadow: 0 0 0 4px rgba(56,127,187,0.12), 0 4px 14px rgba(11,30,68,0.40) !important;
  color: #67D3FF !important;
}

/* ── Section header .tag: v3 ────────────────────────────── */
.section-header .tag {
  color: #1A5A90 !important;
  background: rgba(11,30,68,0.07) !important;
  border: 1px solid rgba(11,30,68,0.14) !important;
}

/* ── Pillar cards: v3 border top ───────────────────────── */
.section-pillars .pillar-card { border-top-color: #0B1E44 !important; }
.pillar-num { color: #0B1E44 !important; }
.pillar-card h5 { color: #1A2B45 !important; }

/* ── Stats strip: v3 ────────────────────────────────────── */
.stats-strip {
  background: linear-gradient(135deg, #08152E 0%, #0B1E44 50%, #12305F 100%) !important;
  position: relative;
  overflow: hidden;
}
.stats-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.045;
}

/* ── Section transitions SVG fill: v3 ──────────────────── */
/* Update transition divs colors if needed */

/* ── Back-to-top: v3 ────────────────────────────────────── */
#backToTop {
  background: rgba(11,30,68,0.85) !important;
  box-shadow: 0 2px 12px rgba(8,21,46,0.30) !important;
}
#backToTop:hover { background: #1A5A90 !important; }

/* ── Link animated: v3 ──────────────────────────────────── */
.link-animated { color: #1A5A90 !important; }
.link-animated:hover { color: #67D3FF !important; }

/* ── Section pillar/about/timeline on light bg: v3 ─────── */
.section-pillars .section-header p { color: #445A7A !important; }
.section-timeline { background: #F4F7FB !important; }

/* ── Responsive v3 ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  #mainNav::before, #mainNav::after { display: none; }
}
@media (max-width: 767.98px) {
  .direction-icon { width: 60px !important; height: 60px !important; border-radius: 14px !important; }
}

/* ============================================================
   INLINE STYLE REPLACEMENTS — moved from HTML attributes
   ============================================================ */

/* Utility bar: non-interactive time span */
.utility-contact-item--static { cursor: default; pointer-events: none; }

/* Desktop nav list gap */
.nav-desktop-list { gap: 0.1rem; }

/* Dropdown caret chevron icons */
.nav-dropdown-caret {
  font-size: 0.6rem;
  opacity: 0.6;
  vertical-align: middle;
  margin-left: 2px;
  transition: transform 0.2s;
}

/* Reading mode button (reset button styles within dropdown) */
#readingModeBtn {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
}

/* Mobile menu open button */
#mobileMenuOpen {
  display: flex !important;
  width: 36px;
  padding: 0;
  justify-content: center;
}

/* Hamburger icon size */
.mobile-menu-icon { font-size: 1.35rem; }

/* Mobile menu logo */
.mobile-menu-logo { height: 38px; object-fit: contain; }

/* Section transition wrappers */
.section-transition {
  line-height: 0;
  overflow: hidden;
}
.section-transition--hero  { background: #08152E; }
.section-transition--light { background: #F5F7FA; }

/* Transition SVG elements */
.transition-svg {
  display: block;
  width: 100%;
}
.transition-svg--sm { height: 36px; }
.transition-svg--md { height: 40px; }

/* About section image */
.about-section-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Partners section padding override */
.section-partners { padding: 60px 0; }

/* Footer logo */
.footer-logo {
  height: 52px;
  margin-bottom: 1rem;
  filter: brightness(10);
}

/* ============================================================
   v4 PREMIUM REFACTOR
   Unified topbar–navbar–hero · Video hero · Premium footer
   ============================================================ */

/* ── 1. HERO VIDEO + OVERLAY: enable and refine ─────────────── */
.hero-video-bg  { display: block !important; }
.hero-overlay   { display: block !important; }
.hero-grid-pattern { display: block !important; z-index: 1 !important; }

/* Neutral solid base — visual atmosphere comes entirely from
   the video + overlay layers, not a CSS background-image    */
.hero-section {
  background: #04091A !important;
  background-image: none !important;
}

/* Dot-grid pseudo sits above video, below overlay */
.hero-section::before {
  z-index: 1 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* Grain texture sits above content — low opacity, blend-mode safe */
.hero-section::after { z-index: 5 !important; opacity: 0.038 !important; }

/* Video layer: deep colour-grade, not completely black */
.hero-video-bg { z-index: 0 !important; }
.hero-video-bg video,
.hero-video-bg img {
  filter: brightness(0.34) saturate(1.20) contrast(1.06) !important;
}

/* Rich directional overlay on top of video */
.hero-overlay {
  z-index: 2 !important;
  background:
    /* Left reading zone */
    linear-gradient(112deg,
      rgba(4,9,26,0.82)    0%,
      rgba(6,14,40,0.68)   22%,
      rgba(8,20,56,0.40)   48%,
      rgba(6,14,40,0.12)   72%,
      transparent           100%),
    /* Top vignette */
    linear-gradient(to bottom,
      rgba(4,9,26,0.70)    0%,
      rgba(4,9,26,0.32)    9%,
      transparent           24%),
    /* Bottom vignette */
    linear-gradient(to top,
      rgba(4,9,26,0.82)    0%,
      rgba(4,9,26,0.36)    11%,
      transparent           30%),
    /* Atmospheric bloom */
    radial-gradient(ellipse at 28% 58%, rgba(8,36,118,0.32) 0%, transparent 56%),
    /* Cyan accent */
    radial-gradient(ellipse at 82% 18%, rgba(15,65,148,0.10) 0%, transparent 48%) !important;
}

/* Hero text and content above all layers */
.hero-content { z-index: 4 !important; }

/* ── 2. TOPBAR: legible, high-contrast, unified dark base ───── */
.utility-bar {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: background 0.35s ease, border-color 0.35s ease, opacity 0.30s ease, transform 0.30s ease !important;
}
.utility-bar.scrolled {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}

/* Phone / email / hours — clearly readable, uppercase */
.utility-contact-item {
  color: rgba(200,222,255,0.78) !important;
  font-size: 0.65rem !important;
  gap: 0.42rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.utility-contact-item:hover { color: rgba(240,250,255,0.97) !important; }
.utility-contact-item i {
  color: rgba(103,211,255,0.68) !important;
  font-size: 0.64rem !important;
  opacity: 1 !important;
}

/* Right-side document utility links */
.utility-doc-link {
  color: rgba(185,212,252,0.70) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.utility-doc-link:hover { color: rgba(240,250,255,0.96) !important; }

.utility-bar-sep { color: rgba(103,211,255,0.13) !important; }

/* ── 3. NAVBAR: transparent on load, solid on scroll ────────── */
#mainNav {
  background: rgba(10,22,55,0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-bottom: 1px solid rgba(80,130,220,0.08) !important;
  box-shadow: none !important;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, top 0.30s ease !important;
}

/* Glowing bottom edge on navbar — ties it into the hero */
#mainNav::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0; height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(80,160,230,0.20) 20%,
    rgba(103,211,255,0.40) 50%,
    rgba(80,160,230,0.20) 80%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  display: block !important;
}

/* Scrolled: medium navy — lighter, readable */
#mainNav.scrolled {
  top: 0 !important;
  background: rgba(10,24,62,0.96) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(80,140,230,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), 0 1px 0 rgba(80,160,255,0.10) !important;
}

/* Nav links: crisp on dark glass */
.nav-link-custom {
  color: rgba(215,232,255,0.80) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
}
/* Dropdown items */
.nav-dropdown-menu .dropdown-item {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
.nav-link-custom:hover,
.nav-link-custom.active { color: #FFFFFF !important; }
.nav-link-custom::after {
  background: rgba(103,211,255,0.62) !important;
  height: 1.5px !important;
  bottom: 2px !important;
}

/* Brand identity */
.brand-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.93rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.brand-tagline,
#mainNav:not(.scrolled) .brand-tagline,
#mainNav.scrolled .brand-tagline {
  color: rgba(220,235,255,0.95) !important;
  font-size: 0.565rem !important;
  letter-spacing: 0.10em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Navbar controls row — all items centered on one line */
.navbar-controls {
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
}

/* Icon controls — flat, no border, consistent height */
.btn-icon-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 34px !important;
  padding: 0 0.40rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: rgba(210,230,255,0.80) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s, color 0.2s !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.btn-icon-ctrl:hover {
  background: rgba(255,255,255,0.09) !important;
  border: none !important;
  color: #FFFFFF !important;
}
.btn-icon-ctrl[aria-expanded="true"] {
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  color: #FFFFFF !important;
}

/* Ensure flag image doesn't push height */
.lang-toggle-btn .lang-flag-cur {
  display: block !important;
  flex-shrink: 0 !important;
  border-radius: 2px !important;
  object-fit: cover !important;
  width: 18px !important;
  height: 13px !important;
  margin: 0 !important;
}
.lang-toggle-btn .lang-code-cur {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  color: rgba(215,232,255,0.90) !important;
}
.nav-caret {
  font-size: 0.55rem !important;
  opacity: 0.60 !important;
  line-height: 1 !important;
  transition: transform 0.2s !important;
}
.btn-icon-ctrl[aria-expanded="true"] .nav-caret { transform: rotate(180deg) !important; }

/* ── 4. FOOTER: deep navy — clean, readable, premium ─────────── */
footer { background: #040D1E !important; }

/* Replace muddy multi-layer grain with clean radial glows only */
footer::before {
  background:
    radial-gradient(ellipse at 6%  12%, rgba(8,28,82,0.55)  0%, transparent 48%),
    radial-gradient(ellipse at 92% 88%, rgba(12,38,98,0.38)  0%, transparent 44%) !important;
  background-size: auto !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
footer::after { opacity: 0.030 !important; }

/* Footer column headings — clearly separated, readable */
.footer-title {
  color: rgba(155,196,248,0.78) !important;
  font-size: 0.695rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 1.35rem !important;
  padding-bottom: 0.65rem !important;
  border-bottom: 1px solid rgba(103,211,255,0.09) !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* Description / body text */
.footer-desc {
  color: rgba(172,207,252,0.66) !important;
  font-size: 0.875rem !important;
  line-height: 1.72 !important;
  max-width: 285px !important;
}

/* Footer navigation links with animated dash */
.footer-links a {
  color: rgba(172,207,252,0.70) !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  transition: color 0.2s !important;
  padding-left: 0 !important;
}
.footer-links a:hover { color: rgba(212,238,255,0.96) !important; padding-left: 5px !important; }
.footer-links li { margin-bottom: 0.62rem !important; }

/* Footer contact info */
.footer-contact-item {
  color: rgba(172,207,252,0.70) !important;
  font-size: 0.875rem !important;
  gap: 0.80rem !important;
  margin-bottom: 0.90rem !important;
  align-items: flex-start !important;
  line-height: 1.55 !important;
}
.footer-contact-item i {
  color: #67D3FF !important;
  margin-top: 2px !important;
  font-size: 0.88rem !important;
  flex-shrink: 0 !important;
}

/* Social icons */
.social-icon {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(103,211,255,0.16) !important;
  border-radius: 8px !important;
  background: rgba(8,26,74,0.28) !important;
  color: rgba(172,207,252,0.66) !important;
  font-size: 0.90rem !important;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s !important;
}
.social-icon:hover {
  background: rgba(103,211,255,0.10) !important;
  border-color: rgba(103,211,255,0.44) !important;
  color: rgba(212,238,255,0.96) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28) !important;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(103,211,255,0.07) !important;
  padding: 1.35rem 0 !important;
}
.footer-bottom span {
  color: rgba(138,180,232,0.42) !important;
  font-size: 0.795rem !important;
}

/* Footer logo */
.footer-logo {
  height: 50px !important;
  filter: brightness(8) opacity(0.92) !important;
  margin-bottom: 1.15rem !important;
}

/* ── 5. CONTACT CTA: premium dark — visually rich, readable ──── */
.section-contact-cta {
  background: linear-gradient(175deg, #061525 0%, #040F1C 100%) !important;
  padding: 80px 0 !important;
  border-top: 1px solid rgba(103,211,255,0.06) !important;
}
.section-contact-cta::before {
  background:
    radial-gradient(ellipse at 8%  55%, rgba(10,35,96,0.66)  0%, transparent 52%),
    radial-gradient(ellipse at 88% 28%, rgba(14,50,112,0.44)  0%, transparent 48%) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Contact info cards — glassmorphism on deep navy */
.section-contact-cta .contact-info-card {
  background: rgba(8,22,62,0.34) !important;
  border: 1px solid rgba(103,211,255,0.11) !important;
  border-radius: 8px !important;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.section-contact-cta .contact-info-card:hover {
  background: rgba(10,28,74,0.50) !important;
  border-color: rgba(103,211,255,0.25) !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.24) !important;
}
.section-contact-cta .contact-info-card h6 {
  color: rgba(235,246,255,0.95) !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  margin-bottom: 0.28rem !important;
}
.section-contact-cta .contact-info-card p {
  color: rgba(175,212,252,0.72) !important;
  font-size: 0.855rem !important;
  line-height: 1.55 !important;
}
.section-contact-cta .contact-info-icon {
  width: 42px !important;
  height: 42px !important;
  background: rgba(56,127,187,0.22) !important;
  border: 1px solid rgba(103,211,255,0.20) !important;
  border-radius: 8px !important;
  color: #67D3FF !important;
  font-size: 1rem !important;
}

/* Section text on dark */
.section-contact-cta h2 {
  color: #F0F7FF !important;
  text-shadow: 0 2px 24px rgba(4,9,26,0.55) !important;
}
.section-contact-cta p {
  color: rgba(175,212,252,0.72) !important;
}
.section-contact-cta .tag {
  color: rgba(103,211,255,0.90) !important;
  background: rgba(56,127,187,0.14) !important;
  border: 1px solid rgba(103,211,255,0.16) !important;
}

/* CTA button */
.section-contact-cta .btn-primary-custom {
  background: rgba(8,24,66,0.52) !important;
  border: 1.5px solid rgba(103,211,255,0.36) !important;
  color: rgba(210,236,255,0.92) !important;
  letter-spacing: 0.03em !important;
}
.section-contact-cta .btn-primary-custom:hover {
  background: rgba(14,42,112,0.72) !important;
  border-color: rgba(103,211,255,0.64) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 22px rgba(103,211,255,0.14) !important;
}

/* ── LANGUAGE SWITCHER ──────────────────────────────────────── */

/* Desktop dropdown */
.lang-menu { min-width: 148px !important; }
.lang-menu .lang-btn {
  position: relative !important;
  padding-right: 2.2rem !important;
}
/* Active language — dot indicator */
.lang-menu .lang-btn.active::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: #0C2340;
  border-radius: 50%;
}

/* lang-toggle-btn flag + code — see v4 btn-icon-ctrl overrides below */

/* Mobile lang row */
.mobile-lang-row .lang-btn img { border-radius: 2px; flex-shrink: 0; }

/* ── SETTINGS PANEL — Premium redesign ─────────────────────── */

/* Dropdown container */
.settings-panel {
  min-width: 256px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(210,226,248,0.90) !important;
  box-shadow:
    0 4px 8px  rgba(8,24,60,0.05),
    0 14px 36px rgba(8,24,60,0.13),
    0 48px 88px rgba(8,24,60,0.08) !important;
  overflow: hidden !important;
  /* Subtle entrance animation */
  animation: settingsFadeIn 0.18s ease !important;
}
@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* Panel header strip */
.settings-panel-hd {
  display: flex !important;
  align-items: center !important;
  gap: 0.50rem !important;
  padding: 0.82rem 1.10rem 0.74rem !important;
  background: linear-gradient(135deg, #F7FAFD 0%, #EFF5FC 100%) !important;
  border-bottom: 1px solid #EAF0F9 !important;
}
.settings-panel-hd > i {
  font-size: 0.82rem !important;
  color: #7B96BF !important;
}
.settings-panel-hd > span {
  font-size: 0.635rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #8BA0C2 !important;
}

/* Section body padding */
.settings-section { padding: 0.88rem 1.10rem !important; }

/* Section labels */
.settings-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #A0B5D2 !important;
  margin-bottom: 0.72rem !important;
}
.settings-label i { font-size: 0.70rem !important; color: #8BA0C2 !important; }

/* Font-size pill group */
.fs-btn-row {
  display: flex !important;
  gap: 0 !important;
  background: #EDF3FB !important;
  border: 1px solid #D8E7F4 !important;
  border-radius: 9px !important;
  padding: 3px !important;
}
.btn-fs {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0.44rem 0.1rem !important;
  font-weight: 700 !important;
  color: #98B0CC !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s !important;
  line-height: 1.3 !important;
}
.btn-fs:nth-child(1) { font-size: 0.70rem !important; }
.btn-fs:nth-child(2) { font-size: 0.88rem !important; }
.btn-fs:nth-child(3) { font-size: 1.02rem !important; }
.btn-fs:hover { background: rgba(255,255,255,0.72) !important; color: #1A2B45 !important; }
.btn-fs.active {
  background: #ffffff !important;
  color: #0B1E44 !important;
  box-shadow: 0 1px 3px rgba(8,24,60,0.11), 0 2px 8px rgba(8,24,60,0.07) !important;
}

/* Theme toggle row */
.theme-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: #F2F7FD !important;
  border: 1px solid #D8E8F5 !important;
  border-radius: 9px !important;
  padding: 0.60rem 0.82rem !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.theme-toggle-row:hover {
  background: #EAF1FB !important;
  border-color: #C8D9EF !important;
}
.theme-toggle-row .t-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.58rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #1A2B45 !important;
}
.theme-toggle-row .t-label i { color: #387FBB !important; font-size: 1.0rem !important; }

/* Toggle switch pill */
.theme-switch {
  position: relative !important;
  width: 38px !important; height: 21px !important;
  background: #C5D6EC !important;
  border-radius: 11px !important;
  transition: background 0.28s !important;
  flex-shrink: 0 !important;
}
.theme-switch::after {
  content: '' !important;
  position: absolute !important;
  width: 15px !important; height: 15px !important;
  background: #fff !important;
  border-radius: 50% !important;
  top: 3px !important; left: 3px !important;
  transition: transform 0.28s cubic-bezier(0.35,0,0.15,1) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
}
[data-theme="dark"] .theme-switch { background: #2563B0 !important; }
[data-theme="dark"] .theme-switch::after { transform: translateX(17px) !important; }

/* Section divider */
.settings-divider {
  margin: 0 !important;
  border-color: #EBF1FA !important;
  opacity: 1 !important;
}

/* Reading mode row */
.settings-reading-li { padding: 0.40rem 0.48rem !important; }
#readingModeBtn {
  display: flex !important;
  align-items: center !important;
  gap: 0.72rem !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  border-radius: 9px !important;
  padding: 0.64rem 0.74rem !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.18s !important;
  font-size: 0.855rem !important;
  font-weight: 600 !important;
  color: #1A2B45 !important;
}
#readingModeBtn:hover {
  background: #F2F7FD !important;
  color: #0B1E44 !important;
}
#readingModeBtn.active { background: rgba(11,30,68,0.06) !important; }

/* Icon box inside reading mode button */
.srb-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #0B1E44 0%, #1A5A90 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  color: #67D3FF !important;
  font-size: 0.88rem !important;
  transition: background 0.2s !important;
}
#readingModeBtn.active .srb-icon {
  background: linear-gradient(145deg, #1A5A90 0%, #2272AA 100%) !important;
}
.srb-text { flex: 1 !important; }
.srb-arrow {
  font-size: 0.65rem !important;
  color: #BDD2E8 !important;
  transition: transform 0.2s, color 0.2s !important;
}
#readingModeBtn:hover .srb-arrow {
  transform: translateX(2px) !important;
  color: #8BA0C2 !important;
}

/* ── 6. RESPONSIVE ──────────────────────────────────────────── */

/* Brand text — always visible, wraps naturally */
.navbar-brand .brand-text {
  display: flex !important;
  flex-direction: column !important;
  white-space: normal !important;
  max-width: 200px !important;
}
.navbar-brand .brand-name {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.navbar-brand .brand-tagline,
#mainNav:not(.scrolled) .navbar-brand .brand-tagline {
  font-size: 0.58rem !important;
  line-height: 1.2 !important;
  color: rgba(220,235,255,0.95) !important;
}

/* Hide brand text only on very small screens */
@media (max-width: 400px) {
  .navbar-brand .brand-text { display: none !important; }
}

/* Move desktop-only threshold from 992 → 1200 */
@media (max-width: 1199.98px) {
  .desktop-only { display: none !important; }
}

/* Navbar transparent at all breakpoints until scrolled */
@media (max-width: 1199.98px) {
  #mainNav { background: rgba(10,22,55,0.22) !important; }
  #mainNav.scrolled {
    background: rgba(10,24,62,0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  #mainNav::before,
  #mainNav::after { display: none !important; }
}

@media (max-width: 991.98px) {
  .hero-video-bg { display: block !important; }
  #mainNav::before,
  #mainNav::after { display: none !important; }
}
@media (max-width: 767.98px) {
  .utility-contact-item { font-size: 0.68rem !important; }
  .utility-doc-link { font-size: 0.68rem !important; }
  .hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(4,9,26,0.90) 0%,
        rgba(4,9,26,0.72) 20%,
        rgba(4,9,26,0.50) 60%,
        rgba(4,9,26,0.82) 100%) !important;
  }
}

/* ============================================================
   v5 HERO + HEADER REFINEMENT — clean, institutional, focused
   ============================================================ */

/* ── 1. VIDEO: deep obscure, no detail, pure mood ───────────── */
.hero-video-bg video,
.hero-video-bg img {
  filter: brightness(0.14) saturate(0.60) contrast(1.10) blur(2px) !important;
}

/* ── Overlay: even coverage, text always clear ──────────────── */
.hero-overlay {
  z-index: 2 !important;
  background:
    linear-gradient(115deg,
      rgba(4,9,26,0.94)   0%,
      rgba(5,12,36,0.82)  22%,
      rgba(6,16,50,0.58)  50%,
      rgba(4,10,28,0.22)  74%,
      transparent          100%),
    linear-gradient(to bottom,
      rgba(4,9,26,0.80)   0%,
      rgba(4,9,26,0.36)   12%,
      transparent          28%),
    linear-gradient(to top,
      rgba(4,9,26,0.92)   0%,
      rgba(4,9,26,0.46)   13%,
      transparent          34%),
    radial-gradient(ellipse at 32% 52%, rgba(5,24,90,0.36) 0%, transparent 55%) !important;
}

/* ── 2. TOPBAR + NAVBAR — single seamless band ──────────────── */
.utility-bar {
  background: rgba(6,14,38,0.30) !important;
  border-bottom: 1px solid rgba(60,100,200,0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.utility-bar.scrolled {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}

#mainNav {
  background: rgba(6,14,38,0.30) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(60,100,200,0.06) !important;
  box-shadow: none !important;
}
#mainNav::after { display: none !important; }

#mainNav.scrolled {
  top: 0 !important;
  background: rgba(10,24,62,0.96) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(80,140,230,0.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.40) !important;
}

/* ── 3. LOGO — strong brand anchor ─────────────────────────── */
#mainNav .navbar-brand img,
.navbar-brand img {
  height: 54px !important;
  filter: brightness(10) !important;
}
#mainNav.scrolled .navbar-brand img { height: 46px !important; }
.navbar-brand .brand-text  { max-width: 220px !important; }
.navbar-brand .brand-name  { font-size: 0.80rem !important; font-weight: 700 !important; }
.navbar-brand .brand-tagline,
#mainNav:not(.scrolled) .brand-tagline,
#mainNav.scrolled .brand-tagline {
  color: rgba(200,225,255,0.92) !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}
.brand-name  { font-size: 0.82rem !important; font-weight: 700 !important; color: #FFFFFF !important; }
.brand-tagline { color: rgba(200,225,255,0.92) !important; font-size: 0.60rem !important; }

/* ── 4. NAV ITEMS — breathing, lighter weight ───────────────── */
.nav-desktop-list { gap: 0.15rem !important; }
.nav-link-custom {
  padding: 0.45rem 0.82rem !important;
  font-weight: 500 !important;
  font-size: 0.73rem !important;
  letter-spacing: 0.07em !important;
  color: rgba(210,228,255,0.76) !important;
}
.nav-link-custom:hover { color: #ffffff !important; }
.nav-link-custom.active { color: #ffffff !important; font-weight: 700 !important; }

/* ── 5. ICON CONTROLS — clean, consistent ──────────────────── */
.navbar-controls { gap: 0.28rem !important; }
.btn-icon-ctrl {
  height: 36px !important;
  font-size: 1.05rem !important;
  padding: 0 0.50rem !important;
  color: rgba(210,230,255,0.82) !important;
}
.btn-icon-ctrl:hover { color: #ffffff !important; background: rgba(255,255,255,0.10) !important; }
.btn-icon-ctrl[aria-expanded="true"] { color: #ffffff !important; background: rgba(255,255,255,0.13) !important; }
.mobile-menu-icon { font-size: 1.3rem !important; }

/* Topbar text — slightly heavier */
.utility-contact-item { font-weight: 600 !important; }
.utility-doc-link { font-weight: 700 !important; letter-spacing: 0.07em !important; }

/* ── 6. HERO: clean image panel (no stats, no padding below) ── */
.hero-img-panel {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(80,130,220,0.16) !important;
  box-shadow:
    0 32px 72px rgba(0,0,0,0.55),
    0 2px 12px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;
  width: 100% !important;
  max-width: 390px !important;
}
.hero-img-panel img {
  display: block !important;
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  filter: brightness(0.52) saturate(0.72) contrast(1.06) !important;
}
/* Vignette over image */
.hero-img-panel::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(4,9,26,0.08) 0%,
    rgba(4,9,26,0.50) 100%) !important;
  pointer-events: none !important;
}
/* Small institutional label bottom-left */
.hip-label {
  position: absolute !important;
  bottom: 1.10rem !important;
  left: 1.10rem !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(4,9,26,0.72) !important;
  border: 1px solid rgba(80,140,230,0.22) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 5px !important;
  padding: 0.42rem 0.80rem !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(200,225,255,0.88) !important;
}
.hip-label i { color: rgba(103,211,255,0.80) !important; font-size: 0.75rem !important; }

/* ── 7. HERO TEXT: focused, no pipeline clutter ─────────────── */
.hero-title   { margin-bottom: 1.0rem !important; }
.hero-subtitle {
  max-width: 500px !important;
  margin-bottom: 0 !important;
  opacity: 0.88 !important;
}
/* Remove pipeline from hero — it lives in methodology section */
.hero-pipeline { display: none !important; }

/* ── 8. CTA BUTTONS — premium, rich ────────────────────────── */
.hero-section .btn-primary-custom {
  padding: 0.82rem 2.10rem !important;
  border-radius: 8px !important;
  background: rgba(18,72,180,0.92) !important;
  border: 1.5px solid rgba(70,140,240,0.68) !important;
  box-shadow: 0 4px 22px rgba(10,50,160,0.42), 0 1px 0 rgba(255,255,255,0.07) inset !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
}
.hero-section .btn-primary-custom:hover {
  background: rgba(26,88,210,0.97) !important;
  border-color: rgba(90,160,250,0.82) !important;
  box-shadow: 0 8px 30px rgba(10,50,160,0.55) !important;
  transform: translateY(-2px) !important;
}
.hero-section .btn-outline-primary-c {
  padding: 0.82rem 1.80rem !important;
  border-radius: 8px !important;
  color: rgba(210,228,255,0.92) !important;
  border: 1.5px solid rgba(100,150,240,0.38) !important;
  background: rgba(20,55,130,0.12) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.hero-section .btn-outline-primary-c:hover {
  background: rgba(20,70,175,0.24) !important;
  color: #ffffff !important;
  border-color: rgba(110,170,250,0.55) !important;
  transform: translateY(-2px) !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  #mainNav { background: rgba(6,14,38,0.34) !important; }
  #mainNav.scrolled { background: rgba(10,24,62,0.96) !important; }
}
@media (max-width: 991.98px) {
  .hero-img-panel img { height: 300px !important; }
}

/* ============================================================
   v6 HEADER / HERO POLISH
   Logo scale · video depth · image panel balance · button contrast
   ============================================================ */

/* 1. Logo — compact, not dominant */
#mainNav .navbar-brand img,
.navbar-brand img {
  height: 40px !important;
  filter: brightness(10) !important;
}
#mainNav.scrolled .navbar-brand img { height: 36px !important; }
.navbar-brand .brand-text  { max-width: 195px !important; }
.navbar-brand .brand-name  { font-size: 0.72rem !important; font-weight: 700 !important; }
.navbar-brand .brand-tagline,
#mainNav:not(.scrolled) .brand-tagline,
#mainNav.scrolled .brand-tagline {
  font-size: 0.57rem !important;
  color: rgba(195,220,255,0.88) !important;
}
.brand-name    { font-size: 0.72rem !important; font-weight: 700 !important; }
.brand-tagline { font-size: 0.57rem !important; }

/* 2. Video — deeper obscure, stronger blur */
.hero-video-bg video,
.hero-video-bg img {
  filter: brightness(0.11) saturate(0.50) contrast(1.12) blur(4px) !important;
}

/* 3. Image panel — taller, balanced vertically */
.hero-img-panel {
  max-width: 380px !important;
  align-self: center !important;
  margin-top: 1rem !important;
}
.hero-img-panel img {
  height: 460px !important;
}

/* 4. Hero row — tighter bottom padding */
.hero-row {
  padding: 110px 0 56px !important;
  align-items: center !important;
}

/* 5. Secondary button — visible, not disabled-looking */
.hero-section .btn-outline-primary-c {
  color: rgba(225,238,255,0.96) !important;
  border: 1.5px solid rgba(130,180,255,0.55) !important;
  background: rgba(30,70,160,0.18) !important;
}
.hero-section .btn-outline-primary-c:hover {
  border-color: rgba(150,200,255,0.72) !important;
  background: rgba(30,80,180,0.28) !important;
  color: #ffffff !important;
}

/* 6. Topbar — refined typography and icons */
.utility-contact-item {
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  color: rgba(210,228,255,0.82) !important;
  letter-spacing: 0.05em !important;
  gap: 0.38rem !important;
}
.utility-contact-item i {
  font-size: 0.70rem !important;
  color: rgba(120,200,255,0.75) !important;
}
.utility-doc-link {
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(185,215,255,0.78) !important;
}
.utility-doc-link:hover { color: #ffffff !important; }
.utility-bar-sep { color: rgba(100,150,230,0.20) !important; }

/* 7. Nav active / hover — clearer differentiation */
.nav-link-custom {
  color: rgba(195,218,255,0.68) !important;
  position: relative !important;
}
.nav-link-custom:hover {
  color: rgba(235,245,255,0.96) !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 5px !important;
}
.nav-link-custom.active {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 5px !important;
}

/* 8. Utility icon controls — final polish */
.navbar-controls { gap: 0.20rem !important; }
.btn-icon-ctrl {
  height: 34px !important;
  font-size: 1.0rem !important;
  padding: 0 0.46rem !important;
  color: rgba(200,222,255,0.78) !important;
  border-radius: 6px !important;
  transition: background 0.18s, color 0.18s !important;
}
.btn-icon-ctrl:hover {
  color: rgba(235,248,255,0.98) !important;
  background: rgba(255,255,255,0.09) !important;
}
.btn-icon-ctrl[aria-expanded="true"] {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
}
/* Subtle divider between lang and settings */
.nav-lang-drop { border-right: 1px solid rgba(100,150,230,0.14) !important; padding-right: 0.30rem !important; margin-right: 0.10rem !important; }

@media (max-width: 1199.98px) {
  .hero-row { padding: 96px 0 48px !important; }
}

/* ============================================================
   v7 FINAL HEADER POLISH
   ============================================================ */

/* 1+2. Logo compact — not dominant */
#mainNav .navbar-brand img,
.navbar-brand img         { height: 36px !important; }
#mainNav.scrolled .navbar-brand img { height: 32px !important; }
.navbar-brand             { gap: 0.55rem !important; }
.navbar-brand .brand-text { max-width: 182px !important; }
.navbar-brand .brand-name { font-size: 0.68rem !important; font-weight: 700 !important; }
.navbar-brand .brand-tagline,
#mainNav:not(.scrolled) .brand-tagline,
#mainNav.scrolled .brand-tagline {
  font-size: 0.54rem !important;
  color: rgba(185,212,255,0.72) !important;
  letter-spacing: 0.11em !important;
}
.brand-name    { font-size: 0.68rem !important; }
.brand-tagline { font-size: 0.54rem !important; color: rgba(185,212,255,0.72) !important; }

/* 1. Nav items — more breathing */
.nav-desktop-list { gap: 0.05rem !important; }
.nav-link-custom  {
  padding: 0.46rem 1.0rem !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.065em !important;
}

/* 3. Hero height — reduce bottom space */
.hero-section { min-height: 88vh !important; }
.hero-row     { padding: 100px 0 48px !important; align-items: center !important; }

/* 4. Image card — pushed slightly lower, subtle bottom glow */
.hero-img-panel {
  margin-top: 2.5rem !important;
  max-width: 370px !important;
  box-shadow:
    0 36px 80px rgba(0,0,0,0.58),
    0 4px 16px rgba(0,0,0,0.32),
    0 0 48px rgba(30,80,200,0.12) !important;
}
.hero-img-panel img { height: 440px !important; }

/* 5. Background — visible but atmospheric */
.hero-video-bg video,
.hero-video-bg img {
  filter: brightness(0.55) saturate(0.90) contrast(1.04) !important;
}
.hero-overlay {
  background:
    linear-gradient(115deg,
      rgba(4,9,26,0.96)   0%,
      rgba(5,12,36,0.86)  22%,
      rgba(5,14,44,0.62)  50%,
      rgba(4,10,28,0.26)  74%,
      transparent          100%),
    linear-gradient(to bottom,
      rgba(4,9,26,0.84)   0%,
      rgba(4,9,26,0.38)   12%,
      transparent          28%),
    linear-gradient(to top,
      rgba(4,9,26,0.94)   0%,
      rgba(4,9,26,0.50)   14%,
      transparent          34%),
    radial-gradient(ellipse at 32% 52%, rgba(5,22,85,0.40) 0%, transparent 55%) !important;
}

/* 6. Secondary button — clearly visible */
.hero-section .btn-outline-primary-c {
  color: #ffffff !important;
  border: 1.5px solid rgba(150,195,255,0.52) !important;
  background: rgba(30,70,165,0.16) !important;
}
.hero-section .btn-outline-primary-c:hover {
  border-color: rgba(170,215,255,0.70) !important;
  background: rgba(30,85,185,0.28) !important;
}

/* 7. Topbar — slightly larger, cleaner */
.utility-contact-item {
  font-size: 0.69rem !important;
  font-weight: 600 !important;
  color: rgba(215,232,255,0.84) !important;
  letter-spacing: 0.04em !important;
}
.utility-contact-item i { font-size: 0.72rem !important; color: rgba(130,205,255,0.78) !important; }
.utility-doc-link       { font-size: 0.69rem !important; color: rgba(190,218,255,0.80) !important; font-weight: 700 !important; }

/* 8. Utility icon controls — premium hover */
.btn-icon-ctrl {
  height: 32px !important;
  font-size: 0.98rem !important;
  padding: 0 0.44rem !important;
  color: rgba(205,225,255,0.76) !important;
  border-radius: 5px !important;
  transition: background 0.16s ease, color 0.16s ease !important;
}
.btn-icon-ctrl:hover {
  color: rgba(240,250,255,0.98) !important;
  background: rgba(255,255,255,0.09) !important;
}
.btn-icon-ctrl[aria-expanded="true"] {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
}
.lang-toggle-btn .lang-code-cur { font-size: 0.70rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
.nav-lang-drop { border-right: 1px solid rgba(110,155,230,0.16) !important; padding-right: 0.26rem !important; margin-right: 0.08rem !important; }

/* 9. Active nav item — soft pill, not heavy */
.nav-link-custom.active {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 5px !important;
}
.nav-link-custom:hover {
  color: rgba(240,250,255,0.96) !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 5px !important;
}

@media (max-width: 1199.98px) {
  .hero-section { min-height: 92vh !important; }
  .hero-row { padding: 92px 0 44px !important; }
}

/* ── HERO PROCESS PANEL — Premium stepper ───────────────────── */
.hero-process-panel {
  width: 100%;
  max-width: 420px;
  position: relative;
  /* Glass card */
  background: transparent;
  border-radius: 20px;
  padding: 1.80rem 1.70rem 1.50rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}
/* Top accent line removed (transparent card) */
.hero-process-panel::before { display: none; }

/* Header */
.hpp-head { margin-bottom: 1.10rem; }
.hpp-eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(103,211,255,0.65);
  margin-bottom: 0.28rem;
}
.hpp-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Pentagon orbital diagram ────────────────────────────────── */
.hpp-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.10rem;
}
.hpp-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
}

/* Hub pulse animation */
@keyframes hpp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.78; transform: scale(0.96); }
}
.hpp-hub-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpp-pulse 3.6s ease-in-out infinite;
}

/* Outer orbit ring slow spin */
@keyframes hpp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hpp-ring-anim {
  transform-box: fill-box;
  transform-origin: center;
  animation: hpp-spin 32s linear infinite;
}

/* Bottom link */
.hpp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 1.0rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(80,130,220,0.12);
  width: 100%;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(103,211,255,0.68);
  text-decoration: none;
  transition: color 0.18s, gap 0.18s;
}
.hpp-link:hover {
  color: rgba(160,230,255,0.94);
  gap: 0.60rem;
}
.hpp-link svg { flex-shrink: 0; transition: transform 0.18s; }
.hpp-link:hover svg { transform: translateX(3px); }

/* ============================================================
   v8 SECTION POLISH — Pillars contrast, About, Cards, BTT
   ============================================================ */

/* ── Pillar section background: slightly more distinct ─────── */
.section-pillars { background: #EDF2F9 !important; }

/* ── Section header: stronger presence ─────────────────────── */
.section-pillars .section-header h3 {
  font-size: 1.80rem !important;
  font-weight: 800 !important;
  color: #091A38 !important;
  letter-spacing: -0.02em !important;
}
.section-pillars .section-header p {
  font-size: 0.97rem !important;
  color: #3C5278 !important;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.7 !important;
}

/* ── Pillar card: clear white with visible shadow + border ──── */
.section-pillars .pillar-card {
  background: #ffffff !important;
  border: 1px solid #BFD0E8 !important;
  border-top: 3px solid #1A5A90 !important;
  box-shadow: 0 2px 6px rgba(9,26,56,0.06), 0 8px 22px rgba(9,26,56,0.09) !important;
  padding: 2rem 1.5rem 1.75rem !important;
  transition: box-shadow 0.25s, transform 0.25s, border-top-color 0.25s !important;
}
.section-pillars .pillar-card:hover {
  box-shadow: 0 4px 10px rgba(9,26,56,0.09), 0 18px 38px rgba(9,26,56,0.13) !important;
  transform: translateY(-5px) !important;
}

/* Color progression: top accent per step */
.pillar-card[data-step="1"] { border-top-color: #1A5A90 !important; }
.pillar-card[data-step="2"] { border-top-color: #1479B5 !important; }
.pillar-card[data-step="3"] { border-top-color: #0C9BB0 !important; }
.pillar-card[data-step="4"] { border-top-color: #10B49A !important; }
.pillar-card[data-step="5"] { border-top-color: #0FC98C !important; }

/* Number: visible but decorative */
.pillar-num {
  opacity: 0.40 !important;
  font-size: 3.0rem !important;
  color: #091A38 !important;
}
.pillar-card[data-step="1"] .pillar-num { color: #1A5A90 !important; }
.pillar-card[data-step="2"] .pillar-num { color: #1479B5 !important; }
.pillar-card[data-step="3"] .pillar-num { color: #0C9BB0 !important; }
.pillar-card[data-step="4"] .pillar-num { color: #10B49A !important; }
.pillar-card[data-step="5"] .pillar-num { color: #0FC98C !important; }

/* Title and description: better contrast */
.pillar-card h5 { color: #0E1E3A !important; font-size: 0.97rem !important; }
.pillar-card p  { color: #485F82 !important; line-height: 1.70 !important; }

/* ── About section: paragraph tighter & readable ───────────── */
.about-lead {
  max-width: 500px;
  line-height: 1.85 !important;
  color: #364D6A !important;
  font-size: 0.96rem !important;
}

/* About image: brand tint overlay */
.about-img-wrapper {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.about-img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,28,72,0.12) 0%, rgba(10,28,72,0.04) 60%, transparent 100%);
  border-radius: 14px;
  pointer-events: none;
}
.about-section-img { border-radius: 0 !important; }

/* ── Feature icon boxes: richer, not default ───────────────── */
.feature-icon-box {
  background: rgba(237,242,249,0.75) !important;
  border: 1px solid rgba(9,26,56,0.09) !important;
  border-radius: 10px !important;
  padding: 1.1rem 1.1rem !important;
  box-shadow: 0 1px 4px rgba(9,26,56,0.05), 0 4px 12px rgba(9,26,56,0.06) !important;
  transition: box-shadow 0.22s, transform 0.22s !important;
}
.feature-icon-box:hover {
  box-shadow: 0 3px 8px rgba(9,26,56,0.09), 0 10px 24px rgba(9,26,56,0.10) !important;
  transform: translateY(-2px) !important;
}
.feature-icon-box .icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(9,26,56,0.07) !important;
  border: 1px solid rgba(9,26,56,0.12) !important;
  box-shadow: 0 2px 8px rgba(9,26,56,0.07) !important;
  flex-shrink: 0 !important;
}
.feature-icon-box h6 {
  color: #0E1E3A !important;
  font-size: 0.87rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.20rem !important;
}
.feature-icon-box p {
  color: #485F82 !important;
  font-size: 0.79rem !important;
  line-height: 1.55 !important;
}

/* ── Back-to-top: smaller, softer ─────────────────────────── */
#backToTop {
  width: 34px !important;
  height: 34px !important;
  font-size: 0.76rem !important;
  background: rgba(9,26,56,0.60) !important;
  box-shadow: 0 1px 6px rgba(9,26,56,0.14) !important;
  border-radius: 6px !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
}
#backToTop:hover { background: rgba(9,26,56,0.85) !important; }

/* ============================================================
   v9 ABOUT SECTION — refined
   ============================================================ */

/* Section: clean white, reduced padding, no noisy dot pattern */
.section-about {
  background: #ffffff;
  position: relative;
  padding: 72px 0 68px !important;
}
.section-about .container { position: relative; z-index: 1; }

/* ── Image wrapper ───────────────────────────────────────────── */
.about-img-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: visible !important;
}
/* Subtle glow halo behind image */
.about-img-wrapper::before {
  content: '';
  position: absolute;
  inset: -8px -8px -12px -12px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(26,90,144,0.11) 0%, rgba(16,180,154,0.06) 100%);
  z-index: 0;
}
/* Warm + brand tint overlay on the image */
.about-img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(160deg,
    rgba(20,45,100,0.18) 0%,
    rgba(20,45,100,0.06) 45%,
    rgba(240,150,40,0.04) 100%);
  z-index: 2;
  pointer-events: none;
}
.about-section-img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  border-radius: 16px !important;
  display: block !important;
  filter: saturate(0.88) brightness(0.97) !important;
  box-shadow: 0 6px 28px rgba(9,26,80,0.13), 0 2px 6px rgba(9,26,80,0.07) !important;
}

/* ── Tag ─────────────────────────────────────────────────────── */
.about-tag-row { margin-bottom: 0.80rem; }
.about-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1A5A90;
  background: rgba(26,90,144,0.09);
  border: 1px solid rgba(26,90,144,0.24);
  border-radius: 5px;
  padding: 0.42rem 0.95rem;
  box-shadow: 0 1px 4px rgba(26,90,144,0.07);
}

/* ── Heading ─────────────────────────────────────────────────── */
.about-heading {
  font-size: 2.10rem;
  font-weight: 800;
  color: #091A38;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin-bottom: 1.10rem;
}
@media (max-width: 1199.98px) { .about-heading { font-size: 1.85rem; } }
@media (max-width: 767.98px)  { .about-heading { font-size: 1.55rem; } }

/* ── Lead paragraph ─────────────────────────────────────────── */
.about-lead {
  max-width: 440px !important;
  font-size: 0.95rem !important;
  line-height: 1.84 !important;
  color: #334A68 !important;
  margin-bottom: 0 !important;
}

/* ── Feature icon boxes ─────────────────────────────────────── */
.feature-icon-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  background: #ffffff !important;
  border: 1px solid #B8CCE2 !important;
  border-radius: 11px !important;
  padding: 1.10rem 1.05rem !important;
  box-shadow: 0 1px 3px rgba(9,26,80,0.05), 0 5px 16px rgba(9,26,80,0.08) !important;
  transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s !important;
  height: 100% !important;
}
.feature-icon-box:hover {
  box-shadow: 0 3px 8px rgba(9,26,80,0.09), 0 12px 28px rgba(9,26,80,0.11) !important;
  transform: translateY(-3px) !important;
  border-color: #94B4D0 !important;
}
.fib-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(26,90,144,0.12) 0%, rgba(16,140,175,0.09) 100%);
  border: 1px solid rgba(26,90,144,0.18);
  box-shadow: 0 2px 7px rgba(26,90,144,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fib-body { flex: 1; min-width: 0; }
.fib-body h6 {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #0B1C38 !important;
  margin-bottom: 0.24rem !important;
  line-height: 1.3 !important;
}
.fib-body p {
  font-size: 0.76rem !important;
  color: #3F5878 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── CTA button ──────────────────────────────────────────────── */
.about-cta-row { display: flex; align-items: center; }
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1A5A90;
  background: rgba(26,90,144,0.07);
  border: 1.5px solid rgba(26,90,144,0.22);
  border-radius: 7px;
  padding: 0.60rem 1.10rem;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, gap 0.18s;
}
.about-cta-btn:hover {
  background: rgba(26,90,144,0.12);
  color: #0C3668;
  border-color: rgba(26,90,144,0.40);
  gap: 0.70rem;
}
.about-cta-btn svg { flex-shrink: 0; transition: transform 0.18s; }
.about-cta-btn:hover svg { transform: translateX(3px); }

/* Transition: about (white) → programs (very faint blue-gray) */
.section-programs { background: #EEF3FA !important; }

/* Keep old .icon class from breaking other uses */
.feature-icon-box > .icon { display: none !important; }

/* ============================================================
   v10 PROGRAMS SECTION — card hierarchy + contrast polish
   ============================================================ */

/* ── Base card override ──────────────────────────────────────── */
.program-card {
  background: #ffffff !important;
  border: 1px solid #C0D2E8 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(9,26,80,0.05), 0 6px 20px rgba(9,26,80,0.08) !important;
  overflow: hidden !important;
  transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s !important;
}
.program-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 4px 10px rgba(9,26,80,0.09), 0 16px 36px rgba(9,26,80,0.12) !important;
  border-color: #98BBDA !important;
}
/* Consistent warm-neutral image treatment */
.program-card-img {
  width: 100% !important;
  height: 188px !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(0.88) brightness(0.96) !important;
  transition: transform 0.4s ease, filter 0.4s ease !important;
}
.program-card:hover .program-card-img {
  transform: scale(1.04) !important;
  filter: saturate(0.94) brightness(1.00) !important;
}
/* Body: flex-column so CTA always pins to bottom */
.program-card-body {
  padding: 1.4rem 1.35rem 1.30rem !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100% - 188px) !important;
}
.program-card-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #0B1C38 !important;
  margin-bottom: 0.45rem !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.program-card-desc {
  font-size: 0.82rem !important;
  color: #374F6E !important;
  line-height: 1.65 !important;
  margin: 0 0 auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── Small icon accent ───────────────────────────────────────── */
.pc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(26,90,144,0.10) 0%, rgba(16,140,175,0.08) 100%);
  border: 1px solid rgba(26,90,144,0.15);
  color: #1A5A90;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  margin-bottom: 0.80rem;
  flex-shrink: 0;
}

/* ── CTA link: always at bottom ─────────────────────────────── */
.pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.40rem;
  margin-top: 1.0rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(9,26,80,0.08);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1A5A90;
  text-decoration: none;
  transition: color 0.18s, gap 0.18s;
  width: 100%;
}
.pc-cta:hover { color: #0C3668; gap: 0.56rem; }
.pc-cta svg   { flex-shrink: 0; transition: transform 0.18s; }
.pc-cta:hover svg { transform: translateX(3px); }

/* ── Featured card: horizontal layout ───────────────────────── */
.program-card--featured {
  display: flex !important;
  flex-direction: row !important;
  min-height: 260px !important;
  border: 1px solid #A8C4DF !important;
  background: linear-gradient(to right, #ffffff 55%, #F5F9FE 100%) !important;
}
.program-card--featured .program-card-img {
  width: 42% !important;
  height: 100% !important;
  min-height: 260px !important;
  flex-shrink: 0 !important;
  object-position: center 35% !important;
  border-radius: 0 !important;
}
.program-card--featured .program-card-body {
  flex: 1 !important;
  padding: 1.80rem 1.80rem 1.60rem !important;
  height: auto !important;
}
.program-card--featured .program-card-title {
  font-size: 1.28rem !important;
  -webkit-line-clamp: 2 !important;
  margin-bottom: 0.60rem !important;
}
.program-card--featured .program-card-desc {
  -webkit-line-clamp: 4 !important;
  font-size: 0.86rem !important;
}
.program-card--featured .pc-cta {
  margin-top: auto !important;
  padding-top: 0.80rem !important;
  width: auto !important;
  font-size: 0.80rem !important;
}

/* Badge on featured card */
.pc-badge {
  display: inline-block;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1A5A90;
  background: rgba(26,90,144,0.09);
  border: 1px solid rgba(26,90,144,0.20);
  border-radius: 4px;
  padding: 0.26rem 0.70rem;
  margin-bottom: 0.85rem;
}

/* Responsive: featured stacks on mobile */
@media (max-width: 767.98px) {
  .program-card--featured {
    flex-direction: column !important;
  }
  .program-card--featured .program-card-img {
    width: 100% !important;
    height: 200px !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   v11 DIRECTIONS SECTION — per-card color + premium hover
   ============================================================ */

.section-directions {
  background: #ffffff !important;
  position: relative;
}

/* ── Direction card base ─────────────────────────────────────── */
.direction-card {
  background: #ffffff !important;
  border: 1px solid #C0D2E8 !important;
  border-top: 3px solid rgb(var(--dc, 26,90,144)) !important;
  border-radius: 12px !important;
  padding: 1.65rem 1.20rem 1.45rem !important;
  text-align: center !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(9,26,80,0.05), 0 6px 18px rgba(9,26,80,0.07) !important;
  transition: transform 0.26s, box-shadow 0.26s, border-color 0.26s !important;
  cursor: default !important;
}
.direction-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--dc,26,90,144),0.06) 0%, transparent 65%) !important;
  opacity: 0 !important;
  transition: opacity 0.28s !important;
  pointer-events: none !important;
}
.direction-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 6px 14px rgba(var(--dc,26,90,144),0.14),
              0 18px 38px rgba(9,26,80,0.11) !important;
  border-color: rgba(var(--dc,26,90,144),0.45) !important;
  border-top-color: rgb(var(--dc,26,90,144)) !important;
}
.direction-card:hover::after { opacity: 1 !important; }

/* ── Icon container ──────────────────────────────────────────── */
.direction-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important;
  margin: 0 auto 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(var(--dc,26,90,144),0.09) !important;
  border: 1.5px solid rgba(var(--dc,26,90,144),0.18) !important;
  box-shadow: 0 3px 10px rgba(var(--dc,26,90,144),0.10) !important;
  color: rgb(var(--dc,26,90,144)) !important;
  transition: transform 0.26s, background 0.26s, box-shadow 0.26s !important;
}
.direction-card:hover .direction-icon {
  transform: translateY(-3px) scale(1.07) !important;
  background: rgba(var(--dc,26,90,144),0.15) !important;
  box-shadow: 0 5px 18px rgba(var(--dc,26,90,144),0.22) !important;
}

/* ── Typography ──────────────────────────────────────────────── */
.direction-card h4 {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: #0B1C38 !important;
  margin-bottom: 0.38rem !important;
  line-height: 1.3 !important;
}
.direction-card p {
  font-size: 0.76rem !important;
  color: #3D5478 !important;
  line-height: 1.60 !important;
  margin: 0 !important;
}

/* ============================================================
   v12 — News Section
   ============================================================ */

/* ── Section wrapper ──────────────────────────────────────── */
.section-news {
  background: #ffffff !important;
  padding: 76px 0 80px !important;
}

/* ── "Barcha yangiliklar" CTA ─────────────────────────────── */
.news-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1A5A90 !important;
  border: 1.5px solid rgba(26,90,144,0.30) !important;
  border-radius: 100px !important;
  padding: 0.50rem 1.15rem !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: background 0.22s, color 0.22s, border-color 0.22s, gap 0.22s !important;
  white-space: nowrap !important;
}
.news-all-btn svg {
  transition: transform 0.22s !important;
  flex-shrink: 0 !important;
}
.news-all-btn:hover {
  background: #1A5A90 !important;
  color: #ffffff !important;
  border-color: #1A5A90 !important;
  gap: 0.60rem !important;
}
.news-all-btn:hover svg { transform: translateX(3px) !important; }

/* ── Base card ────────────────────────────────────────────── */
.news-card {
  background: #ffffff !important;
  border: 1px solid #C4D4E6 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(9,26,80,0.05), 0 6px 18px rgba(9,26,80,0.07) !important;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease !important;
  height: 100% !important;
}
.news-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 22px rgba(26,90,144,0.13), 0 20px 44px rgba(9,26,80,0.10) !important;
  border-color: rgba(26,90,144,0.38) !important;
}

/* ── Image wrapper ────────────────────────────────────────── */
.news-card-img {
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.nc-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.88) brightness(0.96) !important;
  transition: transform 0.42s ease, filter 0.42s ease !important;
}
.news-card:hover .nc-img {
  transform: scale(1.04) !important;
  filter: saturate(0.95) brightness(1.00) !important;
}

/* ── Category badge ───────────────────────────────────────── */
.news-cat {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.28rem 0.72rem !important;
  border-radius: 100px !important;
  color: #ffffff !important;
  background: rgba(26,90,144,0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  line-height: 1 !important;
}
.news-cat[data-cat="tanlov"]  { background: rgba(26,90,144,0.88) !important; }
.news-cat[data-cat="aksel"]   { background: rgba(10,155,176,0.88) !important; }
.news-cat[data-cat="stajir"]  { background: rgba(107,68,192,0.88) !important; }
.news-cat[data-cat="loyiha"]  { background: rgba(14,142,70,0.88) !important; }
.news-cat[data-cat="ilmiy"]   { background: rgba(185,84,18,0.88) !important; }

/* ── Body ─────────────────────────────────────────────────── */
.news-card-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.15rem 1.20rem 1.10rem !important;
  flex: 1 !important;
}

/* ── Date ─────────────────────────────────────────────────── */
.nc-date {
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  color: #7A93B4 !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.30rem !important;
  margin-bottom: 0.55rem !important;
}
.nc-date .bi { font-size: 0.68rem !important; }

/* ── Title ────────────────────────────────────────────────── */
.news-card-title {
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #091A38 !important;
  line-height: 1.40 !important;
  margin-bottom: 0.55rem !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
}
.news-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.20s !important;
}
.news-card-title a:hover { color: #1A5A90 !important; }

/* ── Excerpt ──────────────────────────────────────────────── */
.news-card-excerpt {
  font-size: 0.78rem !important;
  color: #4A6280 !important;
  line-height: 1.72 !important;
  margin: 0 0 auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
}

/* ── Read CTA ─────────────────────────────────────────────── */
.nc-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.34rem !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #1A5A90 !important;
  text-decoration: none !important;
  margin-top: 0.85rem !important;
  letter-spacing: 0.02em !important;
  transition: gap 0.20s, color 0.20s !important;
}
.nc-cta svg { transition: transform 0.20s !important; flex-shrink: 0 !important; }
.nc-cta:hover { color: #0E3F6C !important; gap: 0.52rem !important; }
.nc-cta:hover svg { transform: translateX(3px) !important; }

/* ── Featured variant ─────────────────────────────────────── */
.news-card--featured {
  display: flex !important;
  flex-direction: column !important;
}
.news-card--featured .news-card-img {
  height: 240px !important;
}
.news-card--featured .news-card-body {
  padding: 1.30rem 1.35rem 1.25rem !important;
}
.news-card--featured .news-card-title {
  font-size: 1.10rem !important;
  -webkit-line-clamp: 3 !important;
  margin-bottom: 0.65rem !important;
}
.news-card--featured .news-card-excerpt {
  -webkit-line-clamp: 4 !important;
}

/* ── Compact horizontal variant ──────────────────────────── */
.news-card--compact {
  flex-direction: row !important;
  height: auto !important;
}
.news-card--compact .news-card-img {
  width: 148px !important;
  min-width: 148px !important;
  height: auto !important;
  min-height: 130px !important;
}
.news-card--compact .news-card-body {
  padding: 0.90rem 1.00rem 0.85rem !important;
}
.news-card--compact .news-card-title {
  font-size: 0.88rem !important;
  -webkit-line-clamp: 2 !important;
}
.news-card--compact .news-card-excerpt {
  font-size: 0.74rem !important;
  -webkit-line-clamp: 2 !important;
}
.news-card--compact .nc-cta {
  margin-top: 0.65rem !important;
  font-size: 0.70rem !important;
}
.news-card--compact .news-cat {
  font-size: 0.56rem !important;
  padding: 0.22rem 0.56rem !important;
  top: 8px !important;
  left: 8px !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 479.98px) {
  .news-card--compact {
    flex-direction: column !important;
  }
  .news-card--compact .news-card-img {
    width: 100% !important;
    min-width: 0 !important;
    height: 160px !important;
  }
}

/* ============================================================
   v13 — Timeline / Activity Section Redesign
   ============================================================ */

.section-timeline {
  background: #EDF2F9 !important;
  padding: 80px 0 84px !important;
}

/* Left column typography */
.tl-heading {
  font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  color: #091A38 !important;
  line-height: 1.18 !important;
  margin-bottom: 1.10rem !important;
}
.tl-lead {
  font-size: 0.90rem !important;
  color: #4A6280 !important;
  line-height: 1.82 !important;
  margin-bottom: 0 !important;
  max-width: 340px !important;
}

/* Step list reset */
.tl-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Step row */
.tl-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.10rem !important;
  padding: 1.05rem 0 !important;
  border-bottom: 1px solid rgba(26,90,144,0.12) !important;
  transition: background 0.22s !important;
}
.tl-step:first-child { padding-top: 0 !important; }
.tl-step:last-child  { border-bottom: none !important; padding-bottom: 0 !important; }

/* Icon pill */
.tl-step-icon {
  flex-shrink: 0 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  background: rgba(var(--sc, 26,90,144), 0.10) !important;
  border: 1.5px solid rgba(var(--sc, 26,90,144), 0.20) !important;
  color: rgb(var(--sc, 26,90,144)) !important;
  box-shadow: 0 2px 8px rgba(var(--sc, 26,90,144), 0.10) !important;
  transition: transform 0.24s, background 0.24s !important;
  margin-top: 2px !important;
}
.tl-step:hover .tl-step-icon {
  transform: translateY(-2px) scale(1.07) !important;
  background: rgba(var(--sc, 26,90,144), 0.18) !important;
}

/* Body */
.tl-step-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

/* Number tag */
.tl-step-num {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: rgba(26,90,144,0.45) !important;
  line-height: 1 !important;
  margin-bottom: 0.20rem !important;
  display: block !important;
}

/* Title */
.tl-step-title {
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  color: #0B1C38 !important;
  margin-bottom: 0.22rem !important;
  line-height: 1.30 !important;
}

/* Description */
.tl-step-desc {
  font-size: 0.78rem !important;
  color: #4A6280 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ============================================================
   v14 — News Cards (3-column uniform row)
   ============================================================ */

/* ── Section ──────────────────────────────────────────────── */
.section-news {
  background: #F4F8FD !important;
  padding: 76px 0 84px !important;
}

/* ── Card shell ───────────────────────────────────────────── */
.ncard {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid #C8D8EB !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(9,26,80,0.05), 0 8px 22px rgba(9,26,80,0.07) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.ncard:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 10px 28px rgba(26,90,144,0.14), 0 24px 48px rgba(9,26,80,0.10) !important;
  border-color: rgba(26,90,144,0.35) !important;
}

/* ── Image wrapper ────────────────────────────────────────── */
.ncard-img-wrap {
  position: relative !important;
  overflow: hidden !important;
  height: 210px !important;
  flex-shrink: 0 !important;
}
.ncard-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.86) brightness(0.95) !important;
  transition: transform 0.44s ease, filter 0.44s ease !important;
}
.ncard:hover .ncard-img {
  transform: scale(1.05) !important;
  filter: saturate(0.94) brightness(1.00) !important;
}

/* ── Category badge ───────────────────────────────────────── */
.ncard-cat {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.26rem 0.70rem !important;
  border-radius: 100px !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.ncard-cat[data-cat="tanlov"]  { background: rgba(26,90,144,0.90) !important; }
.ncard-cat[data-cat="aksel"]   { background: rgba(10,155,176,0.90) !important; }
.ncard-cat[data-cat="stajir"]  { background: rgba(107,68,192,0.90) !important; }
.ncard-cat[data-cat="loyiha"]  { background: rgba(14,142,70,0.90) !important; }
.ncard-cat[data-cat="ilmiy"]   { background: rgba(185,84,18,0.90) !important; }

/* ── Body ─────────────────────────────────────────────────── */
.ncard-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1.30rem 1.35rem 1.20rem !important;
}

/* ── Date line ────────────────────────────────────────────── */
.ncard-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #8AA3C0 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.60rem !important;
}
.ncard-date .bi { font-size: 0.66rem !important; }

/* ── Title ────────────────────────────────────────────────── */
.ncard-title {
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  color: #091A38 !important;
  line-height: 1.42 !important;
  margin-bottom: 0.65rem !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
}
.ncard-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.20s !important;
}
.ncard-title a:hover { color: #1A5A90 !important; }

/* ── Excerpt ──────────────────────────────────────────────── */
.ncard-excerpt {
  font-size: 0.79rem !important;
  color: #4E6A8A !important;
  line-height: 1.74 !important;
  margin: 0 0 auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-line-clamp: 3 !important;
}

/* ── Divider before CTA ───────────────────────────────────── */
.ncard-body::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  background: rgba(9,26,80,0.08) !important;
  margin: 1.10rem 0 0.85rem !important;
}

/* ── CTA link ─────────────────────────────────────────────── */
.ncard-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #1A5A90 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  transition: gap 0.20s, color 0.20s !important;
}
.ncard-cta svg { transition: transform 0.20s !important; flex-shrink: 0 !important; }
.ncard-cta:hover { color: #0E3F6C !important; gap: 0.54rem !important; }
.ncard-cta:hover svg { transform: translateX(3px) !important; }

/* ============================================================
   v15 — News · Partners · Footer polish
   ============================================================ */

/* ── Fix: ncard divider bug ───────────────────────────────── */
/* ::after on flex container renders AFTER ncard-cta, not before.
   Use border-top on the CTA itself instead.                  */
.ncard-body::after { display: none !important; }
.ncard-cta {
  border-top: 1px solid rgba(9,26,80,0.08) !important;
  padding-top: 0.82rem !important;
  margin-top: 1.05rem !important;
}

/* ── News section heading ─────────────────────────────────── */
.news-section-h2 {
  font-size: clamp(1.60rem,3vw,2.20rem) !important;
  font-weight: 800 !important;
  color: #091A38 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
}

/* ── section-news section bg ──────────────────────────────── */
.section-news {
  background: #F0F5FB !important;
  padding: 76px 0 84px !important;
}

/* ── Partners strip ───────────────────────────────────────── */
.section-partners {
  background: #ffffff !important;
  padding: 44px 0 48px !important;
  border-top: 1px solid #E2EAF4 !important;
  border-bottom: 1px solid #E2EAF4 !important;
}

/* Label above carousel */
.partners-strip-label {
  text-align: center !important;
  margin-bottom: 2.20rem !important;
}
.partners-strip-label span {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #9EB5CC !important;
  display: inline-block !important;
}

/* Partner logo cards */
.partner-logo-card {
  background: #F6F9FC !important;
  border: 1px solid #E2EAF4 !important;
  border-radius: 10px !important;
  padding: 1rem 1.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 68px !important;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s !important;
}
.partner-logo-card:hover {
  background: #ffffff !important;
  border-color: rgba(26,90,144,0.28) !important;
  box-shadow: 0 4px 14px rgba(26,90,144,0.09) !important;
}
.partner-logo-card img {
  max-height: 36px !important;
  max-width: 110px !important;
  object-fit: contain !important;
  filter: grayscale(1) opacity(0.55) !important;
  transition: filter 0.22s !important;
}
.partner-logo-card:hover img {
  filter: grayscale(0) opacity(0.90) !important;
}

/* ── Footer: logo fix (invert dark logo to white) ─────────── */
.footer-logo {
  height: 48px !important;
  filter: brightness(0) invert(1) opacity(0.88) !important;
  margin-bottom: 1.10rem !important;
  display: block !important;
}

/* Footer body padding */
.footer-body {
  padding: 64px 0 44px !important;
}

/* Footer desc */
.footer-desc {
  font-size: 0.855rem !important;
  line-height: 1.76 !important;
  color: rgba(172,205,248,0.60) !important;
  max-width: 300px !important;
  margin-bottom: 0 !important;
}

/* Footer column headings */
.footer-title {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(152,194,246,0.55) !important;
  margin-bottom: 1.30rem !important;
  padding-bottom: 0.65rem !important;
  border-bottom: 1px solid rgba(103,211,255,0.08) !important;
  display: block !important;
}

/* Footer nav links */
.footer-links a {
  font-size: 0.855rem !important;
  color: rgba(175,210,252,0.68) !important;
  line-height: 1 !important;
  display: block !important;
  padding: 0 !important;
  transition: color 0.20s, padding-left 0.20s !important;
}
.footer-links a:hover {
  color: rgba(220,240,255,0.96) !important;
  padding-left: 5px !important;
}
.footer-links li {
  margin-bottom: 0.68rem !important;
}

/* Footer contact items */
.footer-contact-item {
  font-size: 0.855rem !important;
  color: rgba(172,207,252,0.68) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  margin-bottom: 0.85rem !important;
  line-height: 1.58 !important;
}
.footer-contact-item i {
  color: #67D3FF !important;
  font-size: 0.88rem !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* Social icons */
.social-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(103,211,255,0.14) !important;
  background: rgba(8,26,74,0.22) !important;
  color: rgba(172,207,252,0.64) !important;
  font-size: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s !important;
}
.social-icon:hover {
  background: rgba(103,211,255,0.10) !important;
  border-color: rgba(103,211,255,0.40) !important;
  color: rgba(220,240,255,0.96) !important;
  transform: translateY(-3px) !important;
}
.footer-social {
  display: flex !important;
  gap: 0.55rem !important;
  margin-top: 1.25rem !important;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(103,211,255,0.07) !important;
  padding: 1.20rem 0 !important;
}
.footer-bottom-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  font-size: 0.775rem !important;
  color: rgba(138,180,230,0.40) !important;
}
.footer-bottom-sep {
  opacity: 0.35 !important;
}
.footer-bottom span {
  color: rgba(138,180,230,0.40) !important;
  font-size: 0.775rem !important;
}