/* ==========================================================================
       CIHP BRAND DESIGN SYSTEM & DESIGN TOKENS
       ========================================================================== */
    :root {
      /* Brand Color Palette - Official CIHP Color Palette */
      --primary-blue: #1A54A0;           /* CIHP Health Blue */
      --primary-blue-dark: #0B2F3A;      /* Dark Teal (Neutral Dark) */
      --primary-blue-light: #2C6EC7;     /* Light CIHP Health Blue */
      --secondary-green: #2F924A;        /* Forest Green */
      --secondary-green-dark: #1E6331;   /* Dark Forest Green */
      --secondary-green-light: #EBF7EE;  /* Light Forest Green Tint */
      --accent-lime: #8BED01;             /* Lime Green Accent */
      --accent-lime-light: #F4FCE6;       /* Light Lime Green Tint */
      --accent-ochre: #8BED01;           /* Legacy accent map to Lime Green */
      --accent-ochre-light: #F4FCE6;
      --accent-terracotta: #2F924A;

      /* Neutral Color Palette */
      --neutral-dark: #0B2F3A;           /* Dark Teal */
      --neutral-light: #F4F1EA;          /* Bleached Grey */
      --bg-deep: #F4F1EA;                /* Bleached Grey page background */
      --bg-surface: #ffffff;             /* White card surface */
      --bg-muted: #EAE6DD;               /* Subdued Bleached Grey */
      --bg-card: #ffffff;
      --bg-dark: #0B2F3A;                /* Dark Teal for hero/footer/dark sections */

      /* Typography Colors */
      --text-main: #0B2F3A;              /* Dark Teal high-contrast typography */
      --text-muted: #385966;             /* Muted Dark Teal */
      --text-light: #5A7B88;            /* Subdued Dark Teal */
      --text-white: #ffffff;

      /* Borders & Shadows */
      --border-color: rgba(26, 84, 160, 0.15);
      --border-hover: rgba(47, 146, 74, 0.35);
      --shadow-sm: 0 2px 8px rgba(11, 47, 58, 0.05);
      --shadow-md: 0 10px 25px rgba(26, 84, 160, 0.10);
      --shadow-lg: 0 20px 40px rgba(11, 47, 58, 0.15);

      /* Radii */
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 18px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-deep);
      color: var(--text-main);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      background-image:
        radial-gradient(circle at 5% 5%, rgba(30, 51, 136, 0.03) 0%, transparent 35%),
        radial-gradient(circle at 95% 95%, rgba(41, 123, 71, 0.03) 0%, transparent 35%);
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
    }

    /* Container Utility */
    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Buttons */
    .btn-primary {
      background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light));
      color: #ffffff;
      padding: 14px 28px;
      border-radius: var(--radius-sm);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(30, 51, 136, 0.22);
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(30, 51, 136, 0.35);
      background: linear-gradient(135deg, #162668, var(--primary-blue));
    }

    .btn-secondary {
      background: #ffffff;
      color: var(--primary-blue);
      border: 2px solid var(--primary-blue);
      padding: 14px 28px;
      border-radius: var(--radius-sm);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .btn-secondary:hover {
      background: rgba(30, 51, 136, 0.06);
      transform: translateY(-2px);
    }

    .btn-emerald {
      background: var(--secondary-green);
      color: #ffffff;
      padding: 14px 28px;
      border-radius: var(--radius-sm);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(41, 123, 71, 0.25);
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: none;
      cursor: pointer;
    }

    .btn-emerald:hover {
      background: var(--secondary-green-dark);
      transform: translateY(-2px);
    }

    /* Section Typography */
    section {
      padding: 90px 0;
      border-bottom: 1px solid var(--border-color);
      position: relative;
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--secondary-green);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      background: var(--secondary-green-light);
      padding: 4px 12px;
      border-radius: 50px;
    }

    .section-title {
      font-size: clamp(2rem, 3.8vw, 2.7rem);
      font-weight: 900;
      color: var(--primary-blue-dark);
      letter-spacing: -0.025em;
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .section-desc {
      font-size: 1.1rem;
      color: var(--text-muted);
      max-width: 820px;
      margin-bottom: 44px;
      line-height: 1.7;
    }

    /* Technical Publications Modal Styling */
    .publications-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(9, 15, 42, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 100000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .publications-modal-overlay.active {
      display: flex;
    }

    .publications-modal-container {
      background: #ffffff;
      border-radius: var(--radius-lg);
      max-width: 960px;
      width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(30, 51, 136, 0.2);
      padding: 40px;
      position: relative;
    }

    .pub-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 2px solid #f1f5f9;
    }

    .pub-modal-eyebrow {
      color: var(--secondary-green);
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .pub-modal-title {
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--primary-blue-dark);
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .pub-modal-sub {
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .pub-modal-close-btn {
      background: var(--neutral-light);
      border: none;
      font-size: 1.8rem;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .pub-modal-close-btn:hover {
      background: var(--bg-muted);
      color: var(--neutral-dark);
    }

    .pub-modal-filter-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .pub-filter-btn {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pub-filter-btn:hover,
    .pub-filter-btn.active {
      background: var(--primary-blue);
      color: #ffffff;
      border-color: var(--primary-blue);
    }

    .pub-modal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 768px) {
      .pub-modal-grid {
        grid-template-columns: 1fr;
      }

      .publications-modal-container {
        padding: 24px;
      }
    }

    .pub-item-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .pub-item-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(26, 84, 160, 0.08);
      border-color: rgba(26, 84, 160, 0.3);
    }

    .pub-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .pub-type-tag {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
    }

    .tag-journal {
      background: rgba(26, 84, 160, 0.12);
      color: var(--primary-blue);
    }

    .tag-brief {
      background: rgba(47, 146, 74, 0.12);
      color: var(--secondary-green);
    }

    .tag-framework {
      background: rgba(139, 237, 1, 0.18);
      color: var(--neutral-dark);
    }

    .tag-tech {
      background: rgba(11, 47, 58, 0.12);
      color: var(--neutral-dark);
    }

    .pub-doi {
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    .pub-card-title {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--primary-blue-dark);
      line-height: 1.35;
      margin-bottom: 10px;
    }

    .pub-card-abstract {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 18px;
    }

    .pub-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      border-top: 1px solid #e2e8f0;
      font-size: 0.8rem;
    }

    .pub-authors {
      color: #64748b;
      font-weight: 600;
    }

    .pub-download-btn {
      background: var(--secondary-green);
      color: #ffffff;
      text-decoration: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.8rem;
      transition: background 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .pub-download-btn:hover {
      background: var(--secondary-green-dark);
    }

    /* ==========================================================================
       1. NAVIGATION BAR (BLENDED OVERLAY & GLASSMORPHISM ON SCROLL)
       ========================================================================== */

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(180deg, rgba(9, 15, 42, 0.88) 0%, rgba(9, 15, 42, 0.4) 65%, transparent 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 44px;
      z-index: 10000;
      transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, top 0.3s ease;
    }

    .navbar.scrolled {
      top: 0;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 3px solid var(--primary-blue);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      padding: 12px 44px;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 16px;
      text-decoration: none;
    }

    .brand-logo img {
      height: 48px;
      display: block;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    }

    .presence-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 0.76rem;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.04em;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .nav-links {
      display: flex;
      gap: 22px;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      color: #ffffff;
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 600;
      transition: color 0.25s ease;
      padding: 6px 0;
      position: relative;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: #4ade80;
      font-weight: 700;
      text-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #4ade80;
      transition: width 0.25s ease;
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }

    .nav-links a.btn-nav {
      background: var(--secondary-green);
      color: #ffffff;
      padding: 10px 22px;
      border-radius: 4px;
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 4px 12px rgba(47, 146, 74, 0.35);
      text-shadow: none;
    }

    .nav-links a.btn-nav::after {
      display: none;
    }

    .nav-links a.btn-nav:hover {
      background: var(--secondary-green-dark);
      color: #ffffff;
      transform: translateY(-2px);
    }

    /* Mobile Nav Hamburger */
    .mobile-menu-toggle {
      display: none;
      font-size: 1.3rem;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle.active {
      background: var(--secondary-green);
      border-color: #4ade80;
      color: #ffffff;
      box-shadow: 0 0 16px rgba(74, 222, 128, 0.4);
    }

    /* ==========================================================================
       2. FULL-SCREEN HERO STORYTELLING SLIDER (100vw x 100vh)
       ========================================================================== */
    .hero-slider-section {
      position: relative;
      width: 100vw;
      height: 100vh;
      min-height: 100vh;
      min-height: 100dvh;
      max-height: none;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--bg-dark);
      color: #ffffff;
      margin: 0;
      padding: 0;
    }

    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
      z-index: 1;
      display: flex;
      align-items: center;
    }

    .hero-slide.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      z-index: 2;
    }

    .hero-slide-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.85) contrast(1.05);
      transform: scale(1.08);
      transition: transform 7.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .hero-slide.active .hero-slide-bg {
      transform: scale(1);
    }

    .hero-slide-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(90deg, rgba(9, 15, 42, 0.78) 0%, rgba(9, 15, 42, 0.42) 55%, rgba(9, 15, 42, 0.2) 100%),
        linear-gradient(180deg, rgba(9, 15, 42, 0.5) 0%, transparent 35%, rgba(9, 15, 42, 0.6) 100%);
      z-index: 2;
    }

    .hero-slide-content {
      position: relative;
      z-index: 3;
      max-width: 860px;
      padding: 120px 0 100px;
    }

    /* Vertical Text Entrance Animations */
    .hero-slide-eyebrow,
    .hero-slide-title,
    .hero-slide-desc,
    .hero-slide-cta-group {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-slide.active .hero-slide-eyebrow {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.25s;
    }

    .hero-slide.active .hero-slide-title {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.4s;
    }

    .hero-slide.active .hero-slide-desc {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.55s;
    }

    .hero-slide.active .hero-slide-cta-group {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.7s;
    }

    .hero-slide-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #38bdf8;
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 0.84rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 22px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .hero-slide-title {
      font-size: clamp(2.3rem, 4.8vw, 4.2rem);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
      letter-spacing: -0.035em;
      margin-bottom: 22px;
      text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
    }

    .hero-slide-title .accent-emerald {
      color: #4ade80;
      text-shadow: 0 0 20px rgba(74, 222, 128, 0.35);
    }

    .hero-slide-desc {
      font-size: 1.18rem;
      color: #e2e8f0;
      line-height: 1.7;
      margin-bottom: 34px;
      max-width: 780px;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    }

    .hero-slide-cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    /* Floating Slider Controls Bar (ECEWS Inspired) */
    .slider-controls-bar {
      position: absolute;
      bottom: 32px;
      left: 0;
      width: 100%;
      z-index: 10;
      pointer-events: auto;
    }

    .slider-controls-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      background: rgba(9, 15, 42, 0.78);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 60px;
      padding: 10px 24px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }

    .slider-dots-container {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .slider-dots-container::-webkit-scrollbar {
      display: none;
    }

    .slider-dot-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      cursor: pointer;
      padding: 6px 14px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .slider-dot-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .slider-dot-item .dot-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 800;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .slider-dot-item .dot-label {
      font-size: 0.8rem;
      font-weight: 700;
      color: #cbd5e1;
      white-space: nowrap;
      transition: color 0.3s ease;
    }

    .slider-dot-item.active .dot-num,
    .slider-dot-item.active .dot-label {
      color: #4ade80;
    }

    .dot-progress {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      overflow: hidden;
      margin-top: 2px;
    }

    .dot-progress-fill {
      width: 0%;
      height: 100%;
      background: #4ade80;
      box-shadow: 0 0 8px #4ade80;
      transition: width 0.1s linear;
    }

    .slider-dot-item.active .dot-progress-fill {
      width: 100%;
    }

    .slider-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .slider-action-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .slider-action-btn:hover {
      background: #297b47;
      border-color: #4ade80;
      color: #ffffff;
      transform: scale(1.08);
      box-shadow: 0 0 16px rgba(74, 222, 128, 0.4);
    }

    @media (max-width: 768px) {
      .navbar {
        padding: 12px 20px;
      }

      .navbar.scrolled {
        padding: 10px 20px;
      }

      .presence-badge {
        display: none;
      }

      .hero-slide-content {
        padding: 100px 0 120px;
      }

      .hero-slide-title {
        font-size: clamp(1.9rem, 7vw, 2.8rem);
      }

      .slider-controls-inner {
        padding: 8px 16px;
        border-radius: 30px;
      }

      .slider-dot-item .dot-label {
        display: none;
      }

      .slider-dot-item {
        padding: 4px 8px;
      }

      .slider-controls-bar {
        bottom: 20px;
      }
    }

    /* ==========================================================================
       HERO IMPACT STATS BAR (WITH SMOOTH COUNTERS)
       ========================================================================== */
    /* Glassmorphic Stats Section */
    .hero-stats-banner-section {
      background-color: #090f2a;
      background-image:
        radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
      padding: 44px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 5;
    }

    .stats-banner-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .stat-banner-card {
      position: relative;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 18px;
      padding: 28px 24px;
      color: #ffffff;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    .stat-banner-card:hover {
      transform: translateY(-6px);
    }

    /* Card 1: Glass Emerald */
    .stat-banner-card.glass-card-emerald {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1px solid rgba(16, 185, 129, 0.35);
    }

    .stat-banner-card.glass-card-emerald:hover {
      border-color: rgba(52, 211, 153, 0.7);
      box-shadow: 0 20px 45px rgba(16, 185, 129, 0.25), 0 0 20px rgba(16, 185, 129, 0.3);
    }

    .glass-card-emerald .stat-banner-number {
      color: #34d399;
      text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
    }

    .glass-card-emerald .stat-card-badge {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.35);
    }

    .glass-card-emerald .stat-card-icon {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399;
    }

    /* Card 2: Glass Royal Blue */
    .stat-banner-card.glass-card-blue {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1px solid rgba(37, 99, 235, 0.35);
    }

    .stat-banner-card.glass-card-blue:hover {
      border-color: rgba(96, 165, 250, 0.7);
      box-shadow: 0 20px 45px rgba(37, 99, 235, 0.25), 0 0 20px rgba(37, 99, 235, 0.3);
    }

    .glass-card-blue .stat-banner-number {
      color: #60a5fa;
      text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
    }

    .glass-card-blue .stat-card-badge {
      background: rgba(37, 99, 235, 0.2);
      color: #60a5fa;
      border: 1px solid rgba(37, 99, 235, 0.35);
    }

    .glass-card-blue .stat-card-icon {
      background: rgba(37, 99, 235, 0.2);
      color: #60a5fa;
    }

    /* Card 3: Glass Cyan */
    .stat-banner-card.glass-card-cyan {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1px solid rgba(14, 165, 233, 0.35);
    }

    .stat-banner-card.glass-card-cyan:hover {
      border-color: rgba(56, 189, 248, 0.7);
      box-shadow: 0 20px 45px rgba(14, 165, 233, 0.25), 0 0 20px rgba(14, 165, 233, 0.3);
    }

    .glass-card-cyan .stat-banner-number {
      color: #38bdf8;
      text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
    }

    .glass-card-cyan .stat-card-badge {
      background: rgba(14, 165, 233, 0.2);
      color: #38bdf8;
      border: 1px solid rgba(14, 165, 233, 0.35);
    }

    .glass-card-cyan .stat-card-icon {
      background: rgba(14, 165, 233, 0.2);
      color: #38bdf8;
    }

    /* Card 4: Glass Amber */
    .stat-banner-card.glass-card-amber {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1px solid rgba(245, 158, 11, 0.35);
    }

    .stat-banner-card.glass-card-amber:hover {
      border-color: rgba(251, 191, 36, 0.7);
      box-shadow: 0 20px 45px rgba(245, 158, 11, 0.25), 0 0 20px rgba(245, 158, 11, 0.3);
    }

    .glass-card-amber .stat-banner-number {
      color: #fbbf24;
      text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }

    .glass-card-amber .stat-card-badge {
      background: rgba(245, 158, 11, 0.2);
      color: #fbbf24;
      border: 1px solid rgba(245, 158, 11, 0.35);
    }

    .glass-card-amber .stat-card-icon {
      background: rgba(245, 158, 11, 0.2);
      color: #fbbf24;
    }

    .stat-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .stat-card-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
    }

    .stat-card-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 4px 10px;
      border-radius: 50px;
    }

    .stat-banner-number {
      font-family: 'JetBrains Mono', monospace;
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-banner-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.85);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1.3;
    }

    @media (max-width: 992px) {
      .stats-banner-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 576px) {
      .stats-banner-grid {
        grid-template-columns: 1fr;
      }
    }

    .partner-marquee-section {
      padding: 30px 0;
      background: var(--bg-surface);
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    .partner-marquee-header {
      text-align: center;
      margin-bottom: 12px;
    }

    .partner-marquee-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(26, 84, 160, 0.08);
      border: 1px solid rgba(26, 84, 160, 0.18);
      color: var(--primary-blue);
      padding: 6px 18px;
      border-radius: 50px;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 10px;
    }

    .partner-marquee-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 0;
    }

    .partner-marquee-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 8px 0;
      margin-top: 10px;
      user-select: none;
      mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    }

    .partner-marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      gap: 28px;
      animation: partnerMarqueeScroll 30s linear infinite;
    }

    .partner-marquee-container:hover .partner-marquee-track,
    .partner-marquee-track:hover {
      animation-play-state: paused;
    }

    .partner-logo-card {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1.5px solid rgba(26, 84, 160, 0.12);
      border-radius: 14px;
      padding: 14px 28px;
      min-width: 180px;
      height: 84px;
      box-shadow: 0 4px 18px rgba(11, 47, 58, 0.05);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      flex-shrink: 0;
    }

    .partner-logo-card img {
      max-height: 52px;
      max-width: 135px;
      width: auto;
      height: auto;
      display: block;
      object-fit: contain;
      filter: grayscale(15%) opacity(0.92);
      transition: all 0.35s ease;
    }

    .partner-logo-card:hover {
      transform: translateY(-5px) scale(1.03);
      background: #ffffff;
      border-color: var(--secondary-green);
      box-shadow: 0 12px 30px rgba(47, 146, 74, 0.18);
    }

    .partner-logo-card:hover img {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.05);
    }

    @keyframes partnerMarqueeScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .partner-logo-pill {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      padding: 12px 26px;
      border-radius: 8px;
      font-size: 0.98rem;
      font-weight: 800;
      color: #0f172a;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
      transition: all 0.3s ease;
    }

    .partner-logo-pill:hover {
      border-color: var(--secondary-green);
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(47, 146, 74, 0.15);
    }

    .partner-logo-icon {
      width: 38px;
      height: 38px;
      border-radius: 6px;
      background: var(--secondary-green-light);
      color: var(--secondary-green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }

    /* ==========================================================================
       4. INTERACTIVE FOOTPRINT & PAN-AFRICAN MAP SECTION
       ========================================================================== */
    .map-footprint-section {
      background: var(--bg-surface);
    }

    /* About Section 2-Column Grid with Map Graphic */
    .about-hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
      margin-bottom: 50px;
    }

    .about-graphic-card {
      position: relative;
    }

    .about-graphic-wrapper {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 20px;
      padding: 24px;
      border: 1px solid rgba(30, 51, 136, 0.12);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .about-graphic-wrapper:hover {
      transform: translateY(-6px);
      box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
      border-color: rgba(41, 123, 71, 0.35);
    }

    .about-graphic-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary-blue);
      background: rgba(26, 84, 160, 0.08);
      padding: 6px 14px;
      border-radius: 50px;
      margin-bottom: 16px;
    }

    .about-reach-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
      object-fit: contain;
    }

    .about-graphic-footer {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .foot-hub-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--secondary-green);
      background: var(--secondary-green-light);
      padding: 4px 12px;
      border-radius: 50px;
    }

    @media (max-width: 992px) {
      .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }

    .footprint-controls {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
    }

    .tab-btn {
      padding: 10px 24px;
      border-radius: 50px;
      border: 1px solid var(--border-color);
      background: var(--bg-muted);
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .tab-btn.active {
      background: var(--primary-blue);
      color: #ffffff;
      border-color: var(--primary-blue);
      box-shadow: 0 4px 12px rgba(30, 51, 136, 0.2);
    }

    .footprint-display-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
    }

    .map-interactive-card {
      background: linear-gradient(135deg, var(--primary-blue) 0%, var(--neutral-dark) 100%);
      border-radius: var(--radius-lg);
      padding: 36px;
      color: #ffffff;
      box-shadow: var(--shadow-md);
      position: relative;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .map-tag {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fef3c7;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 50px;
      display: inline-block;
      width: fit-content;
      margin-bottom: 20px;
    }

    .map-interactive-card h3 {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .map-interactive-card p {
      color: #cbd5e1;
      font-size: 0.98rem;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .states-pills-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
      padding-right: 8px;
    }

    .state-pill {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      padding: 6px 14px;
      border-radius: var(--radius-sm);
      font-size: 0.82rem;
      font-weight: 600;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .state-pill:hover,
    .state-pill.active {
      background: var(--secondary-green);
      border-color: var(--secondary-green);
      transform: translateY(-1px);
    }

    .footprint-details-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 36px;
      box-shadow: var(--shadow-sm);
    }

    .footprint-details-card h4 {
      font-size: 1.35rem;
      color: var(--primary-blue-dark);
      font-weight: 800;
      margin-bottom: 16px;
    }

    .footprint-stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px dashed var(--border-color);
    }

    .footprint-stat-row:last-child {
      border-bottom: none;
    }

    .stat-row-label {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .stat-row-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--primary-blue-dark);
    }

    /* ==========================================================================
       5. INSTITUTIONAL IDENTITY & C-I-H-P VALUES MATRIX
       ========================================================================== */
    /* Option 3: Full-width End-to-End Photographic Backdrop Banner (Vision & Mission) */
    .mv-backdrop-banner {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      margin-top: 48px;
      margin-bottom: 50px;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
      background: #090f2a;
      min-height: 500px;
      display: flex;
      align-items: center;
      padding: 60px 0;
    }

    .mv-backdrop-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.65) contrast(1.1);
      transition: transform 8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .mv-backdrop-banner:hover .mv-backdrop-img {
      transform: scale(1.05);
    }

    .mv-backdrop-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(circle at 50% 50%, rgba(30, 51, 136, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, rgba(9, 15, 42, 0.88) 0%, rgba(15, 23, 42, 0.72) 50%, rgba(9, 15, 42, 0.9) 100%);
      z-index: 1;
    }

    .mv-glass-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      width: 100%;
    }

    .mv-glass-card {
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 20px;
      padding: 40px 32px;
      color: #ffffff;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .mv-glass-card:hover {
      background: rgba(15, 23, 42, 0.84);
      border-color: rgba(74, 222, 128, 0.5);
      transform: translateY(-8px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 25px rgba(74, 222, 128, 0.2);
    }

    .mv-glass-card.vision-glass {
      border-top: 4px solid #38bdf8;
    }

    .mv-glass-card.mission-glass {
      border-top: 4px solid #4ade80;
    }

    .mv-glass-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .mv-glass-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 50px;
    }

    .vision-glass .mv-glass-tag {
      background: rgba(56, 189, 248, 0.2);
      border: 1px solid rgba(56, 189, 248, 0.4);
      color: #38bdf8;
    }

    .mission-glass .mv-glass-tag {
      background: rgba(74, 222, 128, 0.2);
      border: 1px solid rgba(74, 222, 128, 0.4);
      color: #4ade80;
    }

    .mv-glass-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: #ffffff;
    }

    .mv-glass-card h3 {
      font-size: 2rem;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.2;
      margin-bottom: 14px;
      letter-spacing: -0.02em;
    }

    .mv-glass-card p {
      font-size: 1.05rem;
      color: #e2e8f0;
      line-height: 1.65;
      margin-bottom: 28px;
      font-weight: 400;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    /* Word-by-Word Typewriter Effect for Vision & Mission */
    .typewriter-text {
      min-height: 3.8em;
      line-height: 1.65;
      position: relative;
    }

    .typewriter-cursor {
      display: inline-block;
      width: 3px;
      height: 1.15em;
      background-color: #4ade80;
      margin-left: 4px;
      vertical-align: sub;
      border-radius: 1px;
      box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
      animation: typewriterCursorBlink 0.75s infinite ease-in-out;
    }

    @keyframes typewriterCursorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .mv-glass-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .mv-glass-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.22);
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #ffffff;
      transition: all 0.25s ease;
    }

    .mv-glass-pill i {
      color: #4ade80;
    }

    .mv-glass-card:hover .mv-glass-pill {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
    }

    @media (max-width: 992px) {
      .mv-glass-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .mv-backdrop-banner {
        padding: 30px 20px;
      }
    }

    /* Core Values Matrix */
    /* ==========================================================================
       CORE VALUES SECTION (MATCHING PHOTO LAYOUT)
       ========================================================================== */
    .core-values-header {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 50px;
      margin-top: 40px;
    }

    .core-values-title {
      font-size: clamp(2.4rem, 4.5vw, 3.6rem);
      font-weight: 800;
      color: #1e3a5f;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .core-values-line {
      flex: 1;
      height: 2px;
      background: rgba(30, 58, 95, 0.2);
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      margin-top: 20px;
      margin-bottom: 60px;
      align-items: flex-start;
    }

    .value-card {
      border-radius: 20px;
      padding: 48px 24px 52px;
      box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: #ffffff;
      position: relative;
    }

    .value-card.card-teal {
      background: #1c455d;
    }

    .value-card.card-blue {
      background: #2563eb;
    }

    .value-card.card-offset {
      transform: translateY(36px);
    }

    .value-card:hover {
      box-shadow: 0 22px 50px rgba(15, 23, 42, 0.25);
    }

    .value-card.card-offset:hover {
      transform: translateY(24px);
    }

    .value-card.card-teal:hover {
      transform: translateY(-8px);
    }

    .value-card-icon {
      font-size: 3.4rem;
      color: #ffffff;
      margin-bottom: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70px;
      width: 70px;
    }

    .value-card-icon svg {
      width: 56px;
      height: 56px;
      stroke: #ffffff;
    }

    .value-card h4 {
      font-size: 1.3rem;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.3;
      margin-bottom: 20px;
      text-align: center;
    }

    .value-card p {
      color: rgba(255, 255, 255, 0.92);
      font-size: 0.96rem;
      line-height: 1.65;
      font-weight: 400;
      text-align: center;
    }

    @media (max-width: 1024px) {
      .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .value-card.card-offset {
        transform: translateY(0);
      }

      .value-card.card-offset:hover,
      .value-card.card-teal:hover {
        transform: translateY(-6px);
      }
    }

    @media (max-width: 640px) {
      .values-grid {
        grid-template-columns: 1fr;
      }

      .core-values-title {
        font-size: 2.2rem;
      }
    }

    /* ==========================================================================
       6. CORE TECHNICAL CAPABILITIES (WHAT WE DO)
       ========================================================================== */
    .technical-domains-section {
      background: var(--bg-surface);
    }

    .technical-tabs-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 36px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 16px;
    }

    .tech-tab-btn {
      padding: 12px 20px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tech-tab-btn:hover {
      color: var(--primary-blue);
      background: rgba(30, 51, 136, 0.05);
    }

    .tech-tab-btn.active {
      background: var(--primary-blue);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(30, 51, 136, 0.25);
    }

    .tech-content-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 44px;
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 40px;
      align-items: center;
    }

    .tech-content-left h3 {
      font-size: 1.8rem;
      color: var(--primary-blue-dark);
      font-weight: 800;
      margin-bottom: 16px;
    }

    .tech-content-left p {
      color: var(--text-muted);
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .tech-feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 30px;
    }

    .tech-feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      color: var(--text-main);
      font-weight: 500;
    }

    .tech-feature-list li i {
      color: var(--secondary-green);
      font-size: 1.1rem;
      margin-top: 3px;
    }

    .tech-content-right img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
    }

    /* ==========================================================================
       7. EVIDENCE & IMPACT REPOSITORY (FLAGSHIP PROJECTS)
       ========================================================================== */
    /* ==========================================================================
       7. EVIDENCE & IMPACT REPOSITORY (EDITORIAL NUMBERED STACKED LIST)
       ========================================================================== */
    .impact-projects-section {
      background: var(--bg-surface);
      padding: 90px 0;
    }

    .impact-split-layout {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 60px;
      align-items: flex-start;
    }

    .impact-sidebar-sticky {
      position: sticky;
      top: 100px;
    }

    .editorial-main-title {
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--primary-blue);
      font-family: 'Outfit', sans-serif;
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
      text-transform: uppercase;
    }

    .editorial-desc {
      font-size: 1.02rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 30px;
    }

    .editorial-filter-bar {
      margin-bottom: 32px;
    }

    .filter-pills-group {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 12px;
    }

    .filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      outline: none;
    }

    /* All Programs Button Style */
    .btn-filter-all {
      background: #f1f5f9;
      color: var(--primary-blue);
      border: 1.5px solid rgba(26, 84, 160, 0.2);
    }

    .btn-filter-all:hover {
      background: #e2e8f0;
      border-color: var(--primary-blue);
      transform: translateY(-2px);
    }

    .btn-filter-all.active {
      background: linear-gradient(135deg, var(--primary-blue) 0%, var(--neutral-dark) 100%);
      color: #ffffff;
      border-color: var(--primary-blue);
      box-shadow: 0 6px 20px rgba(26, 84, 160, 0.35);
      transform: translateY(-2px);
    }

    /* Active / Ongoing Button Style */
    .btn-filter-ongoing {
      background: rgba(47, 146, 74, 0.08);
      color: var(--secondary-green);
      border: 1.5px solid rgba(47, 146, 74, 0.25);
    }

    .btn-filter-ongoing:hover {
      background: rgba(47, 146, 74, 0.16);
      border-color: var(--secondary-green);
      transform: translateY(-2px);
    }

    .btn-filter-ongoing.active {
      background: linear-gradient(135deg, var(--secondary-green) 0%, #15803d 100%);
      color: #ffffff;
      border-color: var(--secondary-green);
      box-shadow: 0 6px 20px rgba(47, 146, 74, 0.4);
      transform: translateY(-2px);
    }

    /* Completed Button Style */
    .btn-filter-completed {
      background: rgba(2, 132, 199, 0.08);
      color: #0284c7;
      border: 1.5px solid rgba(2, 132, 199, 0.25);
    }

    .btn-filter-completed:hover {
      background: rgba(2, 132, 199, 0.16);
      border-color: #0284c7;
      transform: translateY(-2px);
    }

    .btn-filter-completed.active {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
      transform: translateY(-2px);
    }

    .editorial-learn-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary-blue);
      text-decoration: none;
      border-bottom: 2px solid var(--primary-blue);
      padding-bottom: 4px;
      transition: all 0.3s ease;
    }

    .editorial-learn-btn:hover {
      color: var(--secondary-green);
      border-color: var(--secondary-green);
      transform: translateX(4px);
    }

    .impact-rows-container {
      display: flex;
      flex-direction: column;
    }

    .editorial-project-row {
      display: grid;
      grid-template-columns: 60px 1fr 200px 42px;
      gap: 20px;
      align-items: center;
      padding: 28px 20px;
      border-bottom: 1px solid rgba(30, 51, 136, 0.12);
      transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      cursor: pointer;
      border-radius: 18px;
      background: transparent;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }

    .editorial-project-row:first-child {
      border-top: 1px solid rgba(30, 51, 136, 0.12);
    }

    /* Left Morphing Glowing Indicator Bar */
    .editorial-project-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 0%;
      background: linear-gradient(180deg, var(--primary-blue) 0%, var(--secondary-green) 100%);
      border-radius: 4px;
      opacity: 0;
      transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }

    /* MORPHED GLASS HOVER & ACTIVE STATE */
    .editorial-project-row:hover,
    .editorial-project-row.active {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border-color: rgba(41, 123, 71, 0.35);
      box-shadow:
        0 20px 45px rgba(30, 51, 136, 0.12),
        0 4px 12px rgba(41, 123, 71, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(30, 51, 136, 0.06);
      transform: translateY(-3px) scale(1.008);
      border-radius: 22px 14px 22px 14px;
    }

    .editorial-project-row:hover::before,
    .editorial-project-row.active::before {
      height: 70%;
      opacity: 1;
    }

    .row-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 2.4rem;
      font-weight: 800;
      color: var(--primary-blue);
      opacity: 0.35;
      line-height: 1;
      transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }

    .editorial-project-row:hover .row-num,
    .editorial-project-row.active .row-num {
      opacity: 1;
      color: var(--secondary-green);
      transform: scale(1.05);
    }

    .row-text-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .row-header-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .row-header-meta h3 {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary-blue);
      font-family: 'Outfit', sans-serif;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      margin: 0;
    }

    .row-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 50px;
    }

    .badge-ongoing {
      background: rgba(47, 146, 74, 0.12);
      color: var(--secondary-green);
      border: 1px solid rgba(47, 146, 74, 0.3);
    }

    .badge-completed {
      background: rgba(26, 84, 160, 0.1);
      color: var(--primary-blue);
      border: 1px solid rgba(30, 51, 136, 0.25);
    }

    .row-summary {
      font-size: 0.95rem;
      color: #475569;
      line-height: 1.6;
      margin: 0;
    }

    .row-meta-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }

    .meta-tag {
      font-size: 0.78rem;
      color: var(--primary-blue);
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .meta-tag i {
      color: var(--secondary-green);
      font-size: 0.75rem;
    }

    .row-thumb-card {
      width: 200px;
      height: 125px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
      border: 1px solid rgba(30, 51, 136, 0.1);
      position: relative;
      flex-shrink: 0;
    }

    .row-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%) opacity(0.65);
      will-change: filter, transform;
      transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .editorial-project-row:hover .row-thumb-img,
    .editorial-project-row.active .row-thumb-img {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.08);
    }

    .row-action-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(26, 84, 160, 0.06);
      color: var(--primary-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .editorial-project-row:hover .row-action-icon,
    .editorial-project-row.active .row-action-icon {
      background: var(--secondary-green);
      color: #ffffff;
      transform: translateX(4px);
      box-shadow: 0 4px 14px rgba(41, 123, 71, 0.3);
    }

    @media (max-width: 1024px) {
      .impact-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .impact-sidebar-sticky {
        position: relative;
        top: 0;
      }

      .editorial-project-row {
        grid-template-columns: 50px 1fr 160px 36px;
        gap: 16px;
      }

      .row-thumb-card {
        width: 160px;
        height: 110px;
      }
    }

    @media (max-width: 768px) {
      .editorial-project-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 12px;
      }

      .row-action-icon {
        display: none;
      }

      .row-thumb-card {
        width: 100%;
        height: 200px;
        order: 3;
      }
    }

    /* ==========================================================================
       8. OUR INNOVATIONS & KNOWLEDGE PRODUCTS (FUTURISTIC GLASS SHOWCASE)
       ========================================================================== */
    .innovations-section {
      background: linear-gradient(165deg, #070d19 0%, #0c162c 50%, #121e3d 100%);
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .innovations-section::before {
      content: '';
      position: absolute;
      top: -100px;
      left: 10%;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(41, 123, 71, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .innovations-section::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: 10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(30, 51, 136, 0.28) 0%, transparent 70%);
      pointer-events: none;
    }

    .innovations-section .section-eyebrow {
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.25);
    }

    .innovations-section .section-title {
      color: #ffffff;
    }

    .innovations-section .section-desc {
      color: #94a3b8;
    }

    /* 3D Focus Expansion Carousel Stage */
    .innovations-carousel-stage {
      position: relative;
      width: 100%;
      padding: 40px 0 20px 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .innovations-viewport {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 60px 0;
    }

    .innovations-track {
      display: flex;
      align-items: center;
      gap: 36px;
      position: relative;
      left: 50%;
      width: max-content;
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }

    .innovations-track .innovation-card {
      width: 820px;
      max-width: 90vw;
      min-height: 420px;
      aspect-ratio: 2.05 / 1;
      flex-shrink: 0;
      opacity: 0.42;
      filter: blur(2px) grayscale(40%);
      transform: scale(0.86);
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.65s ease,
        filter 0.65s ease,
        background 0.65s ease,
        box-shadow 0.65s ease;
      cursor: pointer;
      border-radius: 28px;
      background: rgba(15, 23, 42, 0.82);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: row;
      /* Horizontal 2:1 Rectangle Layout */
      overflow: hidden;
      position: relative;
    }

    /* CENTER FOCUS ACTIVE CARD (INVERTED WHITE BACKGROUND & HIGH CONTRAST DARK TEXT) */
    .innovations-track .innovation-card.focus-active {
      opacity: 1;
      filter: blur(0px) grayscale(0%);
      transform: scale(1.08);
      z-index: 10;
      background: #ffffff !important;
      border-color: #ffffff !important;
      box-shadow: 0 35px 95px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 255, 255, 0.5);
    }

    .innovations-track .innovation-card.focus-active .innovation-card-overlay {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.35) 100%) !important;
    }

    .innovations-track .innovation-card.focus-active .innovation-header h3 {
      color: #1e3388 !important;
    }

    .innovations-track .innovation-card.focus-active .innovation-desc {
      color: #334155 !important;
    }

    .innovations-track .innovation-card.focus-active .innovation-metric-box {
      background: #f1f5f9 !important;
      border-color: rgba(30, 51, 136, 0.15) !important;
      color: #1e3388 !important;
    }

    .innovations-track .innovation-card.focus-active .innov-tag {
      background: #f8fafc !important;
      color: #1e3388 !important;
      border-color: rgba(30, 51, 136, 0.12) !important;
    }

    /* Floating Navigation Arrow Buttons */
    .innov-nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      cursor: pointer;
      z-index: 25;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .innov-nav-arrow:hover {
      background: #0284c7;
      border-color: #38bdf8;
      transform: translateY(-50%) scale(1.12);
      box-shadow: 0 0 24px rgba(56, 189, 248, 0.7);
    }

    .innov-nav-arrow.prev {
      left: 24px;
    }

    .innov-nav-arrow.next {
      right: 24px;
    }

    /* Pagination Indicator Dots */
    .innov-dots-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 36px;
      z-index: 20;
      padding: 10px 22px;
      border-radius: 50px;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .innov-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .innov-dot:hover {
      background: rgba(255, 255, 255, 0.6);
    }

    .innov-dot.active {
      width: 32px;
      border-radius: 20px;
      background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%);
      box-shadow: 0 0 14px rgba(56, 189, 248, 0.85);
    }

    /* Top Glowing Neon Accent Line Across Entire Top */
    .innov-glow-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      z-index: 15;
      transition: height 0.3s ease;
    }

    .glow-ayp {
      background: linear-gradient(90deg, #f43f5e 0%, #fb7185 100%);
      box-shadow: 0 0 15px rgba(244, 63, 94, 0.6);
    }

    .glow-srt {
      background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%);
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
    }

    .glow-pub {
      background: linear-gradient(90deg, #34d399 0%, #059669 100%);
      box-shadow: 0 0 15px rgba(52, 211, 153, 0.6);
    }

    .glow-candid {
      background: linear-gradient(90deg, #c084fc 0%, #7c3aed 100%);
      box-shadow: 0 0 15px rgba(192, 132, 252, 0.6);
    }

    /* LEFT SIDE: Innovation Details (57% width with ample padding) */
    .innovation-card-body {
      width: 57%;
      padding: 36px 32px 32px 36px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      order: 1;
      position: relative;
      z-index: 5;
    }

    /* RIGHT SIDE: Thumbnail Image Banner (43% width) */
    .innovation-card-banner {
      width: 43%;
      height: 100%;
      min-height: 100%;
      position: relative;
      overflow: hidden;
      order: 2;
      border-radius: 0 28px 28px 0;
    }

    .innovation-card-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .innovation-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.05) 100%);
    }

    .innovation-badge-floating {
      position: absolute;
      top: 18px;
      right: 18px;
      left: auto;
      padding: 6px 14px;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #ffffff;
      backdrop-filter: blur(12px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width: 860px) {
      .innovations-track .innovation-card {
        width: 90vw;
        aspect-ratio: auto;
        min-height: auto;
        flex-direction: column;
      }

      .innovation-card-body {
        width: 100%;
        order: 2;
        padding: 28px 22px;
      }

      .innovation-card-banner {
        width: 100%;
        height: 220px;
        order: 1;
        border-radius: 28px 28px 0 0;
      }
    }

    .card-badge-ayp {
      background: rgba(244, 63, 94, 0.85);
      border: 1px solid rgba(244, 63, 94, 0.4);
    }

    .card-badge-srt {
      background: rgba(2, 132, 199, 0.85);
      border: 1px solid rgba(56, 189, 248, 0.4);
    }

    .card-badge-pub {
      background: rgba(16, 185, 129, 0.85);
      border: 1px solid rgba(52, 211, 153, 0.4);
    }

    .card-badge-candid {
      background: rgba(124, 58, 237, 0.85);
      border: 1px solid rgba(192, 132, 252, 0.4);
    }

    .innovation-card-body {
      padding: 28px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
      position: relative;
    }

    .innovation-header h3 {
      font-size: 1.4rem;
      font-weight: 800;
      color: #ffffff;
      font-family: 'Outfit', sans-serif;
      margin-bottom: 4px;
      line-height: 1.25;
    }

    .innovation-subtitle {
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 12px;
    }

    .sub-ayp {
      color: #fb7185;
    }

    .sub-srt {
      color: #38bdf8;
    }

    .sub-pub {
      color: #34d399;
    }

    .sub-candid {
      color: #c084fc;
    }

    .innovation-desc {
      font-size: 0.92rem;
      color: #cbd5e1;
      line-height: 1.65;
      margin-bottom: 20px;
    }

    .innovation-metric-box {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #f8fafc;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      font-weight: 700;
      margin-bottom: 22px;
    }

    .innovation-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .innov-tag {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      color: #e2e8f0;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .innovation-card-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 13px 20px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 0.88rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: all 0.35s ease;
      color: #ffffff;
    }

    .btn-ayp {
      background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
      box-shadow: 0 4px 18px rgba(244, 63, 94, 0.35);
    }

    .btn-ayp:hover {
      box-shadow: 0 8px 25px rgba(244, 63, 94, 0.55);
      transform: translateY(-2px);
    }

    .btn-srt {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      box-shadow: 0 4px 18px rgba(2, 132, 199, 0.35);
    }

    .btn-srt:hover {
      box-shadow: 0 8px 25px rgba(2, 132, 199, 0.55);
      transform: translateY(-2px);
    }

    .btn-pub {
      background: linear-gradient(135deg, #10b981 0%, #047857 100%);
      box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
    }

    .btn-pub:hover {
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.55);
      transform: translateY(-2px);
    }

    .btn-candid {
      background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
      box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
    }

    .btn-candid:hover {
      box-shadow: 0 8px 25px rgba(124, 58, 237, 0.55);
      transform: translateY(-2px);
    }

    .governance-text h4 {
      font-size: 1.15rem;
      color: #78350f;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .governance-text p {
      color: #92400e;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* ==========================================================================
       9. NEWS, THOUGHT LEADERSHIP & PRESS CENTER
       ========================================================================== */
    .news-section {
      background: var(--bg-deep);
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 32px;
    }

    .feature-news-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
    }

    .feature-news-card:hover {
      box-shadow: var(--shadow-md);
    }

    .feature-news-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }

    .feature-news-content {
      padding: 32px;
    }

    .news-date {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: var(--secondary-green);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: block;
    }

    .feature-news-content h3 {
      font-size: 1.45rem;
      color: var(--primary-blue-dark);
      font-weight: 800;
      margin-bottom: 12px;
      line-height: 1.35;
    }

    .feature-news-content p {
      color: var(--text-muted);
      font-size: 0.98rem;
      line-height: 1.65;
      margin-bottom: 20px;
    }

    .news-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .news-item-mini {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
    }

    .news-item-mini:hover {
      border-color: var(--border-hover);
      transform: translateX(4px);
    }

    .news-item-mini h4 {
      font-size: 1.05rem;
      color: var(--primary-blue-dark);
      font-weight: 800;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .news-item-mini p {
      color: var(--text-muted);
      font-size: 0.88rem;
    }

    /* ==========================================================================
       10. DUAL-HUB: PROCUREMENT, CAREERS & CONTACT GATEWAY
       ========================================================================== */
    .gateway-section {
      background: var(--bg-surface);
    }

    .gateway-portal-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 44px;
      box-shadow: var(--shadow-md);
    }

    .portal-tabs-nav {
      display: flex;
      gap: 12px;
      margin-bottom: 36px;
      border-bottom: 2px solid var(--bg-muted);
      padding-bottom: 14px;
    }

    .portal-tab-btn {
      padding: 12px 24px;
      border-radius: 50px;
      border: 1px solid transparent;
      background: var(--bg-muted);
      color: var(--text-muted);
      font-size: 0.92rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .portal-tab-btn.active {
      background: var(--primary-blue);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(30, 51, 136, 0.2);
    }

    .portal-tab-content {
      display: none;
    }

    .portal-tab-content.active {
      display: block;
    }

    /* Form Layouts */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 8px;
    }

    .form-control {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--text-main);
      background: var(--bg-surface);
      transition: border-color 0.2s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--primary-blue);
      box-shadow: 0 0 0 3px rgba(30, 51, 136, 0.1);
    }

    textarea.form-control {
      resize: vertical;
      min-height: 130px;
    }

    /* ==========================================================================
       PRE-FOOTER EXECUTIVE PARTNERSHIP & TRUST GATEWAY
       ========================================================================== */
    .prefooter-gateway-section {
      padding: 60px 0 30px;
      background: linear-gradient(135deg, #0B2F3A 0%, #134453 50%, #0B2F3A 100%);
      position: relative;
      overflow: hidden;
      color: #ffffff;
    }

    .prefooter-gateway-section::before {
      content: '';
      position: absolute;
      top: -100px;
      left: -100px;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(26, 84, 160, 0.3) 0%, rgba(26, 84, 160, 0) 70%);
      pointer-events: none;
      z-index: 1;
    }

    .prefooter-gateway-section::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(47, 146, 74, 0.25) 0%, rgba(47, 146, 74, 0) 70%);
      pointer-events: none;
      z-index: 1;
    }

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

    .prefooter-gateway-section .section-eyebrow {
      background: rgba(139, 237, 1, 0.12);
      border: 1px solid rgba(139, 237, 1, 0.35);
      color: #8BED01;
      font-weight: 700;
      padding: 6px 18px;
      border-radius: 50px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .prefooter-gateway-section .section-title {
      color: #ffffff;
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 14px;
      letter-spacing: -0.5px;
    }

    .prefooter-gateway-section .section-desc {
      color: #A3C2CB;
      font-size: 1.05rem;
      max-width: 720px;
      line-height: 1.6;
    }

    .partner-pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin: 40px 0 24px;
    }

    @media (max-width: 1024px) {
      .partner-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .partner-pillars-grid {
        grid-template-columns: 1fr;
      }
    }

    .partner-pillar-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 32px 26px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
      transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .partner-pillar-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      transition: height 0.3s ease;
    }

    .pillar-donor::before { background: linear-gradient(90deg, #1A54A0, #3B82F6); }
    .pillar-gov::before { background: linear-gradient(90deg, #2F924A, #8BED01); }
    .pillar-vendor::before { background: linear-gradient(90deg, #8BED01, #2F924A); }
    .pillar-talent::before { background: linear-gradient(90deg, #0B2F3A, #1A54A0); }

    .partner-pillar-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    }

    .partner-pillar-card:hover::before {
      height: 7px;
    }

    .pillar-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .pillar-badge {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 6px;
    }

    .pillar-donor .pillar-badge { background: rgba(26, 84, 160, 0.1); color: #1A54A0; }
    .pillar-gov .pillar-badge { background: rgba(47, 146, 74, 0.12); color: #2F924A; }
    .pillar-vendor .pillar-badge { background: rgba(139, 237, 1, 0.2); color: #134453; }
    .pillar-talent .pillar-badge { background: rgba(11, 47, 58, 0.12); color: #0B2F3A; }

    .pillar-icon-box {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
      transition: transform 0.3s ease;
    }

    .partner-pillar-card:hover .pillar-icon-box {
      transform: scale(1.08) rotate(-3deg);
    }

    .pillar-donor .pillar-icon-box { background: linear-gradient(135deg, rgba(26, 84, 160, 0.12), rgba(26, 84, 160, 0.25)); color: #1A54A0; }
    .pillar-gov .pillar-icon-box { background: linear-gradient(135deg, rgba(47, 146, 74, 0.12), rgba(47, 146, 74, 0.25)); color: #2F924A; }
    .pillar-vendor .pillar-icon-box { background: linear-gradient(135deg, rgba(139, 237, 1, 0.25), rgba(47, 146, 74, 0.25)); color: #0B2F3A; }
    .pillar-talent .pillar-icon-box { background: linear-gradient(135deg, rgba(11, 47, 58, 0.12), rgba(26, 84, 160, 0.2)); color: #0B2F3A; }

    .pillar-title {
      font-size: 1.2rem;
      font-weight: 800;
      color: #0B2F3A;
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .pillar-desc {
      font-size: 0.88rem;
      color: #4A607A;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .pillar-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 22px;
    }

    .pillar-chip {
      font-size: 0.73rem;
      font-weight: 600;
      color: #2F4056;
      background: #F4F6F9;
      padding: 3px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #E2E8F0;
    }

    .pillar-chip i {
      color: #2F924A;
      font-size: 0.68rem;
    }

    .pillar-action-btn {
      width: 100%;
      background: #F4F6F9;
      color: #0B2F3A;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.85rem;
      padding: 12px 18px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.25s ease;
      border: 1px solid #E2E8F0;
    }

    .partner-pillar-card:hover .pillar-action-btn {
      background: #0B2F3A;
      color: #8BED01;
      border-color: #0B2F3A;
      box-shadow: 0 4px 12px rgba(11, 47, 58, 0.25);
    }

    .pillar-action-btn i {
      transition: transform 0.25s ease;
    }

    .partner-pillar-card:hover .pillar-action-btn i {
      transform: translateX(5px);
    }

    /* Executive Conversion Card Banner */
    .executive-conversion-card {
      background: linear-gradient(135deg, var(--neutral-dark) 0%, var(--primary-blue) 65%, var(--neutral-dark) 100%);
      border: 1px solid rgba(139, 237, 1, 0.35);
      border-radius: var(--radius-lg);
      padding: 36px 32px;
      color: #ffffff;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .executive-conversion-card::after {
      content: '';
      position: absolute;
      bottom: -30%;
      right: -10%;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(139, 237, 1, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .conversion-card-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 40px;
      align-items: center;
    }

    @media (max-width: 992px) {
      .conversion-card-inner {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }

    .conversion-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(139, 237, 1, 0.15);
      border: 1px solid rgba(139, 237, 1, 0.35);
      color: var(--accent-lime);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .conversion-title {
      font-size: clamp(1.8rem, 3.2vw, 2.5rem);
      font-weight: 900;
      line-height: 1.25;
      margin-bottom: 14px;
      color: #ffffff;
    }

    .conversion-desc {
      color: var(--neutral-light);
      font-size: 1.02rem;
      line-height: 1.65;
      margin-bottom: 24px;
    }

    .conversion-contact-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 0.85rem;
      color: var(--neutral-light);
    }

    .contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .contact-chip i {
      color: var(--accent-lime);
    }

    .conversion-action-group {
      display: flex;
      flex-direction: column;
      gap: 14px;
      justify-content: center;
    }

    .btn-conversion-emerald {
      background: var(--secondary-green);
      color: #ffffff;
      text-decoration: none;
      padding: 16px 28px;
      border-radius: 50px;
      font-weight: 800;
      font-size: 0.95rem;
      text-align: center;
      box-shadow: 0 10px 25px rgba(41, 123, 71, 0.4);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .btn-conversion-emerald:hover {
      background: var(--secondary-green-dark);
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(41, 123, 71, 0.5);
    }

    .btn-conversion-secondary {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.9rem;
      text-align: center;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-conversion-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: #ffffff;
    }

    /* Partner Marquee Continuous Slider overrides cleaned */

    .partner-logo-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 12px 24px;
      border-radius: 50px;
      color: #ffffff;
      font-weight: 700;
      font-size: 0.9rem;
      white-space: nowrap;
      transition: all 0.25s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .partner-logo-pill:hover {
      background: rgba(47, 146, 74, 0.3);
      border-color: rgba(139, 237, 1, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(47, 146, 74, 0.3);
    }

    .partner-logo-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-lime);
      font-size: 0.95rem;
    }

    @keyframes marqueeScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .footer-safari-silhouette,
    .footer-landscape-wrap {
      position: relative;
      margin-top: 0;
      z-index: 2;
      line-height: 0;
      width: 100%;
      overflow: hidden;
      background: var(--neutral-dark);
    }

    .footer-safari-silhouette svg,
    .footer-landscape-svg {
      display: block;
      width: 100%;
      height: 120px !important;
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */
    footer {
      background: linear-gradient(180deg, var(--neutral-dark) 0%, #05181e 100%);
      color: #ffffff;
      padding: 40px 0 40px;
      border-top: 4px solid var(--secondary-green);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 40px;
      margin-bottom: 50px;
    }

    .footer-brand h3 {
      font-size: 1.5rem;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 12px;
    }

    .footer-brand p {
      color: #cbd5e1;
      font-size: 0.92rem;
      line-height: 1.65;
      margin-bottom: 20px;
    }

    .footer-col h4 {
      font-size: 1.05rem;
      color: #ffffff;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
    }

    .footer-col h4::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 32px;
      height: 3px;
      background: var(--secondary-green);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-links a {
      color: #94a3b8;
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-size: 0.85rem;
      color: #64748b;
    }

    /* African Safari Silhouette Header */
    .footer-safari-silhouette {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      background: #060a1c;
    }

    /* Responsive Adjustments */
    @media (max-width: 992px) {

      .hero-grid,
      .footprint-display-grid,
      .tech-content-card,
      .news-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .navbar {
        padding: 14px 24px;
        position: fixed;
      }

      .mobile-menu-toggle {
        display: flex;
      }

      .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-bottom: 3px solid var(--secondary-green);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 24px 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        max-height: 80vh;
        overflow-y: auto;
      }

      .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .nav-links li:last-child {
        border-bottom: none;
        margin-top: 10px;
      }

      .nav-links a {
        display: block;
        padding: 14px 16px;
        font-size: 0.98rem;
        font-weight: 700;
        border-radius: 8px;
        transition: all 0.25s ease;
      }

      .nav-links a::after {
        display: none;
      }

      .nav-links a:hover,
      .nav-links a.active {
        background: rgba(41, 123, 71, 0.2);
        color: #4ade80;
        padding-left: 22px;
      }

      .nav-links a.btn-nav {
        text-align: center;
        width: 100%;
        display: block;
        margin-top: 6px;
      }
    }

    /* ---------- System Boot Preloader ---------- */
    body.locked {
      overflow: hidden;
    }

    #system-preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f4f7f9;
      background-image:
        linear-gradient(rgba(30, 51, 136, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 51, 136, 0.04) 1px, transparent 1px);
      background-size: 50px 50px;
      z-index: 999999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    #system-preloader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .preloader-content {
      text-align: center;
      width: 100%;
      max-width: 400px;
      padding: 0 20px;
    }

    .preloader-logo {
      height: 55px;
      margin-bottom: 30px;
      animation: pulseLogo 2s infinite ease-in-out;
    }

    .loading-bar-container {
      width: 100%;
      height: 3px;
      background: rgba(30, 51, 136, 0.1);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 12px;
      position: relative;
    }

    .loading-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: var(--secondary-green);
      animation: loadProgress 3s cubic-bezier(0.8, 0, 0.2, 1) forwards;
    }

    .loading-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--primary-blue);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
      animation: blinkText 1.5s infinite;
    }

    @keyframes pulseLogo {
      0% {
        transform: scale(0.95);
        opacity: 0.7;
      }

      50% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(0.95);
        opacity: 0.7;
      }
    }

    @keyframes loadProgress {
      0% {
        width: 0%;
      }

      40% {
        width: 45%;
      }

      70% {
        width: 80%;
      }

      100% {
        width: 100%;
      }
    }

    @keyframes blinkText {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary-green) 0%, var(--secondary-green-dark) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(47, 146, 74, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  outline: none;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: linear-gradient(135deg, var(--secondary-green-dark) 0%, #155227 100%);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 30px rgba(47, 146, 74, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.back-to-top:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 15px rgba(47, 146, 74, 0.4);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
}