@keyframes pulse {

    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }

}

@keyframes nodepulse {

    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(79,195,232,0.6)); }

}

.h2-blue {
    color: #0E6FA8;
}

.text-light-blue,
.text-light-blue p {
    color: #4FC3E8 !important;
}

/* Hero Section */

.page-header {
    display: none;
}

#hero-section {
    background: radial-gradient(ellipse at 80% 20%, rgba(79, 195, 232, 0.15) 0%, transparent 60%), #FFFFFF;
    border-bottom: 1px solid #E5E5EA;
}

.breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #5D6177;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

.breadcrumb a {
    color: #0E6FA8;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb .divider {
    opacity: 0.4;
    margin: 0 8px;
}

.home-subtext {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: fit-content;
    padding: 8px 16px;
    background-color: #4FC3E826;
    border-style: none;
    border-radius: 50px;
}

.home-subtext p {
    margin-bottom: 0;
    font-family: "SFNS Display", Sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 19px;
    letter-spacing: 1.44px;
    color: #0E6FA8;
}

.home-subtext::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4fc3e8;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

h1 em {
    background: linear-gradient(135deg, #4FC3E8 0%, #0E6FA8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: unset;
}

.page-hero-decoration {
    position: absolute !important;
    top: 50%;
    right: -8%;
    transform: translateY(-50%);
    width: 480px !important;
    aspect-ratio: 1;
    opacity: 0.25;
}

.page-hero-decoration svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mol-node {
	transform-origin: center;
	transform-box: fill-box;
	animation: nodepulse 4s ease-in-out infinite;
	animation-delay: 0s;
}

@media (max-width: 768px) {

    .page-hero-decoration {
        opacity: 0.1;
        top: 100%;
    }

}

/* Search Section */

.search-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: #F5F4F0;
    border: 2px solid #E5E5EA;
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    display: flex;
    gap: 0;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-wrap:focus-within {
    border-color: #2A99C9;
    box-shadow: 0 0 0 4px rgba(79,195,232,0.12);
}

.search-wrap svg {
    color: #0E6FA8;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    padding: 14px 16px !important;
    background: transparent;
    border: 0 !important;
    outline: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 16px;
    color: #292E4C;
}

.search-input::placeholder {
    color: #5D6177;
    opacity: 0.7;
}

.search-clear {
    padding: 12px 22px !important;
    background: #292E4C !important;
    color: white !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 0 !important;
    transition: background 0.15s !important;
}

.search-clear:hover {
    background: #3D4368 !important;
}

.search-meta {
    text-align: center;
    max-width: 720px;
    margin: 14px auto 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #5D6177;
    letter-spacing: 0.04em;
}

.search-meta .count {
    color: #0E6FA8;
    font-weight: 700;
}

@media (max-width: 768px) {

    .search-wrap {
        flex-wrap: wrap !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .search-input {
        width: 100% !important;
        padding: 12px 8px !important;
    }

    .search-clear {
        width: 100% !important;
        padding: 12px !important;
    }

}

/* FAQ's Categories Navigation */

.category-nav {
    background: #F5F4F0;
    padding: 0;
    position: sticky;
    top: 78px;
    z-index: 50;
}

.category-nav .container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #292E4C;
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.18s;
}

.category-pill .num {
    color: #0E6FA8;
    font-weight: 700;
}

@media (max-width: 768px) {

    .category-pill {
        font-size: 11px;
        font-weight: 500;
        padding: 6px 12px;
    }
    
}

/* No Results Section */

.no-results {
    max-width: 600px;
    margin: 64px auto;
    text-align: center;
    padding: 48px 32px;
    background: #F5F4F0;
    border: 1px dashed #C8C8D0;
    border-radius: 12px;
    display: none;
}

.no-results.visible {
    display: block;
}

.no-results h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #292E4C;
}

.no-results p {
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Tabs - FAQs */

.faq-list details {
	background: #FFFFFF;
	border: 1px solid #E5E5EA;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.2s;
}

.faq-list details:hover {
	border-color: #2A99C9;
}

.faq-list summary {
	padding: 22px 26px !important;
	border: none !important;
}

.faq-list summary:hover {
    background: rgba(79, 195, 232, 0.06);
}

.faq-list .answer {
	padding: 0 26px 24px;
	border: none;
    color: #5D6177;
    font-size: 14.5px;
    line-height: 1.7;
}

.faq-list .answer a {
    text-decoration: underline;
    color: #0E6FA8;
    font-weight: 600;
}

.faq-list .answer p,
.faq-list .answer li,
.faq-list .answer strong {
    font-size: 14.5px;
    line-height: 1.7;
    color: #5D6177;
}

.faq-list .answer a:hover {
    color: #E89A1F;
}

.faq-list .e-n-accordion-item-title-icon {
	position: absolute !important;
	right: 24px;
	background: #e5f6fc !important;
	width: 28px !important;
	height: 28px;
	border-radius: 50%;
	display: flex !important;
	justify-content: center;
}

.faq-list summary[aria-expanded="true"] .e-n-accordion-item-title-icon {
	background: #0E6FA8 !important;
}

.faq-list .e-n-accordion-item-title-icon svg {
	fill: #0E6FA8 !important;
}

.faq-list summary[aria-expanded="true"] .e-n-accordion-item-title-icon svg {
	fill: #FFFFFF !important;
}

.faq-list .callout {
    margin: 12px 0;
    padding: 14px 18px;
    background: #F5F4F0;
    border-left: 3px solid #2A99C9;
    border-radius: 0 6px 6px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #292E4C;
    line-height: 1.6;
}

.back-transparent {
    background-color: transparent !important;
}

.e-n-accordion-item.hidden {
    display: none !important;
}

@media (max-width: 1200px) {

	.faq-list summary {
		padding-right: 60px !important;
	}

}

/* Still Have a Question */

.cta-section {
    background: radial-gradient(ellipse at 80% 30%, rgba(79,195,232,0.15) 0%, transparent 60%);
}

.faqs-bottom-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.faqs-bottom-cta .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: all 0.2s;
    cursor: pointer;
    border: 0;
}

.btn-primary {
    background: #FBB03B;
    color: #292E4C;
}

.btn-primary:hover {
    background: #E89A1F;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 111, 168, 0.10);
}

.faqs-bottom-cta .btn-secondary {
    background: transparent;
    color: #4FC3E8;
    border: 1.5px solid rgba(79,195,232,0.5);
    padding: 12.5px 26.5px;
}

.faqs-bottom-cta .btn-secondary:hover {
    background: #4FC3E8;
    color: #292E4C;
    border-color: #4FC3E8;
}

.bottom-meta {
    margin-top: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.06em;
}