/* Canonical blog index family bundle. */

body.page-blog-index *, body.page-blog-index *::before, body.page-blog-index *::after {box-sizing: border-box; margin: 0; padding: 0;}

body.page-blog-index {font-family: "Inter", sans-serif; color: var(--text); background: var(--cs-white); line-height: 1.6;}

body.page-blog-index h1, body.page-blog-index h2, body.page-blog-index h3, body.page-blog-index h4 {font-family: "Patua One", serif; letter-spacing: 0.04em;}

body.page-blog-index a {text-decoration: none; color: inherit;}

body.page-blog-index nav {position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,102,.08); padding: 0 5%; display: flex; align-items: center; justify-content: space-between; height: 68px;}

body.page-blog-index .nav-logo img {height: 36px;}

body.page-blog-index .nav-links {display: flex; gap: 32px; list-style: none; align-items: center;}

body.page-blog-index .nav-links a {font-size: 14px; font-weight: 500; color: var(--navy); transition: color .2s;}

body.page-blog-index .nav-links a:hover {color: var(--blue);}

body.page-blog-index .nav-dropdown {position: relative;}

body.page-blog-index .nav-dropdown-toggle {display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--navy); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; transition: color .2s;}

body.page-blog-index .nav-dropdown-toggle:hover {color: var(--blue);}

body.page-blog-index .nav-dropdown-toggle svg {transition: transform .2s;}

body.page-blog-index .nav-dropdown.open .nav-dropdown-toggle svg {transform: rotate(180deg);}

body.page-blog-index .nav-dropdown-menu {display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); background: var(--cs-white); border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,102,.13); border: 1px solid rgba(0,0,102,.08); min-width: 240px; padding: 8px; z-index: 200;}

body.page-blog-index .nav-dropdown.open .nav-dropdown-menu {display: block;}

body.page-blog-index .nav-dropdown-menu a {display: block; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--navy); transition: background .15s, color .15s;}

body.page-blog-index .nav-dropdown-menu a:hover {background: var(--light); color: var(--blue); font-weight: 600;}

body.page-blog-index .nav-cta {background: var(--navy); color: var(--cs-white); padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; transition: background .2s, transform .15s;}

body.page-blog-index .nav-cta:hover {background: var(--blue); transform: translateY(-1px);}

body.page-blog-index .page-header {padding: 120px 5% 80px; background: linear-gradient(135deg, var(--cs-light), var(--cs-blue-soft) 50%, var(--cs-blue-wash)); position: relative; overflow: hidden;}

body.page-blog-index .page-header::before {content: ""; position: absolute; top: -100px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(71,112,173,.08), transparent 70%); border-radius: 50%;}

body.page-blog-index .breadcrumb {font-size: 13px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1;}

body.page-blog-index .breadcrumb a {color: var(--blue);}

body.page-blog-index .breadcrumb a:hover {color: var(--navy);}

body.page-blog-index .page-header h1 {font-size: clamp(36px, 5vw, 52px); line-height: 1.2; color: var(--navy); margin-bottom: 16px; position: relative; z-index: 1;}

body.page-blog-index .page-header p {font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 600px; position: relative; z-index: 1;}

body.page-blog-index .insights-controls {max-width: 1200px; margin: 60px auto 0; padding: 0 5%;}

body.page-blog-index .search-box {position: relative; margin-bottom: 32px;}

body.page-blog-index .search-box input {width: 100%; max-width: 400px; padding: 14px 20px 14px 48px; border: 1.5px solid var(--cs-input-border); border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--text); outline: none; transition: border .2s;}

body.page-blog-index .search-box input:focus {border-color: var(--blue); background: var(--cs-white);}

body.page-blog-index .search-box input::placeholder {color: var(--muted);}

body.page-blog-index .search-icon {position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;}

body.page-blog-index .filters {display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px;}

body.page-blog-index .filter-btn {padding: 10px 18px; border: 1.5px solid var(--cs-input-border); border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--navy); background: var(--cs-white); cursor: pointer; transition: all .2s;}

body.page-blog-index .filter-btn:hover {border-color: var(--blue); color: var(--blue);}

body.page-blog-index .filter-btn.active {background: var(--navy); color: var(--cs-white); border-color: var(--navy);}

body.page-blog-index .insights-grid {max-width: 1200px; margin: 60px auto; padding: 0 5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}

body.page-blog-index .insight-card {border-radius: 16px; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,102,.07); transition: transform .25s, box-shadow .25s, opacity .25s; opacity: 0; transform: translateY(20px); animation: fadeInUp-page-insights-home .5s ease forwards;}

body.page-blog-index .insight-card:nth-child(1) {animation-delay: 0s;}

body.page-blog-index .insight-card:nth-child(2) {animation-delay: 0.1s;}

body.page-blog-index .insight-card:nth-child(3) {animation-delay: 0.2s;}

body.page-blog-index .insight-card:nth-child(4) {animation-delay: 0.3s;}

body.page-blog-index .insight-card:nth-child(5) {animation-delay: 0.4s;}

body.page-blog-index .insight-card:nth-child(6) {animation-delay: 0.5s;}

body.page-blog-index .insight-card:hover {transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,102,.12);}

body.page-blog-index .insight-card a {display: block; color: var(--text);}

body.page-blog-index .insight-img {height: 200px; background: var(--light); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}

body.page-blog-index .insight-img img {width: 100%; height: 100%; object-fit: cover;}

body.page-blog-index .insight-img-placeholder {width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,0,102,.1), rgba(71,112,173,.1));}

body.page-blog-index .insight-body {padding: 24px;}

body.page-blog-index .insight-tag {display: inline-block; background: var(--light); color: var(--blue); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;}

body.page-blog-index .insight-title {font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3;}

body.page-blog-index .insight-excerpt {font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px;}

body.page-blog-index .insight-meta {font-size: 12px; color: var(--muted); font-weight: 500;}

body.page-blog-index .empty-state {text-align: center; padding: 80px 5%;}

body.page-blog-index .empty-state h2 {font-size: 28px; color: var(--navy); margin-bottom: 16px;}

body.page-blog-index .empty-state p {font-size: 16px; color: var(--muted); margin-bottom: 32px;}

body.page-blog-index .empty-state-btn {display: inline-block; background: var(--navy); color: var(--cs-white); padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; transition: all .2s;}

body.page-blog-index .empty-state-btn:hover {background: var(--blue); transform: translateY(-2px);}

body.page-blog-index .pagination {display: flex; justify-content: center; gap: 8px; margin: 60px 0;}

body.page-blog-index .pagination a, body.page-blog-index .pagination span {padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all .2s;}

body.page-blog-index .pagination a {background: var(--light); color: var(--navy); cursor: pointer;}

body.page-blog-index .pagination a:hover {background: var(--blue); color: var(--cs-white);}

body.page-blog-index .pagination span.active {background: var(--navy); color: var(--cs-white);}

body.page-blog-index .pagination span.dots {color: var(--muted);}

body.page-blog-index .cta-section {padding: 100px 5%; background: linear-gradient(135deg, var(--navy), var(--cs-navy-bright)); text-align: center; position: relative; overflow: hidden;}

body.page-blog-index .cta-section::before {content: ""; position: absolute; top: -80px; right: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,181,5,.1), transparent 70%); border-radius: 50%;}

body.page-blog-index .cta-inner {position: relative; z-index: 1; max-width: 700px; margin: 0 auto;}

body.page-blog-index .cta-section h2 {font-size: clamp(28px, 3.5vw, 44px); color: var(--cs-white); margin-bottom: 16px;}

body.page-blog-index .cta-section p {font-size: 17px; color: rgba(255,255,255,.75); margin-bottom: 36px; line-height: 1.7;}

body.page-blog-index .btn-gold {background: var(--gold); color: var(--navy); padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 15px; border: none; cursor: pointer; transition: all .2s; font-family: inherit;}

body.page-blog-index .btn-gold:hover {background: var(--cs-amber-hover); transform: translateY(-2px);}

body.page-blog-index footer {background: var(--cs-white); padding: 64px 5% 32px; border-top: 1px solid var(--cs-footer-border);}

body.page-blog-index .footer-grid {max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px;}

body.page-blog-index .footer-brand img {height: 32px; margin-bottom: 18px;}

body.page-blog-index .footer-brand p {font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 260px;}

body.page-blog-index .footer-socials {display: flex; gap: 12px; margin-top: 20px;}

body.page-blog-index .social-btn {width: 36px; height: 36px; border-radius: 8px; background: var(--light); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background .2s, color .2s;}

body.page-blog-index .social-btn:hover {background: var(--gold); color: var(--navy);}

body.page-blog-index .footer-col h4 {font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px;}

body.page-blog-index .footer-col ul {list-style: none; display: flex; flex-direction: column; gap: 10px;}

body.page-blog-index .footer-col ul a {font-size: 14px; color: var(--muted); transition: color .2s;}

body.page-blog-index .footer-col ul a:hover {color: var(--blue);}

body.page-blog-index .footer-bottom {max-width: 1200px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--cs-footer-border); display: flex; justify-content: space-between; align-items: center;}

body.page-blog-index .footer-bottom-text {font-size: 13px; color: var(--cs-gray-400);}

body.page-blog-index .footer-bottom-links {display: flex; gap: 24px;}

body.page-blog-index .footer-bottom-links a {font-size: 13px; color: var(--cs-gray-400);}

body.page-blog-index .footer-bottom-links a:hover {color: var(--blue);}

@media (max-width: 900px){
body.page-blog-index .insights-grid {grid-template-columns: 1fr;}

body.page-blog-index .footer-grid {grid-template-columns: 1fr;}

body.page-blog-index .filters {flex-direction: column;}

body.page-blog-index .filter-btn {width: 100%;}

body.page-blog-index .nav-links {display: none;}
}

body.page-blog-index .nav-links a[href="./"] {color: var(--blue); font-weight: 600;}

@keyframes fadeInUp-page-insights-home {
0% {opacity: 0; transform: translateY(20px);}
100% {opacity: 1; transform: translateY(0);}
}

body.page-blog-index .empty-state-full {grid-column: 1 / -1;}