/* ================================================
   FGMS – Main Stylesheet
   ================================================ */

/* ---- CSS Variables ---- */
:root {
    --primary:      #0d3b6e;
    --primary-dark: #092d56;
    --primary-light:#1a5fa8;
    --accent:       #e8a020;
    --accent-dark:  #c78010;
    --text-dark:    #111827;
    --text-body:    #374151;
    --text-muted:   #6b7280;
    --bg-light:     #f8fafc;
    --bg-section:   #f1f5f9;
    --border:       #e2e8f0;
    --white:        #ffffff;
    --radius:       10px;
    --shadow:       0 4px 24px rgba(13,59,110,.09);
    --shadow-lg:    0 12px 48px rgba(13,59,110,.14);
    --transition:   all .28s ease;
    --font-main:    'Poppins', sans-serif;
    --font-body:    'Poppins', sans-serif;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-main);
    color: var(--text-body);
    background: var(--white);
    font-size: 15px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
button, .btn, input[type="submit"], input[type="button"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}
a { text-decoration: none; transition: var(--transition); color: var(--primary-light); }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
ul { padding-left: 0; list-style: none; margin: 0; }
.section-pad { padding: 90px 0; }
.section-pad-sm { padding: 56px 0; }

/* ---- Section Headings ---- */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.section-title .section-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 12px;
}
.section-title h2 {
    font-size: 2.1rem;
    color: var(--primary);
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius: 99px;
}
.section-title p { color: var(--text-muted); max-width: 620px; margin: 14px auto 0; font-size: 15px; line-height: 1.7; }
.section-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(232,160,32,.10);
    border: 1px solid rgba(232,160,32,.25);
    padding: 5px 16px;
    border-radius: 99px;
    margin-bottom: 10px;
}

/* ================================================
   TOP BAR
   ================================================ */
.top-bar {
    background: #0a2b4f;
    color: rgba(255,255,255,.82);
    padding: 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,.11);
    height: 40px;
    display: flex;
    align-items: center;
}
.top-bar-ticker {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}
.ticker-label {
    background: #d89a22;
    color: #fff;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 18px;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
    padding-right: 21px;
    position: relative;
    z-index: 2;
}
.ticker-scroll-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.news-ticker-content {
    display: flex;
    align-items: center;
    animation: tickerScroll 48s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.news-ticker-content a {
    color: rgba(255,255,255,.84);
    margin-right: 0;
    font-size: 12.25px;
    text-decoration: none;
    transition: color .2s;
}
.news-ticker-content a:hover { color: #ffcf73; }
.ticker-sep { color: rgba(255,255,255,.28); margin: 0 20px; }
@keyframes tickerScroll {
    0%   { transform: translateX(60vw); }
    100% { transform: translateX(-100%); }
}

/* Top Bar Right */
.top-bar-right { font-size: 12px; }
.top-bar-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.88) !important;
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}
.top-bar-contact:hover { color: #ffd991 !important; }
.top-bar-icon {
    width: 21px; height: 21px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px;
    flex-shrink: 0;
}
.top-bar-divider {
    width: 1px;
    height: 17px;
    background: rgba(255,255,255,.18);
    display: inline-block;
}
.btn-top-login {
    background: var(--accent);
    color: var(--white) !important;
    padding: 5px 14px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.btn-top-login:hover { background: var(--accent-dark); }

/* Events Ticker */
.events-ticker {
    background: #113f73;
    color: var(--white);
    padding: 0;
    height: 36px;
    font-size: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.1);
}
.ticker-label-events {
    background: rgba(6, 24, 45, .34);
    color: var(--white);
    padding: 0 17px;
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,.15);
    margin-right: 16px;
    transition: background .2s;
}
.ticker-label-events:hover { background: rgba(6, 24, 45, .5); color: #fff; }
.events-ticker-scroll {
    flex: 1;
    overflow: hidden;
}
.events-ticker-content {
    display: flex;
    animation: tickerScroll 42s linear infinite;
    white-space: nowrap;
    align-items: center;
    height: 36px;
}
.events-ticker-content a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    margin-right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .2s;
}
.events-ticker-content a:hover { color: #ffd38a; }
.ev-date {
    background: rgba(216,154,34,.2);
    color: #ffd382;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 4px;
    font-weight: 700;
}

/* ================================================
   MAIN NAVBAR
   ================================================ */
.main-nav {
    background: #ffffff !important;
    box-shadow: 0 1px 0 #e4eaf2, 0 4px 18px rgba(13,59,110,.06);
    padding: 12px 0;
    transition: padding .3s ease, box-shadow .3s ease;
    z-index: 1030;
    border-bottom: 1px solid #e4eaf2;
}
.main-nav.scrolled {
    background: #ffffff !important;
    padding: 8px 0;
    box-shadow: 0 4px 24px rgba(13,59,110,.10);
}

.main-nav .container-fluid {
    max-width: 100%;
}

.main-nav .navbar-brand {
    gap: 10px !important;
}

/* Logo */
.navbar-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    background: #f0f5ff;
    padding: 6px;
    border: 1px solid #d0dff7;
    box-shadow: 0 4px 12px rgba(13,59,110,.12);
}
.navbar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}
.navbar-brand-acronym {
    font-family: var(--font-main);
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f4f91;
    letter-spacing: 2.5px;
    line-height: 1;
    text-transform: uppercase;
}
.navbar-brand-full {
    font-family: var(--font-main);
    font-size: 9px;
    font-weight: 500;
    color: #7a95b8;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
    white-space: normal;
}

/* Hamburger */
.navbar-toggler {
    padding: 8px;
    border-radius: 8px;
    background: #eef3fb;
    border: 1px solid #d0dff7;
}
.toggler-bar {
    display: block;
    width: 23px;
    height: 2.2px;
    background: #0f4f91;
    border-radius: 2px;
    margin: 4.5px 0;
    transition: var(--transition);
}

/* Nav Links */
.main-nav .nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: #2a4a6b !important;
    padding: 8px 12px !important;
    border-radius: 0;
    transition: color .2s ease, border-bottom-color .25s ease;
    letter-spacing: 0;
    position: relative;
    border-bottom: 3px solid transparent;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: #0f4f91 !important;
    border-bottom-color: #0f4f91;
}
/* Remove underline animation from dropdown toggle (it has its own indicator) */
.main-nav .nav-link.dropdown-toggle::after { display: none; }
.btn-nav-login {
    background: #0f4f91 !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: box-shadow .2s, transform .15s;
    box-shadow: 0 6px 18px rgba(15,79,145,.22);
    letter-spacing: .01em;
    border: 1px solid #0d447d;
}
.btn-nav-login:hover {
    box-shadow: 0 9px 24px rgba(15,79,145,.35);
    transform: translateY(-1px);
    color: #ffffff !important;
    background: #0d447d !important;
}

/* Mega Menu */
.mega-dropdown { position: static !important; }
.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    border: none;
    border-top: 2px solid #d0dff7;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 20px 56px rgba(13,59,110,.13);
    padding: 24px 30px;
    margin-top: 0;
    animation: megaFadeIn .2s ease;
}
@keyframes megaFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mega-cat-title {
    color: #0f4f91;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(13,59,110,.14);
}
.mega-menu .dropdown-item {
    font-size: 13.5px;
    padding: 7px 10px;
    color: var(--text-body);
    border-radius: 6px;
    transition: background .15s, color .15s, padding-left .15s;
}
.mega-menu .dropdown-item:hover {
    background: rgba(17,63,115,.08);
    color: #0e4d8e;
    padding-left: 14px;
}

/* ================================================
   HERO SLIDER
   ================================================ */
.hero-slider { position: relative; background: var(--primary-dark); }
/* ── Image Slider Background ── */
.hero-img-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-img-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.hero-img-slide.active { opacity: 1; }
.hero-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7,31,68,.82) 0%, rgba(13,59,110,.72) 60%, rgba(10,30,80,.55) 100%);
}
.hero-img-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0b2d52 0%, #0d3b6e 60%, #1a5fa8 100%);
}
.hero-slide {
    min-height: 620px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-dark);
}
.hero-slide.slide-1 { background: linear-gradient(135deg, #0b2d52 0%, #0d3b6e 60%, #1a5fa8 100%); }
.hero-slide.slide-2 { background: linear-gradient(135deg, #071f3a 0%, #0d3561 60%, #165a9e 100%); }
.hero-slide.slide-3 { background: linear-gradient(135deg, #0a1e3d 0%, #12224d 60%, #0d3b6e 100%); }
/* When admin has uploaded background images, hero-slide gradient must be transparent */
.hero-slider.has-bg-imgs { min-height: 620px; }
.hero-slider.has-bg-imgs .hero-slide { background: transparent !important; }
.hero-slider.has-bg-imgs .hero-bg-pattern { display: none; }
.hero-slide.admin-slide { min-height: 620px; display: flex; align-items: center; }
.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position: relative; z-index: 2; color: var(--white); padding: 90px 0; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.95);
    padding: 6px 18px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
}
.hero-content h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    color: var(--white);
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 22px;
    letter-spacing: -.5px;
}
.hero-content h1 span { color: var(--accent); }
.hero-content p { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 540px; margin-bottom: 34px; line-height: 1.75; font-weight: 300; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-hero-primary {
    background: var(--accent);
    color: var(--white);
    padding: 13px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    border: 2px solid var(--accent);
    box-shadow: 0 6px 20px rgba(232,160,32,.35);
    letter-spacing: .2px;
}
.btn-hero-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,160,32,.4); }
.btn-hero-outline {
    background: rgba(255,255,255,.08);
    color: var(--white);
    padding: 13px 30px;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    letter-spacing: .2px;
    backdrop-filter: blur(4px);
}
.btn-hero-outline:hover { background: var(--white); color: var(--primary); border-color: var(--white); transform: translateY(-2px); }
.hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat-item .stat-num { font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -.5px; }
.hero-stat-item .stat-label { font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 3px; font-weight: 400; letter-spacing: .3px; }
.hero-img-col { position: relative; }
.hero-graphic {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    backdrop-filter: blur(10px);
}
.hero-graphic i { font-size: 80px; color: rgba(255,255,255,.3); display: block; margin-bottom: 20px; }
.hero-graphic-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-graphic-item {
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition);
}
.hero-graphic-item:hover { background: rgba(255,255,255,.2); }
.hero-graphic-item i { font-size: 20px; display: block; margin-bottom: 6px; color: var(--accent); }

/* Slider controls */
.slider-nav {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}
.slider-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: var(--transition);
    border: none;
}
.slider-dot.active { background: var(--accent); width: 24px; border-radius: 5px; }
/* Image slider nav dots */
.hero-img-nav {
    position: absolute;
    bottom: 60px;
    right: 30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-img-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    border: 1.5px solid rgba(255,255,255,.5);
    cursor: pointer;
    transition: all .3s ease;
    padding: 0;
}
.hero-img-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    height: 22px;
    border-radius: 4px;
}

/* ================================================
   ABOUT SECTION
   ================================================ */
.about-section { background: var(--white); }

/* ===== About Logo Animation ===== */
@keyframes logoFloat {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-12px); }
}
@keyframes ringPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .35; }
    50%      { transform: translate(-50%,-50%) scale(1.12); opacity: .08; }
}
@keyframes ringPulse2 {
    0%,100% { transform: translate(-50%,-50%) scale(1.12); opacity: .12; }
    50%      { transform: translate(-50%,-50%) scale(1);    opacity: .4; }
}
@keyframes glowSpin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes glowSpinReverse {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(-360deg); }
}
@keyframes ringBreath {
    0%,100% { opacity: .08; }
    50%      { opacity: .22; }
}
@keyframes logoGlow {
    0%,100% { box-shadow: 0 20px 60px rgba(13,59,110,.14); }
    50%      { box-shadow: 0 28px 80px rgba(13,59,110,.24); }
}
@keyframes cardPop {
    0%   { opacity:0; transform: scale(.9) translateY(24px); }
    100% { opacity:1; transform: scale(1)  translateY(0); }
}
@keyframes blobDrift {
    0%,100% { transform: scale(1) translate(0,0); }
    50%      { transform: scale(1.08) translate(12px,-10px); }
}
@keyframes badgePop {
    0%   { opacity:0; transform: scale(.8); }
    100% { opacity:1; transform: scale(1); }
}

/* ── About logo wrap ── */
.about-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    width: 100%;
}

/* Soft background blobs */
.alw-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(48px);
    z-index: 0;
}
.alw-blob.blob1 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(13,59,110,.12) 0%, transparent 70%);
    top: 0; left: -20px;
    animation: blobDrift 9s ease-in-out infinite;
}
.alw-blob.blob2 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(232,160,32,.13) 0%, transparent 70%);
    bottom: 0; right: 10px;
    animation: blobDrift 12s ease-in-out infinite reverse;
}

/* Main logo card */
.about-logo-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 28px;
    padding: 36px 40px 28px;
    box-shadow:
        0 4px 6px rgba(13,59,110,.04),
        0 12px 32px rgba(13,59,110,.10),
        0 32px 72px rgba(13,59,110,.12);
    border: 1px solid rgba(13,59,110,.08);
    animation: logoFloat 6s ease-in-out infinite, logoGlow 6s ease-in-out infinite, cardPop .65s cubic-bezier(.22,1,.36,1) both;
    overflow: hidden;
}
/* Top accent bar */
.alc-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0d3b6e 0%, #1a5fa8 50%, #e8a020 100%);
    border-radius: 28px 28px 0 0;
}
/* Subtle bottom inner shine */
.alc-bottom-shine {
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13,59,110,.12), transparent);
}

.about-logo-img {
    width: 300px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Floating stat badges */
.alw-badge {
    position: absolute;
    z-index: 4;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 24px rgba(13,59,110,.14), 0 1px 4px rgba(13,59,110,.08);
    border: 1px solid rgba(13,59,110,.07);
    animation: badgePop .6s cubic-bezier(.22,1,.36,1) both;
    min-width: 140px;
}
.alw-badge-tl {
    top: 18px; left: 0;
    animation-delay: .25s;
}
.alw-badge-br {
    bottom: 18px; right: 0;
    animation-delay: .4s;
}
.alwb-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d3b6e, #1a5fa8);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.alwb-icon i {
    color: #ffffff;
    font-size: .85rem;
}
.alwb-num {
    font-size: 1rem;
    font-weight: 800;
    color: #0d3b6e;
    line-height: 1;
}
.alwb-txt {
    font-size: .68rem;
    color: #7a95b8;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.about-img-wrap { position: relative; }
.about-img-main {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.about-img-main img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.about-badge-wrap {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(13,59,110,.3);
    min-width: 120px;
}
.about-badge-wrap .badge-num { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -1px; }
.about-badge-wrap .badge-text { font-size: 11px; margin-top: 4px; opacity: .85; font-weight: 400; }
.about-content { padding-left: 30px; }
.about-content h2 { font-size: 2rem; margin-bottom: 18px; color: var(--primary); font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
.about-content p { color: var(--text-body); margin-bottom: 16px; font-size: 15px; }
.about-features { margin-top: 24px; }
.about-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background .2s;
}
.about-feature-item:hover { background: var(--bg-light); }
.about-feature-icon {
    width: 46px; height: 46px;
    background: rgba(13,59,110,.08);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 18px;
    transition: var(--transition);
}
.about-feature-item:hover .about-feature-icon { background: var(--primary); color: var(--white); }
.about-feature-info h6 { font-size: 14px; font-weight: 600; margin-bottom: 3px; color: var(--text-dark); }
.about-feature-info p { font-size: 13px; color: var(--text-muted); margin: 0; }
.about-leaders { margin-top: 28px; }
.leader-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    transition: var(--transition);
}
.leader-card:hover { box-shadow: var(--shadow); }
.leader-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    flex-shrink: 0;
}
.leader-avatar-placeholder {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}
.leader-info h6 { font-size: 14px; margin: 0; color: var(--text-dark); }
.leader-info p { font-size: 12px; color: var(--text-muted); margin: 0; }
.leader-info small { font-size: 11px; color: var(--primary-light); }

/* ================================================
   STATS / ACHIEVEMENTS
   ================================================ */
/* ===== STATS SECTION — CLEAN PREMIUM ===== */
@keyframes statNumPop {
    0%   { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes accentLineGrow {
    from { width: 0; opacity: 0; }
    to   { width: 40px; opacity: 1; }
}
.stats-section {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 64px 0;
    position: relative;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
}
.stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}
.stat-item {
    flex: 1;
    text-align: center;
    padding: 16px 24px;
    position: relative;
}
.stat-item::before {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 99px;
    margin: 0 auto 20px;
    animation: accentLineGrow .6s ease forwards;
    animation-play-state: paused;
}
.stats-section.in-view .stat-item::before,
.achievements-section.in-view .stat-item::before {
    animation-play-state: running;
}
.stat-item:nth-child(2)::before { animation-delay: .1s; }
.stat-item:nth-child(4)::before { animation-delay: .2s; }
.stat-item:nth-child(6)::before { animation-delay: .3s; }
.stat-item:nth-child(8)::before { animation-delay: .4s; }
.stat-icon-clean {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 14px;
    opacity: .75;
    transition: var(--transition);
}
.stat-item:hover .stat-icon-clean {
    color: var(--accent);
    opacity: 1;
    transform: scale(1.18);
}
.stat-num-clean {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -1.5px;
    font-family: var(--font-main);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}
.stats-section.in-view .stat-num-clean,
.achievements-section.in-view .stat-num-clean {
    opacity: 1;
    transform: translateY(0);
}
.stats-section.in-view .stat-item:nth-child(3) .stat-num-clean,
.achievements-section.in-view .stat-item:nth-child(3) .stat-num-clean { transition-delay: .1s; }
.stats-section.in-view .stat-item:nth-child(5) .stat-num-clean,
.achievements-section.in-view .stat-item:nth-child(5) .stat-num-clean { transition-delay: .2s; }
.stats-section.in-view .stat-item:nth-child(7) .stat-num-clean,
.achievements-section.in-view .stat-item:nth-child(7) .stat-num-clean { transition-delay: .3s; }
.stat-lbl-clean {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 8px;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.stat-divider-v {
    width: 1px;
    height: 72px;
    background: var(--border);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .stat-divider-v { display: none; }
    .stat-item {
        border-bottom: 1px solid var(--border);
        padding: 28px 16px;
    }
    .stat-item:nth-child(odd) { border-right: 1px solid var(--border); }
    .stat-num-clean { font-size: 2.2rem; }
}
/* Legacy fallback */
.stat-card { text-align: center; padding: 40px 24px; }
.stat-card .stat-number { font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1; }
.stat-card .stat-title { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 10px; }

/* ================================================
   OUR ACHIEVEMENTS SECTION
   ================================================ */
.achievements-section {
    background: var(--primary-dark, #092d56);
    padding: 64px 0 0;
    position: relative;
    overflow: hidden;
}
.achievements-section::before {
    content: \'\';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
}

/* Title block */
.ach-title-wrap {
    text-align: center;
    margin-bottom: 48px;
    padding: 0 16px;
}
.ach-title-wrap h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.25;
}
.ach-title-wrap p {
    color: rgba(255,255,255,.6);
    max-width: 620px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
}

/* Counters - override colours for dark bg */
.achievements-section .stat-num-clean { color: #fff; }
.achievements-section .stat-lbl-clean { color: rgba(255,255,255,.55); }
.achievements-section .stat-sub-clean { color: rgba(255,255,255,.38); }
.achievements-section .stat-icon-clean { color: var(--accent); opacity: 1; }
.achievements-section .stat-divider-v { background: rgba(255,255,255,.15); }
.achievements-section .stat-item::before { background: rgba(255,255,255,.2); }

/* =====================================================================
   OUR JOURNEY SECTION
   ===================================================================== */
.journey-section {
    background: #0d2b5e;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V18L28 2l28 16v32L28 66zm0 34L0 84V52l28 16 28-16v32L28 100z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
}
.journey-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.journey-subtitle {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
/* Swiper container for journey — full-width with padding */
.swiper-journey {
    padding: 0 0 56px !important;
}
.swiper-journey .swiper-slide {
    padding: 0 12px;
}
.journey-card {
    text-align: center;
    padding: 36px 28px 28px;
    border-left: 1px solid rgba(255,255,255,0.1);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
/* Remove left border for first visible card */
.swiper-journey .swiper-slide:first-child .journey-card { border-left: none; }
.journey-year {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.journey-divider {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 20px;
    gap: 0;
}
.journey-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.35);
}
.journey-dot {
    color: var(--accent, #e8a020);
    font-size: 12px;
    line-height: 1;
    padding: 0 6px;
    flex-shrink: 0;
}
.journey-dot i { display: block; }
.journey-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.75;
    margin: 0;
    max-width: 280px;
}
/* Pagination dots — white */
.journey-pagination { bottom: 20px !important; }
.journey-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.4);
    opacity: 1;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    transition: background 0.3s, width 0.3s;
}
.journey-pagination .swiper-pagination-bullet-active {
    background: #fff;
    width: 40px;
}

/* Achievement image gallery — marquee section */
.ach-images-section {
    background: #f8fafc;
    padding: 72px 0 80px;
    position: relative;
    border-top: 1px solid #e2e8f0;
    overflow: hidden;
}
.ach-images-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light, #1a5fa8) 100%);
}
.ach-images-title {
    text-align: center;
    margin-bottom: 48px;
    padding: 0 16px;
}
.ach-images-title h2 {
    color: var(--primary-dark, #092d56);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.25;
}
.ach-images-title p {
    color: #64748b;
    max-width: 580px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
}

/* Marquee viewport — clips the track and fades edges */
.ach-marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    padding: 8px 0 12px;
}
.ach-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    width: max-content;
    animation: ach-marquee-rtl 40s linear infinite;
}
.ach-marquee-track:hover {
    animation-play-state: paused;
}
@keyframes ach-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Cards */
.ach-gallery-card {
    background: transparent;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    width: 380px;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.ach-gallery-card:hover {
    transform: translateY(-6px);
}
.ach-gallery-img {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}
.ach-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
.ach-gallery-label {
    padding: 10px 4px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text, #334155);
    text-align: center;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .achievements-section { padding-top: 48px; }
    .ach-images-section { padding: 52px 0 60px; }
    .ach-gallery-card { width: 260px; }
    .ach-gallery-img { height: 190px; }
}
@media (max-width: 480px) {
    .ach-gallery-card { width: calc(50% - 10px); }
}

/* ================================================
   OUR FOOTPRINTS SECTION
   ================================================ */
.footprints-section {
    background: #fff;
    overflow: hidden;
}
.footprints-heading {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--primary-dark, #092d56);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footprints-sub {
    color: #64748b;
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}
.footprints-globe-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 60px;
}
#footprints-globe {
    width: 100%;
    height: clamp(380px, 55vw, 640px);
}

/* ================================================
   OUR CLIENTS MARQUEE SECTION
   ================================================ */
.clients-section {
    background: #fff;
    padding: 56px 0 60px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}
.clients-header {
    text-align: center;
    margin-bottom: 36px;
}
.clients-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent, #e8a020);
    margin-bottom: 8px;
}
.clients-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--primary-dark, #092d56);
    margin: 0;
}
.clients-marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    padding: 6px 0 10px;
}
.clients-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    width: max-content;
    align-items: center;
    animation: clients-rtl var(--marquee-dur, 35s) linear infinite;
}
.clients-marquee-track:hover {
    animation-play-state: paused;
}
@keyframes clients-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marquee-dist, -50%)); }
}
.clients-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 120px;
    flex-shrink: 0;
    padding: 16px 24px;
    border-radius: 10px;
    border: 1px solid #e8edf3;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    text-decoration: none;
}
.clients-logo-card:hover {
    border-color: var(--primary, #0d3b6e);
    box-shadow: 0 4px 18px rgba(13,59,110,.12);
    transform: translateY(-3px);
}
.clients-logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 767px) {
    .clients-section { padding: 44px 0 48px; }
    .clients-logo-card { width: 170px; height: 90px; padding: 12px 18px; }
}

/* ================================================
   MISSION & VISION SECTION
   ================================================ */
.mv-section {
    background: #f8fafc;
    position: relative;
}
.mv-section .section-title h2 { color: var(--primary-dark, #092d56); }
.mv-section .section-title p  { color: #64748b; }

.mv-card {
    background: #fff;
    border-radius: 18px;
    padding: 44px 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 52px rgba(0,0,0,.28);
}
.mv-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: 18px 18px 0 0;
}
.mv-card--mission::before { background: var(--primary, #0d3b6e); }
.mv-card--vision::before  { background: var(--accent, #e8a020); }

.mv-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 28px;
}
.mv-card--mission .mv-icon-wrap { background: rgba(13,59,110,.08); color: var(--primary, #0d3b6e); }
.mv-card--vision  .mv-icon-wrap { background: rgba(232,160,32,.12); color: #b87a00; }

.mv-card-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--primary-dark, #092d56);
    margin-bottom: 16px;
    line-height: 1.2;
}
.mv-card-body {
    font-size: 15.5px;
    line-height: 1.8;
    color: #475569;
    margin: 0;
}

@media (max-width: 767px) {
    .mv-card { padding: 32px 24px; }
    .mv-card-title { font-size: 1.3rem; }
}

/* ================================================
   IS CODE SEARCH SECTION
   ================================================ */
.is-search-section {
    background: linear-gradient(135deg, #071f3a 0%, #0d3b6e 100%);
    position: relative;
    overflow: hidden;
}
.is-search-section::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.is-search-section .section-badge { background: rgba(229,165,5,.15); color: #e5a505; border-color: rgba(229,165,5,.3); }
.is-search-section .section-title h2 { color: #fff; }
.is-search-section .section-title p  { color: rgba(255,255,255,.7); }
.is-search-wrap { max-width: 680px; margin: 0 auto; }
.is-search-inner { position: relative; }
.is-search-box {
    position: relative;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 14px;
    display: flex; align-items: center;
    transition: border-color .2s, background .2s;
}
.is-search-box:focus-within {
    border-color: #e5a505;
    background: rgba(255,255,255,.12);
}
.is-search-icon {
    flex-shrink: 0;
    color: rgba(255,255,255,.5);
    font-size: 18px;
    padding: 0 16px 0 22px;
}
.is-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    padding: 18px 0;
    min-width: 0;
}
.is-search-input::placeholder { color: rgba(255,255,255,.4); }
.is-search-kbd {
    flex-shrink: 0;
    padding: 0 18px;
    font-size: 11px;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
}
.is-search-kbd kbd {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    color: rgba(255,255,255,.5);
}
.is-search-clear {
    flex-shrink: 0;
    padding: 0 18px;
    cursor: pointer;
    color: rgba(255,255,255,.45);
    font-size: 15px;
    transition: color .15s;
}
.is-search-clear:hover { color: #fff; }

/* Dropdown */
.is-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
    z-index: 9999;
    overflow: visible;
}
.is-result-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background .12s;
    cursor: pointer;
}
.is-result-item:last-of-type { border-bottom: none; }
.is-result-item:hover, .is-result-item.is-result-active { background: #f0f6ff; }
.is-result-num {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 12px;
    color: var(--primary);
    background: rgba(7,31,58,.08);
    border-radius: 6px;
    padding: 3px 9px;
    margin-top: 2px;
    white-space: nowrap;
}
.is-result-title { font-size: 13px; color: #334155; line-height: 1.45; }
.is-result-foot {
    padding: 10px 20px;
    font-size: 12px;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #e9eef5;
}
.is-result-foot a { color: var(--primary); text-decoration: none; }
.is-result-foot a:hover { text-decoration: underline; }

/* ================================================
   CERTIFICATION SHOWCASE SLIDER
   ================================================ */
.cert-showcase-section {
    background: #ffffff;
    border-top: 1px solid #eceff3;
    border-bottom: 1px solid #eceff3;
}
.cert-showcase-section .section-title h2 { color: #1c2f45; }
.cert-showcase-section .section-title p { color: #5d6d7d; }
.cert-showcase-section .section-badge {
    background: #e9dcc7;
    color: #8a6328;
    border-color: #d8c3a1;
}
.certshow-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.certshow-tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 250px;
    background: #e9dcc7;
    border: 1px solid #ddceb7;
    box-shadow: 0 10px 26px rgba(46, 38, 25, .14);
    transition: transform .35s ease, box-shadow .35s ease;
}
.certshow-tile.featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 518px;
}
.certshow-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(46, 38, 25, .2);
}
.certshow-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.certshow-tile:hover .certshow-media {
    transform: scale(1.07);
}
.certshow-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 14px 13px;
    background: linear-gradient(0deg, rgba(23, 33, 46, .82) 0%, rgba(23, 33, 46, .04) 100%);
}

.certshow-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #f3c46b;
    margin-bottom: 8px;
}
.certshow-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.35; }
.certshow-desc { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.55; margin: 0; }
.certshow-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    text-align: center;
    padding: 28px;
    background: #efe4d3;
}
.certshow-empty .certshow-name {
    color: #1c2f45;
}
.certshow-empty .certshow-desc {
    color: #5d6d7d;
}
.certshow-note {
    margin-top: 16px;
    color: #7b6542;
    font-size: .88rem;
}

/* ================================================
   WHY CHOOSE FGMS SECTION
   ================================================ */
.whyx-section {
    background: #ffffff;
    border-top: 1px solid #e4eaf3;
    border-bottom: 1px solid #e4eaf3;
    position: relative;
    overflow: hidden;
}
.whyx-section::before {
    content: none;
}
.whyx-title {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: end;
    gap: 18px 40px;
    text-align: left;
    margin: 0 0 34px !important;
    max-width: 100% !important;
}
.whyx-title .section-badge,
.whyx-title h2 {
    grid-column: 1;
    justify-self: start;
}
.whyx-title p {
    grid-column: 2;
    margin: 0;
    align-self: center;
}
.whyx-title h2 {
    color: #0f2236;
    max-width: 30ch;
    margin: 0;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.whyx-title p {
    max-width: 40ch;
    color: #4a6380;
    font-size: 1rem;
    line-height: 1.75;
}
.whyx-frame {
    position: relative;
    z-index: 1;
}
/* Core card — deep navy anchor */
.whyx-core-card {
    background: #0f2236;
    color: #f8fbff;
    border: none;
    border-radius: 24px;
    padding: 30px 28px;
    height: 100%;
    box-shadow: 0 18px 38px rgba(15, 34, 54, .18);
    transition: transform .35s ease, box-shadow .35s ease;
}
.whyx-core-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(15, 34, 54, .28);
}
.whyx-eyebrow {
    color: #ffd06a;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .15em;
    font-weight: 800;
    margin-bottom: 12px;
}
.whyx-core-card h3 {
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.16;
    letter-spacing: -.02em;
    margin-bottom: 14px;
}
.whyx-core-card p {
    color: rgba(239, 245, 252, .78);
    font-size: .95rem;
    line-height: 1.75;
    margin-bottom: 18px;
}
.whyx-list {
    display: grid;
    gap: 8px;
}
.whyx-list div {
    color: rgba(239, 245, 252, .86);
    font-size: .88rem;
    line-height: 1.6;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.whyx-list i { color: #ffd06a; margin-top: 2px; }
.whyx-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.whyx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
/* Feature cards — each a distinct solid color */
.whyx-card {
    border: none;
    border-radius: 18px;
    padding: 18px 16px;
    min-height: 180px;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.whyx-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,.16);
}
.whyx-card:nth-child(1) { background: #1a4d8a; }
.whyx-card:nth-child(2) { background: #127a52; }
.whyx-card:nth-child(3) { background: #b5451b; }
.whyx-card:nth-child(4) { background: #3a1f7a; }
.whyx-card:nth-child(5) { background: #0e5f6b; }
.whyx-card:nth-child(6) { background: #8b3a62; }
.whyx-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 12px;
    animation: whyxPulse 3.6s ease-in-out infinite;
}
.whyx-card h6 {
    color: #ffffff;
    font-size: .92rem;
    line-height: 1.35;
    margin-bottom: 6px;
    font-weight: 700;
}
.whyx-card p {
    color: rgba(255,255,255,.80);
    font-size: .82rem;
    line-height: 1.6;
    margin: 0;
}
/* Metrics strip — each a distinct solid color */
.whyx-metrics {
    margin-top: 16px;
    margin-bottom: 28px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.whyx-metric-card {
    border: none;
    border-radius: 16px;
    padding: 14px 14px;
}
.whyx-metric-card:nth-child(1) { background: #1a4d8a; }
.whyx-metric-card:nth-child(2) { background: #127a52; }
.whyx-metric-card:nth-child(3) { background: #b5451b; }
.whyx-metric-card:nth-child(4) { background: #3a1f7a; }
.whyx-metric-card strong {
    display: block;
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: 6px;
}
.whyx-metric-card span {
    color: rgba(255,255,255,.78);
    font-size: .8rem;
}
/* Market progress bars */
.whyx-market {
    border-top: 1px solid #e4eaf3;
    padding-top: 30px;
}
.whyx-market-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}
.whyx-market-head h5 {
    color: #0f2236;
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
}
.whyx-market-head h5 i { color: #c0732a; }
.whyx-market-head p {
    margin: 0;
    color: #4a6380;
    max-width: 45ch;
    font-size: .88rem;
    line-height: 1.6;
}
.whyx-market-row {
    background: #f5f8fc;
    border: 1px solid #dde6f0;
    border-radius: 16px;
    padding: 14px 14px;
}
.whyx-market-label {
    color: #1a2e45;
    font-size: .86rem;
    line-height: 1.45;
}
.whyx-market-value {
    color: #1a4d8a;
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}
.whyx-progbar {
    height: 7px;
    border-radius: 99px;
    background: #dce8f5;
    overflow: hidden;
}
.whyx-progbar-fill {
    width: 0;
    height: 100%;
    background: #1a4d8a;
    border-radius: 99px;
    transition: width 1.4s cubic-bezier(.22,.68,0,1);
}
@keyframes whyxPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ================================================
   INDUSTRIES WE SERVE SECTION  –  PREMIUM
   ================================================ */
.industries-section {
    background: #eef2fb;
    position: relative;
    overflow: hidden;
}
.industries-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(13,59,110,.07) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
}
.industry-card {
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 24px;
    padding: 34px 26px 26px;
    text-align: left;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    display: flex;
    flex-direction: column;
}
.industry-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c1, #0d3b6e), var(--c2, #1a5fa8));
    border-radius: 24px 24px 0 0;
    transition: height 0.35s ease;
}
.industry-card::after {
    content: '';
    position: absolute;
    bottom: -50px; right: -50px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, var(--c2, #1a5fa8), transparent 65%);
    opacity: 0.06;
    border-radius: 50%;
    transition: all 0.45s ease;
    pointer-events: none;
}
.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(13,59,110,.15), 0 8px 20px rgba(0,0,0,.07);
    border-color: rgba(0,0,0,.04);
    background: linear-gradient(160deg, #fff 60%, color-mix(in srgb, var(--c2,#1a5fa8) 5%, #fff));
}
.industry-card:hover::before { height: 6px; }
.industry-card:hover::after  { opacity: .18; transform: scale(1.6); }
.ind-icon {
    width: 62px; height: 62px;
    background: linear-gradient(135deg, var(--c1, #0d3b6e), var(--c2, #1a5fa8));
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    position: relative; z-index: 1;
    flex-shrink: 0;
}
.industry-card:hover .ind-icon {
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.ind-title {
    font-size: 15px;
    font-weight: 700;
    color: #0d3b6e;
    margin-bottom: 10px;
    line-height: 1.3;
    position: relative; z-index: 1;
}
.ind-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 0 auto;
    position: relative; z-index: 1;
    flex-grow: 1;
}
.ind-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    position: relative; z-index: 1;
}
.ind-stat {
    font-size: 11px;
    font-weight: 700;
    color: var(--c1, #0d3b6e);
    background: color-mix(in srgb, var(--c2,#1a5fa8) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--c2,#1a5fa8) 20%, #fff);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .03em;
    opacity: .85;
}
.industry-card:hover .ind-stat  { opacity: 1; }

/* ================================================
   SERVICES SECTION
   ================================================ */
.services-section { background: var(--bg-section); }
.service-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 44px; flex-wrap: wrap; }
.service-tab-btn {
    background: var(--white);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    padding: 9px 24px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-main);
    letter-spacing: .2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.service-tab-btn.active,
.service-tab-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); box-shadow: 0 4px 14px rgba(13,59,110,.22); }
/* ── Classic Professional Service Card ── */
.service-card {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 16px rgba(13,59,110,.06);
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s ease, border-color .3s ease;
    height: 100%;
    border: 1px solid #e5eaf5;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 24px 56px rgba(13,59,110,.14);
    border-color: rgba(13,59,110,.2);
}

/* Image showcase zone */
.svc-img-zone {
    background: linear-gradient(150deg, #eef2fb 0%, #e5eaf7 100%);
    padding: 0;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.svc-img-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(13,59,110,.06) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* White elevated tile that highlights the icon — fills full zone */
.svc-icon-plate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none;
    z-index: 2;
}
.svc-icon-plate .cert-real-icon {
    width: 190px; height: 190px;
    object-fit: contain;
    border-radius: 0;
    display: block;
    transition: transform .32s cubic-bezier(.22,.68,0,1.2);
}
.service-card:hover .svc-icon-plate .cert-real-icon {
    transform: scale(1.07);
}
.svc-icon-plate i,
.svc-icon-plate .service-icon-fa {
    font-size: 52px;
    color: var(--primary);
    transition: transform .32s cubic-bezier(.22,.68,0,1.2);
}
.service-card:hover .svc-icon-plate i {
    transform: scale(1.1);
}

/* Cert icon — service-detail header / contact card */
.contact-card .cert-real-icon {
    width: 58px; height: 58px;
    object-fit: contain;
}
/* Banner heading inline cert icon */
.page-banner .cert-real-icon {
    width: 52px; height: 52px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 8px;
}
/* Related-services card cert icon */
.card .cert-real-icon {
    width: 38px; height: 38px;
    object-fit: contain;
    border-radius: 6px;
}

/* Gold accent separator line */
.svc-accent-sep {
    width: 44px; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(232,160,32,.25) 100%);
    border-radius: 2px;
    margin: 0 auto 8px;
    transition: width .3s ease;
}
.service-card:hover .svc-accent-sep { width: 66px; }

/* Text body */
.svc-card-body {
    padding: 12px 16px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.svc-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a2e4a;
    margin-bottom: 5px;
    line-height: 1.4;
}
.svc-desc {
    font-size: 13px;
    color: #68758e;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer row */
.svc-card-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid #eceff8;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: #fafbff;
    transition: background .2s;
}
.service-card:hover .svc-card-footer { background: #f2f5fd; }

/* Category pill */
.svc-cat-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(13,59,110,.07);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(13,59,110,.12);
    line-height: 1.6;
    align-self: center;
}

/* CTA button — full width */
.svc-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    text-decoration: none;
    letter-spacing: .3px;
    padding: 9px 14px;
    border-radius: 8px;
    white-space: nowrap;
    width: 100%;
    transition: background .2s, transform .2s;
}
.svc-read-more i { font-size: 11px; transition: transform .25s ease; }
.svc-read-more:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.svc-read-more:hover i { transform: translateX(4px); }

/* Legacy compat */
.service-icon { display: none; }
.btn-service { font-size: 12px; color: var(--primary); font-weight: 600; }
.btn-service:hover { color: var(--accent); }
.btn-view-all { background: var(--primary); color: var(--white); padding: 12px 32px; border-radius: 8px; font-weight: 600; }
.btn-view-all:hover { background: var(--accent); color: var(--white); }

/* ================================================
/* ================================================
   FGMS GROUP SECTION
   ================================================ */
.fgms-group-section { background: #fff; }

/* ── Title Banner ── */
.fgms-group-hero { background: #fff; }
.fgms-group-main-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.fgms-group-title-rule {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Leadership Band ── */
.fgms-group-band {
    background: #f2f4f7;
    padding: 48px 0;
    margin-top: 36px;
    border-top: 1px solid #e4e8ef;
    border-bottom: 1px solid #e4e8ef;
}
.fgms-group-desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 0;
}
.fgms-leader-wrap { display: inline-block; margin-bottom: 14px; }
.fgms-leader-avatar {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    color: rgba(255,255,255,.85);
    border: 5px solid #fff;
    box-shadow: 0 6px 24px rgba(13,59,110,.2);
    margin: 0 auto;
    overflow: hidden;
}
.fgms-leader-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.fgms-leader-avatar--alt {
    background: linear-gradient(135deg, #1a5fa8, #0d3b6e);
}
.fgms-leader-name {
    font-size: 13px; font-weight: 700;
    color: #1565c0; letter-spacing: .4px;
    margin-bottom: 4px; line-height: 1.3;
}
.fgms-leader-role {
    font-size: 12.5px; font-weight: 700;
    color: var(--accent); margin-bottom: 6px;
}
.fgms-leader-cred {
    font-size: 12px; color: var(--text-body); line-height: 1.5;
}

/* ── Entity Cards ── */
.fgms-group-entities { background: #fff; }
.fgms-group-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(13,59,110,.06);
}
.fgms-group-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gc1, #0d3b6e), var(--gc2, #1a5fa8));
    transition: height .3s ease;
}
.fgms-group-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(13,59,110,.13);
    border-color: transparent;
}
.fgms-group-card:hover::before { height: 6px; }
.fgms-gc-top {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 24px 0;
}
.fgms-gc-icon {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, var(--gc1, #0d3b6e), var(--gc2, #1a5fa8));
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .3s ease, box-shadow .3s ease;
}
.fgms-group-card:hover .fgms-gc-icon {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.fgms-gc-domain {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--gc1, var(--primary)); opacity: .8;
}
.fgms-gc-body { padding: 18px 24px 16px; flex: 1; }
.fgms-gc-body h5 {
    font-size: 15.5px; font-weight: 700;
    color: var(--primary); margin-bottom: 10px; line-height: 1.35;
}
.fgms-gc-body p {
    font-size: 13px; color: var(--text-body); line-height: 1.65; margin: 0;
}
.fgms-gc-footer {
    padding: 14px 24px 22px;
    border-top: 1px solid var(--border);
}
.fgms-gc-link {
    font-size: 13px; font-weight: 600;
    color: var(--gc1, var(--primary));
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .2s ease, opacity .2s ease;
}
.fgms-gc-link:hover { gap: 10px; opacity: .75; }

@media (max-width: 767px) {
    .fgms-group-band { padding: 36px 0; }
    .fgms-leader-avatar { width: 90px; height: 90px; font-size: 2.2rem; }
    .fgms-leader-name  { font-size: 12px; }
    .fgms-leader-cred  { font-size: 11px; }
    .fgms-group-desc   { text-align: left; }
}

/* ================================================
   NEWS SECTION
   ================================================ */
.news-section { background: var(--white); }
.news-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(13,59,110,.07);
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;
    border: 1px solid #e5eaf5;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(13,59,110,.13); }
.news-card-img { position: relative; overflow: hidden; height: 200px; background: var(--bg-section); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--primary); background: var(--bg-section); }

/* ── Category cover (no-image fallback) ── */
.news-card-img-cover {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: transform .4s ease;
}
.news-card:hover .news-card-img-cover { transform: scale(1.04); }
/* Dot-grid texture overlay */
.nc-cover-blur {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}
/* Bottom-right large ghost icon */
.news-card-img-cover::after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.nc-cover-body {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    z-index: 1;
}
.nc-cover-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.22);
}
.nc-cover-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    background: rgba(0,0,0,.18);
    border-radius: 999px;
    padding: 3px 12px;
}
.news-cat {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}
.news-card-body { padding: 22px; }
.news-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; }
.news-meta i { margin-right: 4px; color: var(--accent); }
.news-card-body h5 { font-size: 15.5px; font-weight: 600; margin-bottom: 10px; color: var(--text-dark); line-height: 1.45; }
.news-card-body h5 a { color: inherit; }
.news-card-body h5 a:hover { color: var(--primary); }
.news-card-body p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.btn-read-more { font-size: 13px; color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.btn-read-more:hover { color: var(--accent); gap: 8px; }

/* ================================================
   MISSION & MARKET SHARE
   ================================================ */
.mission-section { background: linear-gradient(135deg, #081e39 0%, #0b2d52 45%, #1152a8 100%); position: relative; }
.mission-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.mission-section h2, .mission-section h3 { color: #fff; }
.mission-section .section-badge { background: rgba(232,160,32,.18); color: var(--accent); }
.mission-section .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; }
.mission-section .btn-primary:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
.mission-points li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(13,59,110,.1);
    font-size: 14px;
    color: var(--text-body);
    display: flex;
    gap: 10px;
}
.mission-points li:last-child { border-bottom: none; }
.mission-points li i { color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.mission-section .mission-points li {
    color: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.market-heading { color: #fff; margin-bottom: 24px; }
.progress-item { margin-bottom: 20px; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); }
.progress-bar { background: var(--accent); border-radius: 4px; transition: width 1.5s ease; }

/* ================================================
   TESTIMONIALS
   ================================================ */
.testimonials-section { background: linear-gradient(140deg, #071f3a 0%, #0d3b6e 55%, #1152a8 100%); position: relative; }
.testimonials-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.testimonials-section .section-title h2 { color: var(--white); }
.testimonials-section .section-title h2::after { background: var(--accent); }
.testimonials-section .section-title p { color: rgba(255,255,255,.7); }
.testimonial-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 30px;
    margin: 10px;
    transition: var(--transition);
    backdrop-filter: blur(12px);
}
.testimonial-card:hover { background: rgba(255,255,255,.13); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.testi-stars { color: var(--accent); font-size: 14px; margin-bottom: 14px; }
.testi-quote { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    border: 2px solid var(--accent);
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(232,160,32,.25);
}
.testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.testi-name { font-weight: 500; color: var(--white); font-size: 14px; }
.testi-desig { font-size: 12px; color: rgba(255,255,255,.65); }

/* ================================================
   REVIEWS SECTION
   ================================================ */
.reviews-section { background: var(--bg-section); }
.review-summary {
    background: var(--white);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}
.review-score { font-size: 4rem; font-weight: 600; color: var(--primary); line-height: 1; }
.review-stars { color: #ffc107; font-size: 20px; margin: 8px 0; }
.review-badge { font-size: 11px; color: var(--text-muted); }
.review-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    margin: 8px;
    transition: var(--transition);
}
.review-card:hover { box-shadow: var(--shadow); }
.review-card .review-stars { font-size: 13px; }
.review-card p { font-size: 13px; color: var(--text-body); font-style: italic; margin-bottom: 12px; }
.review-card .reviewer-name { font-weight: 500; color: var(--text-dark); font-size: 14px; }
.review-card .reviewer-company { font-size: 12px; color: var(--text-muted); }

/* ================================================
   CLIENTS SECTION
   ================================================ */
.clients-section { background: var(--white); }
.client-logo-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: var(--transition);
    height: 80px;
    margin: 6px;
}
.client-logo-wrap:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.client-logo-wrap img { max-height: 50px; max-width: 140px; object-fit: contain; filter: grayscale(80%); transition: var(--transition); }
.client-logo-wrap:hover img { filter: grayscale(0); }

/* ================================================
   CALLBACK SECTION
   ================================================ */
.callback-section { background: var(--bg-section); }
.callback-form-wrap {
    background: var(--white);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 8px 40px rgba(13,59,110,.1);
    border: 1px solid #e5ecf8;
}

/* ================================================
   CTA SECTION
   ================================================ */
.cta-section { background: linear-gradient(135deg, #071d38 0%, var(--primary-dark) 60%, #0d3b6e 100%); padding: 70px 0; color: var(--white); position: relative; }
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.cta-section h3 { color: var(--white); font-size: 1.9rem; margin-bottom: 12px; font-weight: 700; position: relative; z-index: 1; }
.cta-section p { color: rgba(255,255,255,.75); position: relative; z-index: 1; font-size: 15px; }
.btn-cta-light { background: var(--white); color: var(--primary); padding: 13px 30px; border-radius: 8px; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.btn-cta-light:hover { background: var(--accent); color: var(--white); transform: translateY(-2px); }
.btn-cta-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); padding: 13px 30px; border-radius: 8px; font-weight: 600; transition: var(--transition); }
.btn-cta-outline:hover { background: var(--white); color: var(--primary); transform: translateY(-2px); }

/* ================================================
   FOOTER
   ================================================ */
.main-footer { background: #0a1f3d; color: rgba(255,255,255,.75); padding: 70px 0 0; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 20px; }
.footer-heading { color: var(--white); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); display: inline-block; }
.footer-links li { margin-bottom: 7px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.65); transition: var(--transition); }
.footer-links a:hover { color: var(--accent); padding-left: 4px; }
.footer-links a i { margin-right: 5px; font-size: 10px; color: var(--accent); }
.footer-contact-list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 13px;
}
.footer-contact-list li i { color: var(--accent); flex-shrink: 0; margin-top: 4px; font-size: 14px; }
.footer-contact-list a { color: rgba(255,255,255,.7); }
.footer-contact-list a:hover { color: var(--accent); }
.social-links { display: flex; gap: 8px; }
.social-links a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    transition: var(--transition);
}
.social-links a:hover { background: var(--accent); color: var(--white); }
.newsletter-form .form-control {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white);
    font-size: 13px;
    padding: 8px 14px;
}
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form .btn { background: var(--accent); border: none; }
.newsletter-form .btn:hover { background: var(--accent-dark); }
.footer-bottom {
    background: rgba(0,0,0,.3);
    padding: 18px 0;
    margin-top: 50px;
    font-size: 12px;
    color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--accent); }

/* ================================================
   WHATSAPP & BACK-TO-TOP
   ================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 90px; right: 20px;
    width: 52px; height: 52px;
    background: #25d366;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--white);
    box-shadow: 0 6px 20px rgba(37,211,102,.4);
    z-index: 9999;
    transition: var(--transition);
    animation: whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,.4); }
    50% { box-shadow: 0 6px 30px rgba(37,211,102,.7); }
}
.whatsapp-float:hover { background: #128c7e; transform: scale(1.1); color: var(--white); }
.back-to-top {
    position: fixed;
    bottom: 24px; right: 20px;
    width: 42px; height: 42px;
    background: var(--primary);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: var(--transition);
    box-shadow: var(--shadow);
}
.back-to-top.show { opacity: 1; }
.back-to-top:hover { background: var(--accent); color: var(--white); }

/* ================================================
   PAGE BANNER (Inner pages)
   ================================================ */
.page-banner {
    background: var(--primary-dark);
    padding: 60px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-banner h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--white); position: relative; z-index: 2; }
.page-banner p { color: rgba(255,255,255,.8); position: relative; z-index: 2; }
.breadcrumb-wrap { position: relative; z-index: 2; }
.breadcrumb-item a { color: rgba(255,255,255,.7); }
.breadcrumb-item.active { color: var(--accent); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ================================================
   CONTACT FORM
   ================================================ */
.contact-card {
    background: var(--white);
    border-radius: 14px;
    padding: 36px;
    box-shadow: var(--shadow);
}
.contact-info-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.contact-info-icon {
    width: 50px; height: 50px;
    background: rgba(13,59,110,.08);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-size: 20px;
    flex-shrink: 0;
}
.contact-info-text h6 { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.contact-info-text p { font-size: 14px; color: var(--text-dark); margin: 0; }
.contact-info-text a { color: var(--text-dark); }

/* ================================================
   FORM ELEMENTS
   ================================================ */
.form-label { font-weight: 600; font-size: 13px; color: var(--text-dark); }
.form-control, .form-select {
    border: 1.5px solid #dde5f0;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 14px;
    transition: var(--transition);
    color: var(--text-dark);
    font-family: var(--font-main);
    background: #fafbfd;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13,59,110,.08);
    background: var(--white);
}
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    padding: 10px 26px;
    font-weight: 600;
    border-radius: 8px;
    font-size: 14px;
    transition: var(--transition);
    font-family: var(--font-main);
    letter-spacing: .2px;
    box-shadow: 0 4px 14px rgba(13,59,110,.2);
}
.btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; box-shadow: 0 6px 20px rgba(13,59,110,.28); transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--white); border: none; padding: 10px 24px; font-weight: 600; border-radius: 8px; transition: var(--transition); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); }

/* ================================================
   CLIENT & ADMIN PORTAL LAYOUTS
   ================================================ */
.portal-wrapper { background: #f0f2f5; min-height: 100vh; display: flex; flex-direction: column; }
.portal-topbar {
    background: var(--primary);
    color: var(--white);
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow);
}
.portal-topbar .brand { font-size: 1.2rem; font-weight: 600; color: var(--white); }
.portal-topbar .brand span { color: var(--accent); }
.portal-body { display: flex; flex: 1; }
/* ── Sidebar – Upgraded ── */
.portal-sidebar {
    width: 260px;
    background: #071d38;
    display: flex; flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.05);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}
.portal-sidebar::-webkit-scrollbar { width: 4px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }
.portal-main { flex: 1; padding: 28px; overflow-x: hidden; }

/* ── Profile card ── */
.sb-profile {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.sb-avatar-wrap { position: relative; flex-shrink: 0; }
.sb-avatar-img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
}
.sb-avatar-initials {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #1a5fa8, #0d3b6e);
    border: 2px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #fff;
}
.sb-online-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e;
    border: 2px solid #071d38;
}
.sb-profile-info { flex: 1; min-width: 0; }
.sb-profile-name {
    font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile-company {
    font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile-edit {
    width: 28px; height: 28px; flex-shrink: 0;
    background: rgba(255,255,255,.07); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.45); font-size: 11px;
    text-decoration: none; transition: background .15s, color .15s;
}
.sb-profile-edit:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── Quick stats bar ── */
.sb-quick-stats {
    display: flex; align-items: center;
    margin: 12px 14px;
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 10px 4px;
    border: 1px solid rgba(255,255,255,.07);
}
.sbqs-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; text-decoration: none;
    transition: opacity .15s;
}
.sbqs-item:hover { opacity: .75; }
.sbqs-val {
    font-size: 1.1rem; font-weight: 800; color: #fff;
    line-height: 1; font-family: var(--font-main);
}
.sbqs-lbl { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .3px; }
.sbqs-div { width: 1px; height: 28px; background: rgba(255,255,255,.08); flex-shrink: 0; }

/* ── Navigation ── */
.sb-nav { flex: 1; padding: 6px 0 8px; }
.sb-nav-section { margin-bottom: 4px; }
.sb-section-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: rgba(255,255,255,.25);
    padding: 14px 18px 5px;
}
.sb-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px 9px 16px;
    margin: 1px 8px;
    border-radius: 10px;
    color: rgba(255,255,255,.58);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    position: relative;
}
.sb-link:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.9);
}
.sb-link.active {
    background: rgba(232,160,32,.14);
    color: #fff;
    font-weight: 600;
}
.sb-link.active .sb-link-icon { color: var(--accent); }
.sb-link-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: rgba(255,255,255,.45);
    transition: background .15s, color .15s;
}
.sb-link:hover .sb-link-icon {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
}
.sb-link.active .sb-link-icon {
    background: rgba(232,160,32,.18);
}
.sb-link-text { flex: 1; }
/* Active indicator bar */
.sb-link.active::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}
/* Badges */
.sb-badge {
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 3px 7px; border-radius: 99px;
    background: rgba(255,255,255,.15); color: #fff;
    flex-shrink: 0;
}
.sb-badge-red  { background: #dc2626; color: #fff; }
.sb-badge-gold { background: #b45309; color: #fff; }

/* ── Footer / Sign-out ── */
.sb-footer {
    padding: 10px 8px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: auto;
}
.sb-logout {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    color: rgba(255,255,255,.45);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sb-logout i {
    width: 32px; height: 32px;
    background: rgba(220,38,38,.1); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #f87171;
    transition: background .15s;
}
.sb-logout:hover { background: rgba(220,38,38,.08); color: #f87171; }
.sb-logout:hover i { background: rgba(220,38,38,.2); }

/* Legacy classes kept for other pages that may still use them */
.sidebar-user { display: none; }
.sidebar-menu { display: none; }
.sidebar-menu-link { display: none; }
.sidebar-section-label { display: none; }

.portal-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(13,59,110,0.07);
    margin-bottom: 22px;
    border: 1px solid #e5eaf2;
}
.portal-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eef0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fc;
    border-left: 4px solid var(--primary);
    border-radius: 12px 12px 0 0;
}
.portal-card-header h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--primary); }
.portal-card-body { padding: 20px; }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM EXPIRY / DUE-DATE ALERTS
   ══════════════════════════════════════════════════════════════════ */
@keyframes alertPulseRing {
    0%   { box-shadow: 0 0 0 0 var(--alert-glow-color); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes alertShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes pulseGlow {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.6; transform:scale(1.4); }
}
.dash-alerts-wrap {
    position: fixed;
    top: 72px;
    right: 20px;
    width: 420px;
    max-width: calc(100vw - 40px);
    z-index: 1040;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    animation: dashAlertIn .4s cubic-bezier(.4,0,.2,1) both;
}
.dash-alerts-wrap.closing {
    animation: dashAlertOut .32s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dashAlertIn {
    from { transform: translateY(-18px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes dashAlertOut {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-18px); opacity: 0; }
}
.dash-alerts-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(90deg, #0d3b6e, #1a5fa8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
}
.dash-alerts-pulse {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #f5c842;
    flex-shrink: 0;
    animation: pulseGlow 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(245,200,66,.5);
}
.dash-alerts-count {
    margin-left: auto;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
}
.dash-alerts-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
    padding: 0;
    margin-left: 6px;
}
.dash-alerts-close:hover { background: rgba(255,255,255,.32); transform: scale(1.1); }
.dash-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* ── Individual alert item ── */
.dash-alert-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
    transition: transform .2s;
    --alert-glow-color: rgba(245,200,66,.4);
}
.dash-alert-item:last-child { border-bottom: none; }
.dash-alert-item:hover { transform: translateX(3px); }

/* Shimmer sweep on hover */
.dash-alert-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity .3s;
}
.dash-alert-item:hover::before {
    opacity: 1;
    animation: alertShimmer 1.2s linear infinite;
}

/* Left accent stripe */
.dash-alert-item::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0;
}

/* ── Type colours ── */
.dash-alert-cert   { background: linear-gradient(135deg, #fffbeb 0%, #fef9f0 100%); }
.dash-alert-cert::after   { background: linear-gradient(180deg,#f59e0b,#d97706); }
.dash-alert-cert   .dai-icon-wrap { background: linear-gradient(135deg,#f59e0b,#d97706); }

.dash-alert-calib  { background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 100%); }
.dash-alert-calib::after  { background: linear-gradient(180deg,#3b82f6,#1d4ed8); }
.dash-alert-calib  .dai-icon-wrap { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }

.dash-alert-machine { background: linear-gradient(135deg, #f5f3ff 0%, #f3f0ff 100%); }
.dash-alert-machine::after { background: linear-gradient(180deg,#8b5cf6,#6d28d9); }
.dash-alert-machine .dai-icon-wrap { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }

/* ── Urgent glow ring on the icon ── */
.dash-alert-urgent .dai-icon-wrap {
    animation: alertPulseRing 1.8s ease-out infinite;
}

/* ── Components ── */
.dai-icon-wrap {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.dai-body {
    flex: 1;
    min-width: 0;
}
.dai-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: 2px;
}
.dai-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dai-notes {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dai-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.dai-days-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 4px 12px;
    min-width: 56px;
}
.dai-days-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}
.dai-days-txt {
    font-size: .6rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
}
/* urgent = red tint for days badge */
.dash-alert-urgent .dai-days-badge {
    background: rgba(239,68,68,.12);
}
.dash-alert-urgent .dai-days-num { color: #dc2626; }
.dash-alert-high .dai-days-badge { background: rgba(245,158,11,.12); }
.dash-alert-high .dai-days-num { color: #b45309; }

.dai-date {
    font-size: 10px;
    color: #94a3b8;
}
.dai-action-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(13,59,110,.08);
    transition: background .2s;
}
.dai-action-btn:hover { background: rgba(13,59,110,.16); color: var(--primary); }

@media (max-width: 575.98px) {
    .dash-alert-item { padding: 12px 14px; gap: 12px; }
    .dai-icon-wrap { width: 38px; height: 38px; font-size: .95rem; }
    .dai-title { font-size: 13px; }
}


/* === Client Page Header === */
.portal-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid #e8edf2; flex-wrap:wrap; gap:12px; }
.portal-page-header-left { display:flex; align-items:center; gap:12px; }
.portal-page-icon { width:44px; height:44px; border-radius:11px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; box-shadow:0 4px 14px rgba(13,59,110,0.2); }
.portal-page-title { font-size:20px; font-weight:700; color:var(--primary); margin:0; line-height:1.2; }
.portal-page-subtitle { font-size:12px; color:#64748b; margin-top:3px; }
.dashboard-stat-card {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 1px solid #e8edf2;
    border-left: 4px solid var(--primary);
}
.dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.dashboard-stat-card.accent { border-left-color: var(--accent); }
.dashboard-stat-card.success { border-left-color: #22a06b; }
.dashboard-stat-card.warning { border-left-color: #e8a020; }
.dashboard-stat-card.danger { border-left-color: #e5484d; }
.stat-card-icon {
    width: 54px; height: 54px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.dashboard-stat-card .stat-card-icon { background: rgba(13,59,110,.08); color: var(--primary); }
.dashboard-stat-card.accent .stat-card-icon { background: rgba(232,160,32,.1); color: var(--accent); }
.dashboard-stat-card.success .stat-card-icon { background: rgba(40,167,69,.1); color: #28a745; }
.dashboard-stat-card.warning .stat-card-icon { background: rgba(255,193,7,.1); color: #e0a800; }
.dashboard-stat-card.danger .stat-card-icon { background: rgba(220,53,69,.1); color: #dc3545; }
.stat-card-info .stat-val { font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--text-dark); }
.stat-card-info .stat-title { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ── Client Dashboard (legacy base kept for compat) ── */
.dash-welcome-banner-v1-compat {
    background: linear-gradient(135deg, #0d3b6e 0%, #1a5fa8 60%, #0b2d52 100%);
    border-radius: 16px;
    padding: 28px 32px;
    color: #fff;
    box-shadow: 0 4px 24px rgba(13,59,110,.25);
}
.dash-avatar {
    width: 72px; height: 72px;
    background: rgba(255,255,255,.18);
    border: 3px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.dash-welcome-greeting { font-size: 13px; opacity: .75; margin-bottom: 2px; }
.dash-welcome-name { font-size: 1.5rem; font-weight: 700; color: #fff; }
.btn-accent-solid {
    background: var(--accent); color: #fff; border: none;
    padding: 9px 22px; border-radius: 8px; font-weight: 600; font-size: 14px;
    transition: background .2s;
}
.btn-accent-solid:hover { background: #c8860a; color: #fff; }
.btn-banner-outline {
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: 12px;
    padding: 6px 14px; transition: background .2s;
}
.btn-banner-outline:hover { background: rgba(255,255,255,.22); color: #fff; }
.dash-stat-card {
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    display: flex; align-items: center; gap: 16px;
    position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}
.dash-stat-card::after {
    content: '';
    position: absolute;
    right: -14px; top: -14px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
}
.dash-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.22); color: #fff; }
.dash-stat-icon {
    width: 50px; height: 50px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; background: rgba(255,255,255,0.22); color: #fff;
}
.dash-stat-val { font-size: 1.85rem; font-weight: 700; color: #fff; line-height: 1; }
.dash-stat-label { font-size: 12px; color: rgba(255,255,255,0.82); margin-top: 4px; font-weight: 400; }
.dash-stat-bar { display: none; }

/* ── Dashboard Upgraded – Welcome Banner ── */
.dash-welcome-banner {
    background: linear-gradient(135deg, #071d38 0%, #0d3b6e 50%, #1152a8 100%);
    border-radius: 20px;
    padding: 0;
    color: #fff;
    box-shadow: 0 6px 32px rgba(13,59,110,.28);
    overflow: hidden;
    position: relative;
}
.dash-welcome-banner::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.dash-welcome-banner::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 68%);
    pointer-events: none;
}
.dash-banner-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 28px 32px;
}
.dash-avatar-wrap {
    position: relative; flex-shrink: 0;
}
.dash-avatar {
    width: 80px; height: 80px;
    background: rgba(255,255,255,.16);
    border: 3px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700; color: #fff;
}
.dash-avatar-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.35);
}
.dash-avatar-edit {
    position: absolute;
    bottom: 0; right: 0;
    width: 26px; height: 26px;
    background: var(--accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transition: background .2s, transform .2s;
}
.dash-avatar-edit:hover { background: #b45309; transform: scale(1.15); }
/* Profile completion bar */
.dash-profile-completion { max-width: 340px; margin-bottom: 10px; }
.dash-completion-track {
    height: 6px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden;
}
.dash-completion-fill {
    height: 100%;
    background: linear-gradient(90deg, #fde68a, #fbbf24);
    border-radius: 99px;
    transition: width 1s ease;
}
/* Inline banner stats strip */
.dash-banner-stats {
    display: flex; flex-wrap: wrap; gap: 0;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    margin-top: 12px;
}
.dbs-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 18px; gap: 1px; flex: 1; min-width: 60px;
}
.dbs-val { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; }
.dbs-lbl { font-size: 10px; color: rgba(255,255,255,.6); font-weight: 500; letter-spacing: .3px; }
.dbs-divider { width: 1px; background: rgba(255,255,255,.1); align-self: stretch; margin: 6px 0; }

/* ── Stat Cards v2 ── */
.dash-stat-v2 {
    display: flex; flex-direction: column; align-items: flex-start;
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    border: 1px solid #e9eef8;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    position: relative; overflow: hidden;
    transition: transform .22s cubic-bezier(.22,.68,0,1.2), box-shadow .22s ease, border-color .2s;
    text-decoration: none !important;
    color: inherit;
}
.dash-stat-v2::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--sc, #1a56db);
    border-radius: 16px 16px 0 0;
}
.dash-stat-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: rgba(0,0,0,.08);
    color: inherit;
}
.dsv2-icon {
    width: 44px; height: 44px;
    background: var(--scbg, rgba(26,86,219,.08));
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--sc, #1a56db);
    margin-bottom: 12px;
    transition: transform .22s ease;
}
.dash-stat-v2:hover .dsv2-icon { transform: scale(1.1) rotate(-5deg); }
.dsv2-val {
    font-size: 2rem; font-weight: 800; line-height: 1;
    color: #1e293b; margin-bottom: 4px;
    font-family: var(--font-main);
}
.dsv2-label { font-size: 12px; font-weight: 500; color: #64748b; }
.dsv2-glow {
    position: absolute; bottom: -20px; right: -20px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, var(--sc, #1a56db), transparent 68%);
    opacity: .06; border-radius: 50%; pointer-events: none;
}

/* ── Quick Action Tiles ── */
.dash-qa-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dash-qa-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 18px 12px;
    background: var(--qcbg, #f0f6ff);
    border-radius: 14px;
    border: 1.5px solid transparent;
    color: var(--qc, #1d4ed8);
    text-decoration: none !important;
    font-size: 12px; font-weight: 600; text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dash-qa-tile i { font-size: 22px; }
.dash-qa-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    border-color: var(--qc, #1d4ed8);
    color: var(--qc, #1d4ed8);
}

/* ── Case Status Progress Bars ── */
.dash-status-row {}
.dash-status-icon {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.dash-status-name { font-size: 13px; font-weight: 600; color: #1e293b; }
.dash-status-count { font-size: 14px; font-weight: 700; }
.dash-status-pct { font-size: 12px; min-width: 36px; text-align: right; }
.dash-prog-track {
    height: 8px; background: #f1f5f9; border-radius: 99px; overflow: hidden;
}
.dash-prog-fill {
    height: 100%; width: 0; border-radius: 99px;
    transition: width 1.1s cubic-bezier(.22,.68,0,1);
}

/* ── Activity Feed ── */
.dash-activity-feed { display: flex; flex-direction: column; gap: 0; }
.dai-feed-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.dai-feed-item:last-child { border-bottom: none; }
.dai-feed-dot {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin-top: 2px;
}
.dai-feed-body { flex: 1; min-width: 0; }
.dai-feed-ref {
    font-size: 12px; font-weight: 700; color: var(--primary);
    text-decoration: none; font-family: monospace;
}
.dai-feed-ref:hover { text-decoration: underline; }
.dai-feed-title { font-size: 13px; color: #475569; margin-top: 2px; }
.dai-feed-time { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ── Certificate Widget Row ── */
.dash-cert-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.dash-cert-row:last-of-type { border-bottom: none; }
.dash-cert-icon {
    width: 36px; height: 36px; background: #fef3c7; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #b45309; flex-shrink: 0;
}
.dash-cert-title { font-size: 13px; font-weight: 600; color: #1e293b; }
.dash-cert-meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.dash-cert-dl {
    width: 30px; height: 30px; flex-shrink: 0;
    background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 12px; text-decoration: none;
    transition: background .15s, color .15s;
}
.dash-cert-dl:hover { background: #b45309; color: #fff; border-color: #b45309; }

/* ── Ticket Row ── */
.dash-ticket-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.dash-ticket-row:last-of-type { border-bottom: none; }
.dash-ticket-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.dash-ticket-subject { font-size: 13px; font-weight: 500; color: #1e293b; }
.dash-ticket-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* ── Case # link ── */
.dash-case-num {
    font-family: monospace; font-size: 12px; font-weight: 700;
    color: var(--primary); text-decoration: none;
}
.dash-case-num:hover { text-decoration: underline; }

/* ── Empty state ── */
.dash-empty-icon {
    width: 76px; height: 76px; background: #f1f5f9; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 28px; color: #cbd5e1;
}

.table-responsive { border-radius: 8px; overflow: hidden; }
.table { font-size: 14px; margin: 0; }
.table thead th { background: var(--bg-section); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: none; padding: 12px 16px; white-space: nowrap; }
.table tbody td { padding: 12px 16px; vertical-align: middle; border-color: var(--border); }
.table-hover tbody tr:hover { background: var(--bg-light); }

/* Login Pages */
.auth-wrapper { min-height: 100vh; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; padding: 30px 15px; position: relative; }
.auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.auth-card {
    background: var(--white);
    border-radius: 18px;
    padding: 44px 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 2;
}
.auth-card .auth-logo { text-align: center; margin-bottom: 28px; }
.auth-card .auth-logo .logo-icon { margin: 0 auto 12px; width: 60px; height: 60px; font-size: 28px; }
.auth-card h2 { font-size: 1.6rem; color: var(--primary); text-align: center; margin-bottom: 6px; }
.auth-card .auth-subtitle { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }
.auth-links { text-align: center; margin-top: 20px; font-size: 13px; }
.auth-links a { color: var(--primary); font-weight: 600; }
.input-icon-wrap { position: relative; }
.input-icon-wrap > i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 5; pointer-events: none; }
.input-icon-wrap .form-control { padding-left: 40px; padding-right: 42px; }
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 10;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease;
}
.password-toggle:hover { color: var(--primary); }
.password-toggle:focus { outline: none; color: var(--primary); }
.password-toggle i { pointer-events: none; font-size: 14px; }
.btn-auth { width: 100%; padding: 13px; font-size: 15px; font-weight: 500; border-radius: 10px; background: var(--primary); border: none; color: var(--white); transition: var(--transition); }
.btn-auth:hover { background: var(--primary-dark); color: var(--white); }

/* ================================================
   UTILITIES
   ================================================ */
.text-primary { color: var(--primary) !important; }
.text-accent { color: var(--accent) !important; }
.bg-primary { background: var(--primary) !important; }
.bg-accent { background: var(--accent) !important; }
.rounded-custom { border-radius: var(--radius); }
.shadow-custom { box-shadow: var(--shadow); }
.overlay { position: absolute; inset: 0; }

/* ================================================
   HERO VISUAL (premium dashboard card)
   ================================================ */
.hero-visual { position: relative; width: 100%; }
.hv-card {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 28px;
    color: var(--white);
}
.hv-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hv-icon {
    width: 52px; height: 52px;
    background: var(--accent);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--white); flex-shrink: 0;
}
.hv-brand { font-size: 14px; font-weight: 700; color: var(--white); font-family: var(--font-main); }
.hv-sub { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }
.hv-live { font-size: 11px; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.hv-dot {
    width: 7px; height: 7px; background: #2ecc71;
    border-radius: 50%; display: inline-block;
    animation: hvPulse 1.5s ease infinite;
}
@keyframes hvPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}
.hv-stats-row { display: flex; gap: 8px; margin-bottom: 20px; }
.hv-stat {
    flex: 1; text-align: center; padding: 12px 6px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
}
.hv-snum { font-size: 1.35rem; font-weight: 700; color: var(--accent); line-height: 1; font-family: var(--font-main); }
.hv-slbl { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 4px; }
.hv-divider { height: 1px; background: rgba(255,255,255,.12); margin-bottom: 16px; }
.hv-pills-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.45); margin-bottom: 12px; }
.hv-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.hv-pill {
    font-size: 11px; font-weight: 600;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.13);
    cursor: default; transition: background .2s;
}
.hv-pill:hover { background: rgba(255,255,255,.18); }
.hv-pill.accent { background: rgba(232,160,32,.2); border-color: rgba(232,160,32,.35); color: var(--accent); }
.hv-pill i { margin-right: 4px; }
.hv-float {
    position: absolute;
    background: var(--white); color: var(--text-dark);
    border-radius: 10px; padding: 9px 16px;
    font-size: 12px; font-weight: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    white-space: nowrap; z-index: 3;
}
.hv-float-top    { top: 0;    right: -14px; }
.hv-float-bottom { bottom: 0; left:  -14px; }

/* ================================================
   ABOUT VISUAL GRID
   ================================================ */
.about-visual-wrap { position: relative; border-radius: 20px; overflow: visible; }
.av-main-card {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 20px 20px 0 0;
    padding: 36px 28px 32px;
    text-align: center; color: var(--white);
    position: relative; overflow: hidden;
}
.av-main-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.av-cert-icon-wrap {
    width: auto; height: auto;
    background: transparent; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--accent);
    margin: 0 auto 16px; position: relative; z-index: 1;
}
.av-main-num  { font-size: 3rem; font-weight: 800; color: var(--white); line-height: 1; font-family: var(--font-main); position: relative; z-index: 1; }
.av-main-lbl  { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 6px; position: relative; z-index: 1; }
.av-sub-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.av-sub-card  { background: var(--bg-light); padding: 20px 16px; text-align: center; transition: var(--transition); }
.av-sub-card:nth-child(3) { border-radius: 0 0 0 20px; }
.av-sub-card:nth-child(4) { border-radius: 0 0 20px 0; }
.av-sub-card:hover { background: rgba(13,59,110,.06); }
.av-sub-card.accent { background: rgba(232,160,32,.08); }
.av-sub-num  { font-size: 1.7rem; font-weight: 700; color: var(--primary); line-height: 1; font-family: var(--font-main); }
.av-sub-card.accent .av-sub-num { color: var(--accent); }
.av-sub-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.av-float-badge {
    position: absolute; top: 16px; right: -12px;
    background: var(--white); border-radius: 10px;
    padding: 9px 16px; font-size: 12px; font-weight: 600;
    color: var(--text-dark); box-shadow: var(--shadow-lg);
    white-space: nowrap; z-index: 5;
}

/* ================================================
   PROCESS / HOW IT WORKS
   ================================================ */
.process-section { background: #f7f9fd; }
.process-step {
    text-align: center; padding: 36px 22px 30px;
    background: var(--white); border-radius: 18px;
    box-shadow: 0 2px 20px rgba(13,59,110,.07);
    position: relative; height: 100%;
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s ease, border-color .3s ease;
    border: 1px solid #e5ecf8;
}
.process-step:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(13,59,110,.13); border-color: rgba(13,59,110,.2); }
.process-num {
    font-size: 5rem; font-weight: 800;
    color: rgba(13,59,110,.05);
    position: absolute; top: 6px; right: 16px;
    line-height: 1; font-family: var(--font-main);
    pointer-events: none; user-select: none;
    letter-spacing: -2px;
}
.process-icon {
    width: 76px; height: 76px;
    background: linear-gradient(135deg, #eef2fb, #e5eaf7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--primary);
    margin: 0 auto 20px; transition: var(--transition);
    border: 2px solid rgba(13,59,110,.08);
}
.process-step:hover .process-icon { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); border-color: transparent; box-shadow: 0 8px 24px rgba(13,59,110,.25); }
.process-step.final { background: linear-gradient(135deg, #0b2d52, var(--primary)); border-color: transparent; box-shadow: 0 8px 30px rgba(13,59,110,.28); }
.process-step.final .process-num   { color: rgba(255,255,255,.05); }
.process-step.final .process-icon  { background: rgba(255,255,255,.15); color: var(--white); border-color: rgba(255,255,255,.15); }
.process-step.final:hover .process-icon { background: rgba(255,255,255,.25); }
.process-step.final h5 { color: var(--white); }
.process-step.final p  { color: rgba(255,255,255,.7); }
.process-step h5 { font-size: 15.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
.process-step p  { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* ================================================
   CLIENTS ANIMATED MARQUEE
   ================================================ */
.clients-marquee-section {
    background: #fafbff;
    padding: 46px 0;
    border-top: 1px solid #eef0f5;
    border-bottom: 1px solid #eef0f5;
    overflow: hidden;
}
.clients-track-outer { position: relative; overflow: hidden; }
.clients-track-outer::before,
.clients-track-outer::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 80px; z-index: 2;
}
.clients-track-outer::before { left:  0; background: linear-gradient(to right, #fafbff, transparent); }
.clients-track-outer::after  { right: 0; background: linear-gradient(to left,  #fafbff, transparent); }
.clients-track {
    display: flex; gap: 16px;
    width: max-content; padding: 6px 0;
    animation: clientsScroll 32s linear infinite;
}
.clients-track:hover { animation-play-state: paused; }
@keyframes clientsScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.client-marquee-card {
    display: flex; flex-direction: column; align-items: center;
    min-width: 130px; background: var(--white);
    border-radius: 12px; padding: 18px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    text-align: center; border: 1px solid #eff2f8;
    transition: box-shadow .2s, transform .2s; cursor: default;
}
.client-marquee-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.client-letter-badge {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 800;
    letter-spacing: -.5px; margin-bottom: 10px; flex-shrink: 0;
}
.client-name-txt { font-size: 11px; color: #555; font-weight: 500; line-height: 1.3; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 991.98px) {
    .section-pad { padding: 55px 0; }
    .main-nav { padding: 9px 0; }
    .navbar-logo { width: 46px; height: 46px; }
    .navbar-brand-name { font-size: 1.55rem; }
    .main-nav .navbar-collapse {
        margin-top: 10px;
        border-top: 1px solid #e6edf5;
        padding-top: 10px;
    }
    .main-nav .nav-link {
        border-radius: 9px;
        padding: 10px 12px !important;
    }
    .btn-nav-login {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-top: 4px;
    }
    .hero-slide { min-height: 420px; }
    .hero-slider.has-bg-imgs { min-height: 420px; }
    .hero-slide.admin-slide { min-height: 420px; }
    .hero-img-col { display: none; }
    .portal-sidebar { width: 0; overflow: hidden; position: fixed; left: 0; top: 60px; height: calc(100vh - 60px); z-index: 1020; transform: translateX(-100%); transition: transform .3s; }
    .portal-sidebar.open { width: 260px; transform: translateX(0); }
    .portal-main { padding: 16px; }
    .about-content { padding-left: 0; margin-top: 30px; }
    .about-badge-wrap { display: none; }
    .about-logo-wrap { padding: 44px 28px; }
    .about-logo-card { padding: 28px 28px 20px; }
    .about-logo-img { width: 220px; }
    .alw-badge { min-width: 120px; padding: 8px 10px; gap: 8px; }
    .alwb-icon { width: 30px; height: 30px; }
    .alwb-num { font-size: .9rem; }
    .mega-menu { position: static !important; box-shadow: none; border: none; padding: 10px 0; }
    .auth-card { padding: 30px 24px; }
    /* Top bar mobile */
    .top-bar-contact:nth-child(3) { display: none; }
    .top-bar-divider:nth-child(4) { display: none; }
}
@media (max-width: 767.98px) {
    /* Hide top bar email on small screens to prevent overflow */
    .top-bar { font-size: 11px; height: 36px; }
    .ticker-label { height: 36px; margin-right: 12px; }
    .top-bar-right .top-bar-contact { display: none; }
    .top-bar-right .top-bar-divider { display: none; }
    .top-bar-right .btn-top-login { display: flex; }
    .events-ticker { display: none; }
}
@media (max-width: 575.98px) {
    .main-nav { padding: 7px 0; }
    .navbar-logo { width: 40px; height: 40px; }
    .navbar-brand-name { font-size: 1.42rem; }
    .hero-content h1 { font-size: 1.7rem; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .section-title h2 { font-size: 1.5rem; }
    .stat-card .stat-number { font-size: 2.2rem; }
    .top-bar { display: none; }
    .about-logo-wrap { padding: 36px 16px; }
    .about-logo-card { padding: 20px 18px 14px; border-radius: 20px; }
    .about-logo-img { width: 170px; }
    .alw-badge { display: none; }
}

/* ================================================
   SCROLL PROGRESS BAR
   ================================================ */
#scrollProgress {
    position: fixed;
    top: 0; left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 55%, var(--primary-light) 100%);
    z-index: 99999;
    transition: width 0.08s linear;
    box-shadow: 0 0 10px rgba(232,160,32,.5);
    pointer-events: none;
}

/* ================================================
   HERO SECTION ENHANCEMENTS
   ================================================ */

/* Floating particles in hero background */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.hp {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: hpFloat linear infinite;
}
@keyframes hpFloat {
    0%   { opacity: 0; transform: translateY(0px) scale(1); }
    15%  { opacity: var(--op, 0.18); }
    80%  { opacity: var(--op, 0.18); }
    100% { opacity: 0; transform: translateY(-140px) scale(0.35); }
}

/* Typed text animation in hero */
.hero-typed-wrap {
    display: inline;
    position: relative;
}
.hero-typed-text {
    color: var(--accent);
    transition: opacity 0.25s ease;
}
.typed-cursor {
    display: inline-block;
    width: 3px;
    height: 0.8em;
    background: var(--accent);
    margin-left: 2px;
    vertical-align: middle;
    border-radius: 1px;
    animation: cursorBlink 0.85s step-end infinite;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Hero scroll-down cue */
.hero-scroll-cue {
    position: absolute;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
}
.hero-scroll-cue span {
    font-size: 9px;
    color: rgba(255,255,255,.5);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.hero-scroll-cue-arrow {
    width: 20px; height: 20px;
    border-right: 2px solid rgba(255,255,255,.45);
    border-bottom: 2px solid rgba(255,255,255,.45);
    transform: rotate(45deg);
    animation: scrollArrowBounce 1.6s ease-in-out infinite;
    margin-top: 2px;
}
@keyframes scrollArrowBounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
    50%       { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}

/* ================================================
   SECTION WAVE DIVIDERS
   ================================================ */
.wave-divider-bottom {
    line-height: 0;
    overflow: hidden;
    margin-bottom: -1px;
}
.wave-divider-top {
    line-height: 0;
    overflow: hidden;
    margin-top: -1px;
}
.wave-divider-bottom svg,
.wave-divider-top svg {
    display: block;
    width: 100%;
}

/* ================================================
   PROCESS SECTION — CONNECTOR LINE
   ================================================ */
.process-steps-connected {
    position: relative;
}
.process-steps-connected::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border) 10%,
        var(--border) 90%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}
.process-steps-connected .process-step {
    z-index: 1;
    position: relative;
}
@media (max-width: 991.98px) {
    .process-steps-connected::before { display: none; }
}

/* ================================================
   SECTION REVEAL — SLIDE IN ANIMATIONS
   ================================================ */
[data-sr] {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.68, 0, 1.2);
}
[data-sr="left"]  { opacity: 0; transform: translateX(-55px); }
[data-sr="right"] { opacity: 0; transform: translateX(55px); }
[data-sr="up"]    { opacity: 0; transform: translateY(50px); }
[data-sr="zoom"]  { opacity: 0; transform: scale(0.87); }
[data-sr].sr-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ================================================
   SECTION ENTRANCE HIGHLIGHT LINE
   (extends the h2 underline when section enters view)
   ================================================ */
.section-title.sr-done h2::after {
    width: 70px;
}

/* ================================================
   ABOUT SECTION — FEATURE ITEM STAGGER
   ================================================ */
.about-feature-item:nth-child(1) { transition-delay: 0s; }
.about-feature-item:nth-child(2) { transition-delay: 0.1s; }
.about-feature-item:nth-child(3) { transition-delay: 0.2s; }

/* ================================================
   ACHIEVEMENT CARDS — GLOW ON IN-VIEW
   ================================================ */
.ach-card.sr-visible {
    animation: achCardIn 0.55s cubic-bezier(0.22, 0.68, 0, 1.2) both;
}
@keyframes achCardIn {
    from { opacity: 0; transform: translateY(30px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================
   INDUSTRY CARDS — SEQUENTIAL SLIDE-UP
   ================================================ */
.industry-card {
    transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease,
                transform 0.6s cubic-bezier(0.22, 0.68, 0, 1.2);
}

/* ================================================
   STATS SECTION — PULSE RINGS ON ICONS
   ================================================ */
.stats-section.in-view .stat-icon-clean,
.achievements-section.in-view .stat-icon-clean {
    animation: iconPulse 0.5s ease both;
}
.stats-section.in-view .stat-item:nth-child(3) .stat-icon-clean,
.achievements-section.in-view .stat-item:nth-child(3) .stat-icon-clean { animation-delay: 0.1s; }
.stats-section.in-view .stat-item:nth-child(5) .stat-icon-clean,
.achievements-section.in-view .stat-item:nth-child(5) .stat-icon-clean { animation-delay: 0.2s; }
.stats-section.in-view .stat-item:nth-child(7) .stat-icon-clean,
.achievements-section.in-view .stat-item:nth-child(7) .stat-icon-clean { animation-delay: 0.3s; }
@keyframes iconPulse {
    0%   { transform: scale(0.7);  opacity: 0.3; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 0.75; }
}

/* ================================================
   WHY SECTION FEATURE CARDS — SEQUENTIAL REVEAL
   ================================================ */
.why-feat-card[data-sr] {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.68, 0, 1.2),
                background var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}

/* ================================================
   NEWS CARDS — GROW underline on hover
   ================================================ */
.news-card-body h5 a {
    position: relative;
    display: inline;
}
.news-card-body h5 a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: width 0.3s ease;
}
.news-card:hover .news-card-body h5 a::after { width: 100%; }

/* ================================================
   CALLBACK SECTION — FLOATING BACKGROUND SHAPE
   ================================================ */
.callback-section {
    position: relative;
    overflow: hidden;
}
.callback-section::before {
    content: '';
    position: absolute;
    top: -100px; right: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,59,110,.05) 0%, transparent 65%);
    pointer-events: none;
    animation: cbFloatShape 10s ease-in-out infinite;
}
.callback-section::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,160,32,.05) 0%, transparent 65%);
    pointer-events: none;
    animation: cbFloatShape 12s ease-in-out infinite reverse;
}
@keyframes cbFloatShape {
    0%, 100% { transform: translate(0, 0); }
    33%       { transform: translate(15px, -15px); }
    66%       { transform: translate(-10px, 10px); }
}

/* ================================================
   SERVICE TABS — ANIMATED ACTIVE INDICATOR
   ================================================ */
.service-tab-btn {
    position: relative;
    overflow: hidden;
}
.service-tab-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
    border-radius: 99px;
}
.service-tab-btn.active::after { opacity: 1; }

/* ================================================
   SECTION BADGE — SUBTLE SHIMMER ANIMATION
   ================================================ */
.section-badge {
    position: relative;
    overflow: hidden;
}
.section-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    animation: badgeShimmer 4s ease-in-out infinite;
    border-radius: 99px;
    pointer-events: none;
}
@keyframes badgeShimmer {
    0%   { left: -80%; }
    40%  { left: 120%; }
    100% { left: 120%; }
}

/* ================================================
   HERO VISUAL CARD — ENHANCED ANIMATIONS
   ================================================ */
.hv-card {
    animation: hvCardFloat 5s ease-in-out infinite;
}
@keyframes hvCardFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
.hv-float-top {
    animation: floatTagTop 4s ease-in-out infinite;
}
.hv-float-bottom {
    animation: floatTagBottom 4.5s ease-in-out infinite;
}
@keyframes floatTagTop {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%       { transform: translateY(-6px) translateX(3px); }
}
@keyframes floatTagBottom {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%       { transform: translateY(6px) translateX(-3px); }
}

/* ================================================
   HOMEPAGE PREMIUM OVERRIDES
   ================================================ */
.home-premium {
    background: linear-gradient(180deg, #f7f9fd 0%, #f8fbff 40%, #f6f8fc 100%);
}
.home-premium .section-title {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.home-premium .section-title h2 {
    letter-spacing: -0.4px;
    font-size: clamp(1.75rem, 2.5vw, 2.35rem);
}
.home-premium .section-title p {
    font-size: 1.04rem;
    line-height: 1.75;
    color: #5f6f8f;
}

.hero-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 8px;
}
.hero-detail-tags span {
    background: rgba(10,30,60,.72);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 16px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .01em;
    box-shadow: 0 2px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition: background .25s, transform .2s, box-shadow .25s;
    animation: tagSlideIn .45s ease both;
}
.hero-detail-tags span:nth-child(1) { animation-delay: .05s; }
.hero-detail-tags span:nth-child(2) { animation-delay: .15s; }
.hero-detail-tags span:nth-child(3) { animation-delay: .25s; }
.hero-detail-tags span:hover {
    background: rgba(15,79,145,.80);
    border-color: rgba(255,255,255,.38);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-detail-tags i {
    color: #f5c842;
    font-size: .9rem;
    filter: drop-shadow(0 0 4px rgba(245,200,66,.6));
    flex-shrink: 0;
}
@keyframes tagSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* About section detail strip */
.about-proof-strip {
    margin: 22px 0 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.about-proof-item {
    background: linear-gradient(165deg, rgba(13,59,110,.08) 0%, rgba(13,59,110,.03) 100%);
    border: 1px solid rgba(13,59,110,.12);
    border-radius: 14px;
    padding: 14px 12px;
}
.about-proof-value {
    font-size: 1.18rem;
    font-weight: 800;
    color: #0b2f59;
    line-height: 1.1;
    margin-bottom: 4px;
}
.about-proof-label {
    font-size: .78rem;
    color: #61708d;
    line-height: 1.4;
}

/* Stats refinements */
.stats-intro {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 30px;
}
.stats-intro h3 {
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    margin-bottom: 8px;
}
.stats-intro p {
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.7;
}
.stat-sub-clean {
    font-size: .78rem;
    line-height: 1.55;
    color: rgba(255,255,255,.65);
    max-width: 220px;
    margin: 8px auto 0;
}

/* Achievements summary strip */
.ach-summary-band {
    margin: 14px auto 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.ach-summary-item {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ach-summary-item i {
    color: #f0b540;
}

/* Process metadata */
.process-meta {
    margin-top: 12px;
    font-size: .76rem;
    color: #68809c;
    border-top: 1px solid rgba(13,59,110,.1);
    padding-top: 9px;
    font-weight: 600;
}

/* Services insights */
.service-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 18px;
    justify-content: center;
}
.service-insight-item {
    background: #fff;
    border: 1px solid rgba(13,59,110,.12);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .84rem;
    color: #4a5e7e;
}
.service-insight-item strong {
    color: #0d3b6e;
    font-weight: 800;
}

/* IS search details */
.is-search-cues {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 16px;
}
.is-search-cues span {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.86);
    border-radius: 999px;
    font-size: .78rem;
    padding: 6px 12px;
}
.is-search-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Certification showcase details */
.certshow-meta {
    font-size: .72rem;
    color: rgba(255,255,255,.62);
    margin-top: -6px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.certshow-note {
    max-width: 900px;
    margin: 16px auto 0;
    text-align: center;
    color: #7b6542;
    font-size: .92rem;
    line-height: 1.7;
}

/* Why section enrichments */
.why-trust-list {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}
.why-trust-list div {
    color: rgba(244,241,235,.78);
    font-size: .92rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}
.why-trust-list i {
    color: #f0b540;
    margin-top: 2px;
}
.why-market-note {
    color: #6d7479;
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
    max-width: 48ch;
}

/* Industry summary */
.industry-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.industry-summary-item {
    background: #fff;
    border: 1px solid rgba(13,59,110,.1);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: .82rem;
    color: #54627e;
    line-height: 1.55;
}
.industry-summary-item strong {
    color: #0d3b6e;
}

/* News meta improvements */
.news-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(13,59,110,.4);
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
}

/* Testimonials summary */
.testi-summary {
    margin: 6px auto 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.testi-summary div {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .82rem;
}
.testi-summary strong {
    color: #fff;
}

/* Association card premium */
/* Callback strip */
.callback-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}
.callback-strip span {
    background: #eef4ff;
    color: #36567f;
    border: 1px solid #d4e4ff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 991.98px) {
    .about-proof-strip,
    .ach-summary-band,
    .industry-summary {
        grid-template-columns: 1fr;
    }
    .service-insights {
        justify-content: flex-start;
    }
    .stats-intro {
        margin-bottom: 24px;
    }
    .stat-sub-clean {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .home-premium .section-title p {
        font-size: .95rem;
    }
    .hero-detail-tags span {
        font-size: .78rem;
        padding: 7px 13px 7px 10px;
    }
    .service-insight-item,
    .testi-summary div,
    .callback-strip span,
    .is-search-cues span {
        font-size: .76rem;
    }
    .is-search-actions {
        align-items: stretch;
    }
    .is-search-actions .btn {
        width: 100%;
    }
}

/* ================================================
   HOMEPAGE REFINEMENT PASS
   ================================================ */
.home-premium .section-pad {
    padding: 96px 0;
}
.home-premium > section {
    position: relative;
}
.home-premium > section.section-in-view::before {
    opacity: 1;
}

/* Solid section palette */
.home-premium .about-section { background: #ffffff; }
.home-premium .stats-section {
    background: #10253c;
    border-top: none;
    border-bottom: none;
}
.home-premium .stats-section::before {
    background: #f0b540;
    height: 3px;
}
.home-premium .achievements-section {
    background: #163049;
}
.home-premium .ach-images-section {
    background: #f4f7fd;
}
.home-premium .process-section { background: #f5f7fb; }
.home-premium .services-section { background: #f7f1e7; }
.home-premium .is-search-section {
    background: #17364e;
}
.home-premium .is-search-section::before {
    opacity: .5;
}
.home-premium .cert-showcase-section { background: #ffffff; }
.home-premium .why-section {
    background: #f3efe7;
}
.home-premium .why-section::before {
    opacity: .45;
}
.home-premium .industries-section {
    background: #edf3f8;
}
.home-premium .industries-section::before {
    background-image: radial-gradient(circle, rgba(13,59,110,.06) 1.2px, transparent 1.2px);
    opacity: .55;
}
.home-premium .news-section { background: #fbf8f3; }
.home-premium .fgms-group-section { background: #f4f7fd; }
.home-premium .testimonials-section { background: #10253c; }
.home-premium .callback-section { background: #ffffff; }

/* Section spacing + precision */
.home-premium .container {
    position: relative;
    z-index: 1;
}
.home-premium .section-title {
    margin-bottom: 18px;
}
.home-premium .section-title h2 {
    margin-bottom: 14px;
}
.home-premium .section-title p {
    max-width: 760px;
}

/* Hero refinement */
.home-premium .hero-slide {
    min-height: 650px;
}
.home-premium .hero-content {
    padding: 104px 0 96px;
}
.home-premium .hero-content p {
    max-width: 620px;
}
.home-premium .hero-stats {
    gap: 16px;
    flex-wrap: wrap;
    border-top-color: rgba(255,255,255,.12);
}
.home-premium .hero-stat-item {
    min-width: 136px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}
.home-premium .btn-hero-primary,
.home-premium .btn-hero-outline {
    border-radius: 10px;
}

/* Card consistency */
.home-premium .process-step,
.home-premium .service-card,
.home-premium .industry-card,
.home-premium .news-card,
.home-premium .testimonial-card,
.home-premium .why-feat-card,
.home-premium .why-capability-card,
.home-premium .callback-form-wrap,
.home-premium .stats-inner,
.home-premium .ach-summary-item,
.home-premium .about-proof-item,
.home-premium .industry-summary-item {
    border-radius: 20px;
}
.home-premium .process-step,
.home-premium .service-card,
.home-premium .industry-card,
.home-premium .news-card,
.home-premium .callback-form-wrap {
    border: 1px solid rgba(12, 40, 73, .10);
    box-shadow: 0 12px 30px rgba(16, 37, 60, .06);
}
.home-premium .news-card,
.home-premium .callback-form-wrap,
.home-premium .process-step,
.home-premium .service-card,
.home-premium .industry-card {
    overflow: hidden;
}

/* Cleaner chip systems */
.home-premium .service-insight-item,
.home-premium .testi-summary div,
.home-premium .callback-strip span,
.home-premium .is-search-cues span,
.home-premium .ach-summary-item,
.home-premium .industry-summary-item {
    box-shadow: none;
}

/* Motion-ready reveal system */
.motion-ready .home-premium .process-step,
.motion-ready .home-premium .service-card,
.motion-ready .home-premium .industry-card,
.motion-ready .home-premium .news-card,
.motion-ready .home-premium .testimonial-card,
.motion-ready .home-premium .why-feat-card,
.motion-ready .home-premium .why-capability-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s ease, transform .72s cubic-bezier(.22,.68,0,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .home-premium .process-step.in-view,
.motion-ready .home-premium .service-card.in-view,
.motion-ready .home-premium .industry-card.in-view,
.motion-ready .home-premium .news-card.in-view,
.motion-ready .home-premium .testimonial-card.in-view,
.motion-ready .home-premium .why-feat-card.in-view,
.motion-ready .home-premium .why-capability-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Section-specific hover tuning */
.home-premium .process-step:hover,
.home-premium .service-card:hover,
.home-premium .industry-card:hover,
.home-premium .news-card:hover {
    transform: translateY(-8px);
}
.home-premium .why-feat-card:hover,
.home-premium .why-capability-card:hover,
.home-premium .testimonial-card:hover {
    transform: translateY(-6px);
}

/* Detail bands alignment */
.home-premium .about-proof-strip,
.home-premium .ach-summary-band,
.home-premium .industry-summary {
    align-items: stretch;
}
.home-premium .about-proof-item,
.home-premium .ach-summary-item,
.home-premium .industry-summary-item {
    min-height: 100%;
}

/* Dark section typography balance */
.home-premium .stats-section .stat-icon-clean,
.home-premium .stats-section .stat-num-clean,
.home-premium .stats-section .stat-lbl-clean {
    color: #fff;
}
.home-premium .stats-section .stat-lbl-clean {
    color: rgba(255,255,255,.78);
}
.home-premium .stats-section .stat-divider-v {
    background: rgba(255,255,255,.12);
}
.home-premium .stats-section .stat-item::before {
    background: #f0b540;
}

/* Services and news precision */
.home-premium .service-tabs {
    margin-bottom: 32px;
}
.home-premium .svc-img-zone {
    height: 210px;
    background: #efe6d8;
}
.home-premium .svc-card-body {
    padding: 22px 20px 16px;
}
.home-premium .svc-card-footer {
    padding: 0 20px 20px;
}
.home-premium .news-card-img {
    height: 220px;
}
.home-premium .news-card-body {
    padding: 24px 22px;
}

/* Testimonials and callback */
.home-premium .testimonial-card {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
}
.home-premium .callback-form-wrap {
    background: #fff;
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
    .home-premium .hero-visual,
    .home-premium .hv-card,
    .home-premium .hv-float-top,
    .home-premium .hv-float-bottom,
    .motion-ready .home-premium .process-step,
    .motion-ready .home-premium .service-card,
    .motion-ready .home-premium .industry-card,
    .motion-ready .home-premium .news-card,
    .motion-ready .home-premium .testimonial-card,
    .motion-ready .home-premium .why-feat-card,
    .motion-ready .home-premium .why-capability-card,
    .whyx-card,
    .whyx-icon {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 991.98px) {
    .home-premium .section-pad {
        padding: 82px 0;
    }
    .home-premium .hero-content {
        padding: 88px 0 84px;
    }
    .home-premium .hero-stats {
        gap: 12px;
    }
    .home-premium .hero-stat-item {
        min-width: calc(50% - 6px);
    }
    .certshow-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .certshow-tile.featured {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 330px;
    }
    .whyx-title {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 14px;
    }
    .whyx-title .section-badge,
    .whyx-title h2,
    .whyx-title p {
        grid-column: auto;
        justify-self: start;
    }
    .whyx-title h2,
    .whyx-core-card h3 {
        max-width: none;
    }
    .whyx-title p {
        max-width: 66ch;
    }
    .whyx-core-card {
        padding: 28px 24px;
    }
    .whyx-grid,
    .whyx-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .whyx-market-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .home-premium .section-pad {
        padding: 72px 0;
    }
    .certshow-gallery {
        grid-template-columns: 1fr;
    }
    .certshow-tile,
    .certshow-tile.featured {
        grid-column: auto;
        min-height: 260px;
    }
    .certshow-overlay {
        padding: 12px 12px 10px;
    }
    .whyx-core-card {
        padding: 28px 22px;
    }
    .whyx-grid,
    .whyx-metrics {
        grid-template-columns: 1fr;
    }
    .whyx-actions .btn {
        width: 100%;
    }
    .whyx-title {
        gap: 12px;
    }
    .whyx-title h2 {
        font-size: clamp(1.6rem, 7.2vw, 2rem);
        line-height: 1.12;
    }
    .whyx-title p {
        font-size: .94rem;
    }
    .whyx-market-row {
        padding: 16px;
    }
    .home-premium .hero-stat-item {
        min-width: 100%;
    }
    .home-premium .svc-img-zone {
        height: 180px;
    }
    .home-premium .news-card-img {
        height: 200px;
    }
}

/* 
   TICKET SYSTEM � CLIENT PORTAL CHAT
    */
.msg-thread { display:flex;flex-direction:column;gap:16px;max-height:520px;overflow-y:auto;padding:20px 16px;scroll-behavior:smooth; }
.msg-thread::-webkit-scrollbar { width:4px; }
.msg-thread::-webkit-scrollbar-thumb { background:#e2e8f0;border-radius:4px; }
.msg-row { display:flex;gap:10px;align-items:flex-end; }
.msg-row.mine { flex-direction:row-reverse; }
.msg-av { width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0; }
.msg-av.client-av { background:var(--primary);color:#fff; }
.msg-av.admin-av { background:#e8a020;color:#fff; }
.msg-body { max-width:74%; }
.msg-meta { font-size:11px;color:#94a3b8;margin-bottom:4px; }
.msg-row.mine .msg-meta { text-align:right; }
.msg-bubble { padding:10px 14px;font-size:13.5px;line-height:1.55;word-break:break-word;border-radius:4px 14px 14px 14px; }
.msg-row.theirs .msg-bubble { background:#f0f2f5;color:#1a202c; }
.msg-row.mine .msg-bubble { background:var(--primary);color:#fff;border-radius:14px 4px 14px 14px; }
.msg-img { max-width:220px;max-height:180px;border-radius:8px;display:block;margin-top:6px;cursor:zoom-in; }
.msg-row.mine .msg-img { border:1px solid rgba(255,255,255,.2); }
.msg-row.theirs .msg-img { border:1px solid rgba(0,0,0,.08); }
.msg-file { display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 12px;border-radius:6px;font-size:12px;text-decoration:none; }
.msg-row.mine .msg-file { background:rgba(255,255,255,.18);color:#fff; }
.msg-row.theirs .msg-file { background:rgba(0,0,0,.06);color:#374151; }
.drop-zone { border:2px dashed #dde3ee;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative; }
.drop-zone:hover,.drop-zone.dragover { border-color:var(--primary);background:rgba(13,59,110,.04); }
.drop-zone.has-file { border-color:#059669;background:#f0fdf4; }
.drop-zone input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%; }
.rating-star { display:inline-block;transition:transform .15s,color .1s;cursor:pointer; }
.rating-star:hover { transform:scale(1.2); }
.tkt-stat-sm { background:#fff;border-radius:10px;border:1px solid #edf0f6;padding:12px 16px;display:flex;align-items:center;gap:10px; }
.tkt-stat-sm .stat-num { font-size:20px;font-weight:800;line-height:1; }
.tkt-stat-sm .stat-lbl { font-size:11px;color:#8a94a6;text-transform:uppercase;letter-spacing:.4px;font-weight:600; }
.awaiting-reply-badge { background:#fff3cd;color:#856404;border:1px solid #ffd15b;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;white-space:nowrap; }

/*  Case Chat  */
.chat-online-badge { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:99px;padding:2px 10px; }
.chat-pulse { width:8px;height:8px;border-radius:50%;background:#059669;display:inline-block;animation:chatPulse 1.4s ease-in-out infinite; }
@keyframes chatPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.chat-messages { min-height:300px;max-height:440px;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:12px;background:#f8f9fc; }

.chat-msg { display:flex; }
.chat-msg-mine { justify-content:flex-end; }
.chat-msg-theirs { justify-content:flex-start; }

.chat-bubble { max-width:70%;word-break:break-word; }
.chat-msg-mine .chat-bubble { background:var(--primary,#0d3b6e);color:#fff;border-radius:18px 18px 4px 18px;padding:10px 14px; }
.chat-msg-theirs .chat-bubble { background:#fff;color:#1e293b;border:1px solid #e5e9f2;border-radius:18px 18px 18px 4px;padding:10px 14px;box-shadow:0 1px 3px rgba(0,0,0,.06); }

.chat-sender { font-size:11px;font-weight:700;opacity:.7;margin-bottom:3px; }
.chat-text { font-size:14px;line-height:1.5; }
.chat-meta { font-size:10px;margin-top:4px;opacity:.65;display:flex;align-items:center;justify-content:flex-end;gap:3px; }
.chat-msg-theirs .chat-meta { justify-content:flex-start; }

.chat-tick { font-size:10px;opacity:.6; }
.chat-tick-read { color:#60c0ff;opacity:1; }

.chat-loading { text-align:center;color:#94a3b8;padding:30px;font-size:13px; }
.chat-empty { text-align:center;color:#94a3b8;padding:40px 20px;display:flex;flex-direction:column;align-items:center; }
.chat-empty p { margin:0;font-size:13px; }

.chat-input-bar { display:flex;align-items:flex-end;gap:10px;padding:12px 16px;border-top:1px solid #e9ecef;background:#fff; }
.chat-textarea { flex:1;border:1px solid #dde3f0;border-radius:12px;padding:10px 14px;font-size:13px;font-family:inherit;resize:none;outline:none;overflow:hidden;max-height:120px;transition:border-color .2s;line-height:1.5; }
.chat-textarea:focus { border-color:var(--primary,#0d3b6e);box-shadow:0 0 0 3px rgba(13,59,110,.1); }
.chat-send-btn { width:44px;height:44px;border-radius:50%;border:none;background:var(--primary,#0d3b6e);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .1s; }
.chat-send-btn:hover { background:var(--primary-dark,#0a2d55);transform:scale(1.05); }
.chat-send-btn:active { transform:scale(.95); }

/* chat inside sidebar col-lg-4 – tighter height */
.col-lg-4 .chat-messages { min-height:220px; max-height:300px; }


/* ======================================================================
   NOTIFICATION BELL (Portal Header)
   ====================================================================== */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
    background: rgba(255,255,255,.12);
    border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; position: relative; transition: background .2s;
}
.notif-bell-btn:hover { background: rgba(255,255,255,.22); }
.notif-bell-btn.has-notifs { animation: bellShake 2.5s ease 1.2s 3; }
@keyframes bellShake {
    0%,100% { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-5deg); }
    75%  { transform: rotate(4deg); }
    85%  { transform: rotate(-3deg); }
}
.notif-bell-badge {
    position: absolute; top: -5px; right: -5px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--primary, #1a3a5c); line-height: 1;
    animation: badgePop .35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes badgePop {
    0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); }
}
.notif-dropdown {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    width: 340px; max-width: calc(100vw - 24px); background: #fff;
    border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.18); z-index: 9999;
    overflow: hidden; animation: dropFadeIn .2s ease;
}
@keyframes dropFadeIn {
    from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); }
}
.notif-bell-wrap.open .notif-dropdown { display: block; }
.notif-drop-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg,#1a3a5c 0%,#1e4f8a 100%); color: #fff;
}
.notif-drop-title { font-size: 14px; font-weight: 700; }
.notif-drop-count { font-size: 11px; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 20px; }
.notif-empty { padding: 32px 20px; text-align: center; color: #94a3b8; }
.notif-empty i { font-size: 28px; color: #22c55e; margin-bottom: 8px; display: block; }
.notif-empty p { margin: 0; font-size: 13px; }
.notif-summary-row {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.notif-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
    text-decoration: none; transition: filter .15s;
}
.notif-chip:hover { filter: brightness(.92); }
.notif-chip-fee  { background: #fef3c7; color: #92400e; }
.notif-chip-cert { background: #ede9fe; color: #5b21b6; }
.notif-chip-due  { background: #fee2e2; color: #991b1b; }
.notif-list { max-height: 280px; overflow-y: auto; }
.notif-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    text-decoration: none; border-bottom: 1px solid #f1f5f9; transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8fafc; }
.notif-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.notif-item-fee  .notif-item-icon { background: #fef3c7; color: #d97706; }
.notif-item-cert .notif-item-icon { background: #ede9fe; color: #7c3aed; }
.notif-item-due  .notif-item-icon { background: #fee2e2; color: #dc2626; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-sub { font-size: 11.5px; color: #64748b; margin-top: 1px; }
.notif-urgency-urgent .notif-item-title { color: #dc2626; }
.notif-item-arrow { color: #cbd5e1; font-size: 11px; }
.notif-drop-footer { padding: 10px 14px; text-align: center; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.notif-drop-footer a { font-size: 12px; color: #1e40af; font-weight: 600; text-decoration: none; }
.notif-drop-footer a:hover { text-decoration: underline; }

/* ======================================================================
   LOGIN REMINDER POPUP MODAL
   ====================================================================== */
.lrm-dialog { max-width: 560px; }
.lrm-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 72px rgba(0,0,0,.18); }
.lrm-header {
    display: flex; align-items: center; gap: 14px; padding: 20px 22px 18px;
    background: linear-gradient(135deg,#1a3a5c 0%,#1e4f8a 100%); color: #fff;
}
.lrm-header-icon {
    width: 48px; height: 48px; background: rgba(255,255,255,.15); border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    flex-shrink: 0; position: relative;
}
.lrm-header-badge {
    position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 2px solid #1a3a5c;
}
.lrm-header-text { flex: 1; }
.lrm-header-text h5 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.lrm-header-text p  { margin: 0; font-size: 12px; opacity: .8; }
.lrm-close-btn {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; transition: background .15s; flex-shrink: 0;
}
.lrm-close-btn:hover { background: rgba(255,255,255,.28); }
.lrm-tabnav {
    display: flex; background: #f8fafc; border-bottom: 2px solid #e2e8f0;
    overflow-x: auto; scrollbar-width: none;
}
.lrm-tabnav::-webkit-scrollbar { display: none; }
.lrm-tab {
    display: flex; align-items: center; gap: 6px; padding: 12px 18px;
    background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
    font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
    white-space: nowrap; transition: color .15s, border-color .15s;
}
.lrm-tab:hover { color: #1e293b; }
.lrm-tab.active { color: #1a3a5c; border-bottom-color: #1a3a5c; }
.lrm-tab-badge { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center; }
.lrm-tab-badge-fee  { background: #fef3c7; color: #92400e; }
.lrm-tab-badge-cert { background: #ede9fe; color: #5b21b6; }
.lrm-tab-badge-due  { background: #fee2e2; color: #991b1b; }
.lrm-body { padding: 0; max-height: 340px; overflow-y: auto; }
.lrm-panel-intro {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px;
    background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: 12.5px; color: #78350f;
}
.lrm-panel-intro i { font-size: 14px; color: #d97706; flex-shrink: 0; }
.lrm-intro-cert { background: #f5f3ff; border-bottom-color: #ddd6fe; color: #4c1d95; }
.lrm-intro-cert i { color: #7c3aed; }
.lrm-intro-due  { background: #fff1f2; border-bottom-color: #fecdd3; color: #881337; }
.lrm-intro-due  i { color: #e11d48; }
.lrm-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9; transition: background .15s;
}
.lrm-row:last-of-type { border-bottom: none; }
.lrm-row:hover { background: #f8fafc; }
.lrm-row-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.lrm-row-fee  .lrm-row-icon { background: #fef3c7; color: #d97706; }
.lrm-row-cert .lrm-row-icon { background: #ede9fe; color: #7c3aed; }
.lrm-row-due  .lrm-row-icon { background: #fee2e2; color: #dc2626; }
.lrm-row-body { flex: 1; min-width: 0; }
.lrm-row-title { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrm-row-sub   { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.lrm-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.lrm-amount    { font-size: 14px; font-weight: 800; color: #0f172a; }
.lrm-action-btn {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
    text-decoration: none; border: 1.5px solid; transition: all .15s;
}
.lrm-action-fee { color: #d97706; border-color: #d97706; }
.lrm-action-fee:hover { background: #d97706; color: #fff; }
.lrm-days-chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; letter-spacing: .02em; }
.lrm-chip-urgent { background: #fee2e2; color: #dc2626; }
.lrm-chip-high   { background: #fef3c7; color: #d97706; }
.lrm-chip-medium { background: #dbeafe; color: #1d4ed8; }
.lrm-chip-sub    { font-size: 10.5px; color: #94a3b8; }
.lrm-panel-footer { padding: 12px 18px 14px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.lrm-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.lrm-footer-note { font-size: 11.5px; color: #94a3b8; }

@media (max-width: 576px) {
    .notif-dropdown { width: calc(100vw - 16px); right: -60px; }
    .lrm-dialog { max-width: 100%; margin: 10px; }
    .lrm-tab { padding: 10px 12px; font-size: 12px; }
    .lrm-row { padding: 10px 14px; }
    .lrm-body { max-height: 260px; }
}