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

:root {
	--ostendo-blue: #5B9BD5;
	--ostendo-dark: #2E5C8A;
	--primary-gradient-start: #006994;
	--primary-gradient-end: #00D4FF;
	--accent-color: #00FFC6;
	--header-bg: linear-gradient(135deg, #001F3F 0%, #003D5C 100%);
	--card-border: #00D4FF;
	--timeline-line: linear-gradient(180deg, #00D4FF 0%, #00FFC6 100%);
}

body {
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* background: linear-gradient(135deg, #000B14 0%, #001F3F 100%); */
	background: linear-gradient(180deg, #001f44 50%, #001F5F 100%);
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

/* Header */
.ostendo-header {
	background: var(--header-bg);
	padding: 20px 40px;
	box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 3px solid var(--accent-color);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-container {
	display: flex;
	align-items: center;
	gap: 20px;
}

.logo-icon {
	width: 50px;
	height: 50px;

	display: flex;
	align-items: center;
	justify-content: center;
	
}

.logo-icon svg {
	width: 50px;
	height: 50px;
}

.brand-text h1 {
	font-size: 28px;
	color: #ffffff;
	font-weight: 700;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin-bottom: 2px;
	text-shadow: 0 0 20px rgba(0, 255, 198, 0.5);
}

.brand-text .tagline-refined {
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.5px;
}

.brand-text .tagline-refined .emphasis {
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
}

.brand-text .tagline-refined .normal {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
}

.brand-text .tagline-refined .separator {
	color: #00D4FF;
	margin: 0 8px;
	font-weight: 300;
}

/* Hamburger Menu Button */
.hamburger-btn {
	width: 50px;
	height: 50px;
	background: transparent;
	border: 2px solid var(--accent-color);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	transition: all 0.3s ease;
	padding: 10px;
	box-shadow: 0 0 15px rgba(0, 255, 198, 0.3);
}

.hamburger-btn:hover {
	background: rgba(0, 255, 198, 0.1);
	box-shadow: 0 0 25px rgba(0, 255, 198, 0.5);
	transform: scale(1.05);
}

.hamburger-btn span {
	width: 26px;
	height: 3px;
	background: var(--accent-color);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
	opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* Navigation Menu */
.nav-menu {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: linear-gradient(135deg, #001F3F 0%, #003D5C 100%);
	box-shadow: -4px 0 30px rgba(0, 212, 255, 0.4);
	transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1001;
	overflow-y: auto;
	border-left: 2px solid var(--accent-color);
}

.nav-menu.active {
	right: 0;
}

.nav-header {
	padding: 30px;
	border-bottom: 2px solid rgba(0, 255, 198, 0.3);
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 255, 198, 0.05) 100%);
	position: relative;
}

.nav-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 2px solid var(--accent-color);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	padding: 0;
}

.nav-close-btn:hover {
	background: rgba(0, 255, 198, 0.15);
	box-shadow: 0 0 15px rgba(0, 255, 198, 0.4);
	transform: scale(1.1);
}

.nav-close-btn svg {
	width: 18px;
	height: 18px;
	stroke: var(--accent-color);
	stroke-width: 2;
}

.nav-header h2 {
	color: #ffffff;
	font-size: 24px;
	margin-bottom: 8px;
	text-shadow: 0 0 20px rgba(0, 255, 198, 0.5);
}

.nav-header p {
	color: var(--accent-color);
	font-size: 14px;
}

.nav-items {
	padding: 20px 0;
}

/* Search Box Styles */
.nav-search {
	padding: 20px 30px;
	border-bottom: 1px solid rgba(0, 255, 198, 0.2);
}

.search-container {
	position: relative;
}

.search-input {
	width: 100%;
	padding: 12px 16px 12px 44px;
	background: rgba(0, 0, 0, 0.3);
	/* border: 2px solid rgba(0, 212, 255, 0.3); */
	border-radius: 10px;
	color: #ffffff;
	font-size: 15px;
	font-family: inherit;
	transition: all 0.3s ease;
}

.btn {
	--bs-btn-color: #ffffff;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
	outline: none;
	border-color: var(--accent-color);
	background: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 20px rgba(0, 255, 198, 0.2);
}

.search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	stroke: rgba(0, 212, 255, 0.7);
	pointer-events: none;
}

.search-clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.search-clear:hover {
	background: rgba(255, 255, 255, 0.2);
}

.search-clear svg {
	width: 14px;
	height: 14px;
	stroke: rgba(255, 255, 255, 0.7);
}

.search-input:not(:placeholder-shown) + .search-icon + .search-clear {
	display: flex;
}

/* Search Results */
.search-results {
	display: none;
	padding: 0 20px 20px 20px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
}

.search-results.active {
	display: block;
}

.search-results-header {
	padding: 10px;
	font-size: 13px;
	color: rgba(0, 255, 198, 0.7);
	border-bottom: 1px solid rgba(0, 255, 198, 0.1);
	margin-bottom: 10px;
}

.search-result-item {
	padding: 14px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
	margin-bottom: 6px;
	background: rgba(0, 0, 0, 0.2);
}

.search-result-item:hover {
	background: rgba(0, 255, 198, 0.1);
	border-left-color: var(--accent-color);
}

.search-result-title {
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 4px;
}

.search-result-title mark {
	background: rgba(0, 255, 198, 0.3);
	color: #ffffff;
	padding: 0 2px;
	border-radius: 2px;
}

.search-result-desc {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.4;
}

.search-result-category {
	display: inline-block;
	font-size: 11px;
	color: var(--accent-color);
	background: rgba(0, 255, 198, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
	margin-top: 6px;
}

.search-no-results {
	padding: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
}

.search-no-results svg {
	width: 40px;
	height: 40px;
	stroke: rgba(0, 212, 255, 0.3);
	margin-bottom: 10px;
}

.nav-item {
/*	padding: 20px 30px; */
	cursor: pointer;
	transition: all 0.3s ease;
	border-left: 4px solid transparent;
	display: flex;
	align-items: center;
	gap: 20px;
}

.nav-item:hover {
	background: rgba(0, 255, 198, 0.1);
	/* border-left-color: var(--accent-color); */
}

.nav-item.active {
	background: rgba(0, 212, 255, 0.2);
	border-left-color: var(--accent-color);
}

.nav-item-number {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 400;
	color: var(--accent-color);
	flex-shrink: 0;
}

.nav-item:hover .nav-item-number {
	color: #ffffff;
	transform: scale(1.2);
}

.nav-item-content h3 {
	color: #ffffff;
	font-size: 18px;
	margin-bottom: 4px;
}

.nav-item-content p {
	color: rgba(0, 255, 198, 0.7);
	font-size: 13px;
}

/* Grouped Navigation Styles */
.nav-group {
	border-bottom: 1px solid rgba(0, 255, 198, 0.15);
}

.nav-group:last-child {
	border-bottom: none;
}

.nav-group-header {
	padding: 18px 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.3s ease;
	border-left: 4px solid transparent;
}

.nav-group-header:hover {
	background: rgba(0, 255, 198, 0.08);
	border-left-color: var(--accent-color);
}

.nav-group-header-content {
	display: flex;
	align-items: center;
	gap: 15px;
}

.nav-group-icon {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.nav-group-icon svg {
	width: 20px;
	height: 20px;
	stroke: #ffffff;
	fill: none;
	stroke-width: 2;
}

.nav-group-header h3 {
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.nav-group-arrow {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.nav-group-arrow svg {
	width: 16px;
	height: 16px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 2;
}

.nav-group.expanded .nav-group-arrow {
	transform: rotate(180deg);
}

.nav-group-items {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: rgba(0, 0, 0, 0.2);
}

.nav-group.expanded .nav-group-items {
	max-height: 500px;
}

.nav-group-items .nav-item {
	padding: 14px 30px 14px 55px;
	border-left: 4px solid transparent;
}

.nav-group-items .nav-item-number {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.nav-group-items .nav-item-content h3 {
	font-size: 15px;
}

.nav-group-items .nav-item-content p {
	font-size: 12px;
}

/* Overlay */
.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 31, 63, 0.8);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 999;
}

.nav-overlay.active {
	opacity: 1;
	visibility: visible;
}

.nav-tabs {
	border: 10px;
    padding: 10px;
    min-width: 320px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%) !important;
    border-color: #2E5C8A !important;
}

.tab-content {
}

.nav-tabs .nav-link {
	border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	color: #6ee0f3;
}

article h1 {
	font-size: 48px;
	font-weight: 400;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #00D4FF 0%, #00FFC6 100%);
	-webkit-background-clip: text;
	/*-webkit-text-fill-color: transparent;*/
	-webkit-text-fill-color: #00D4FF;
	background-clip: text;
	line-height: 1.2;
}

article p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0.1rem;
	max-width: 1200px;
}

.mark, mark {
	padding: 0;
	opacity: 80%;
	border-radius: 4px;
}

.jstree-anchor, .jstree-anchor:link, .jstree-anchor:visited, .jstree-anchor:active
 {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: none;
	/* font-weight: bold; */
	font-size: small;
}

.jstree-anchor:hover {
	color: rgba(0,0,0,0.9);
	text-shadow: none;
}

.jstree-default .jstree-clicked {
	background: #0095c0;
	border-radius: 4px;
}

input#input-search {
	border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.header-label h2 {
	color: #ffffff;
}

/* Hero Section */
.hero {
/*	padding: 100px 40px; */
/*	text-align: center; */
	background: linear-gradient(135deg, rgba(0, 105, 148, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 50%, rgba(0, 255, 198, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 1;
}

.hero h1 {
	font-size: 72px;
	font-weight: 400;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #00D4FF 0%, #00FFC6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.2;
}

.hero p {
	font-size: 24px;
	color: rgba(255, 255, 255, 0.9);
	max-width: 800px;
	margin: 0 auto 40px;
	line-height: 1.6;
}

/* Badge Bar */
.badge-bar {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 50px;
	flex-wrap: wrap;
}

.stat-badge {
	background: linear-gradient(135deg, rgba(0, 105, 148, 0.3) 0%, rgba(0, 212, 255, 0.2) 100%);
	border: 2px solid var(--card-border);
	border-radius: 50px;
	padding: 12px 30px;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	text-decoration: none;
	cursor: pointer;
}

.stat-badge:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 255, 198, 0.4);
	border-color: var(--accent-color);
}

.stat-badge-icon {
	width: 24px;
	height: 24px;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: #001F3F;
}

.stat-badge-icon.pricing {
	color: #00FF88;
}

.stat-badge-text {
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

/* Image Carousel */
.hero-carousel {
	margin-top: 40px;
	position: relative;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.carousel-container {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	border-radius: 16px;
	border: 2px solid var(--card-border);
	background: linear-gradient(135deg, rgba(0, 31, 63, 0.6) 0%, rgba(0, 61, 92, 0.4) 100%);
	box-shadow: 0 10px 40px rgba(0, 212, 255, 0.2);
}

.carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.carousel-slide.active {
	opacity: 1;
	pointer-events: auto;
}

.carousel-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.carousel-slide-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.carousel-slide-link:hover .carousel-caption h4 {
	color: var(--accent-color);
}

.carousel-label {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.carousel-label.infographic {
	background: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
	color: #001F3F;
}

.carousel-label.screenshot {
	background: linear-gradient(135deg, #00FFC6 0%, #00CC9E 100%);
	color: #001F3F;
}

.carousel-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(transparent, rgba(0, 15, 30, 0.95));
}

.carousel-caption h4 {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.carousel-caption p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin: 0;
}

.carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(0, 31, 63, 0.8);
	border: 2px solid var(--accent-color);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
}

.carousel-nav:hover {
	background: var(--accent-color);
	box-shadow: 0 0 20px rgba(0, 255, 198, 0.5);
}

.carousel-nav svg {
	width: 20px;
	height: 20px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 2;
	transition: stroke 0.3s ease;
}

.carousel-nav:hover svg {
	stroke: #001F3F;
}

.carousel-prev {
	left: 15px;
}

.carousel-next {
	right: 15px;
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(0, 212, 255, 0.3);
	border: 1px solid var(--card-border);
	cursor: pointer;
	transition: all 0.3s ease;
}

.carousel-dot:hover {
	background: rgba(0, 212, 255, 0.5);
}

.carousel-dot.active {
	background: var(--accent-color);
	box-shadow: 0 0 10px rgba(0, 255, 198, 0.5);
}

@media (max-width: 768px) {
	.carousel-container {
		height: 300px;
	}
	.carousel-nav {
		width: 36px;
		height: 36px;
	}
	.carousel-nav svg {
		width: 16px;
		height: 16px;
	}
	.carousel-caption h4 {
		font-size: 16px;
	}
	.carousel-caption p {
		font-size: 13px;
	}
}

.cta-button {
	display: inline-block;
	padding: 18px 48px;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: white;
	text-decoration: none;
	border-radius: 30px;
	font-size: 18px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
	border: 2px solid transparent;
}

.cta-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 255, 198, 0.5);
	border-color: var(--accent-color);
}

/* Feature Grid Section */
.features-section {
	padding: 80px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.section-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-header h2 {
	font-size: 36px;
	font-weight: 600;
	background: linear-gradient(135deg, #00D4FF 0%, #00FFC6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 15px;
}

.section-header p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
	max-width: 600px;
	margin: 0 auto;
}

/* Primary Features - 3 large cards */
.primary-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 60px;
}

.feature-card {
	background: linear-gradient(135deg, rgba(0, 31, 63, 0.6) 0%, rgba(0, 61, 92, 0.4) 100%);
	padding: 35px;
	border-radius: 20px;
	border: 2px solid var(--card-border);
	box-shadow: 0 10px 40px rgba(0, 212, 255, 0.2);
	backdrop-filter: blur(10px);
	transition: all 0.4s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 255, 198, 0.3);
	border-color: var(--accent-color);
}

.feature-card.primary {
	padding: 45px;
}

.feature-card.primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--accent-color) 100%);
}

.feature-card-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

.feature-card.primary .feature-card-icon {
	width: 70px;
	height: 70px;
}

.feature-card-icon svg {
	width: 32px;
	height: 32px;
	stroke: #ffffff;
	fill: none;
	stroke-width: 2;
}

.feature-card.primary .feature-card-icon svg {
	width: 38px;
	height: 38px;
}

.feature-card h3 {
	color: #ffffff;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 15px;
}

.feature-card.primary h3 {
	font-size: 26px;
}

.feature-card p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.7;
}

.feature-card.primary p {
	font-size: 16px;
}

.feature-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
}

.feature-card-link:hover {
	gap: 12px;
}

.feature-card-link svg {
	width: 16px;
	height: 16px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 2;
}

/* Secondary Features - compact grid */
.secondary-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}

.secondary-features .feature-card {
	padding: 28px;
}

.secondary-features .feature-card-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 18px;
}

.secondary-features .feature-card-icon svg {
	width: 26px;
	height: 26px;
}

.secondary-features .feature-card h3 {
	font-size: 18px;
	margin-bottom: 10px;
}

.secondary-features .feature-card p {
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1200px) {
	.primary-features {
		grid-template-columns: 1fr;
	}
	.secondary-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.secondary-features {
		grid-template-columns: 1fr;
	}
	.features-section {
		padding: 60px 20px;
	}
}

/* Screenshot Gallery Section */
.screenshot-section {
	padding: 80px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.screenshot-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 25px;
}

.screenshot-card {
	background: linear-gradient(135deg, rgba(0, 31, 63, 0.6) 0%, rgba(0, 61, 92, 0.4) 100%);
	border-radius: 16px;
	border: 2px solid var(--card-border);
	overflow: hidden;
	transition: all 0.4s ease;
	cursor: pointer;
	text-decoration: none;
}

.screenshot-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 255, 198, 0.3);
	border-color: var(--accent-color);
}

.screenshot-thumbnail {
	width: 100%;
	height: 140px;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.screenshot-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	transition: transform 0.4s ease;
}

.screenshot-card:hover .screenshot-thumbnail img {
	transform: scale(1.05);
}

.screenshot-info {
	padding: 18px;
}

.screenshot-info h4 {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}

.screenshot-info p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.4;
}

.screenshot-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 500;
}

.screenshot-link svg {
	width: 14px;
	height: 14px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 2;
	transition: transform 0.3s ease;
}

.screenshot-card:hover .screenshot-link svg {
	transform: translateX(4px);
}

@media (max-width: 1200px) {
	.screenshot-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.screenshot-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.screenshot-section {
		padding: 60px 20px;
	}
}

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

/* Featured Resources Section */
.resources-section {
	padding: 80px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.section-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}

.section-header-row .section-header {
	margin-bottom: 0;
	text-align: left;
}

.section-header-row .section-header p {
	margin: 0;
}

.view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-color);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 20px;
	border: 1px solid var(--accent-color);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.view-all-link:hover {
	background: var(--accent-color);
	color: #000B14;
}

.view-all-link svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.3s ease;
}

.view-all-link:hover svg {
	transform: translateX(4px);
}

.resources-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}

.resource-card {
	background: linear-gradient(135deg, rgba(0, 31, 63, 0.6) 0%, rgba(0, 61, 92, 0.4) 100%);
	border-radius: 16px;
	border: 2px solid var(--card-border);
	overflow: hidden;
	transition: all 0.4s ease;
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

.resource-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 255, 198, 0.3);
	border-color: var(--accent-color);
}

.resource-thumbnail {
	width: 100%;
	height: 160px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.resource-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease;
}

.resource-card:hover .resource-thumbnail img {
	transform: scale(1.05);
}

.resource-thumbnail.pdf-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #001F3F 0%, #003D5C 100%);
}

.pdf-icon-large {
	text-align: center;
}

.pdf-icon-large svg {
	width: 50px;
	height: 50px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 1.5;
	margin-bottom: 8px;
}

.pdf-icon-large span {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

.resource-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.resource-badge.infographic {
	background: linear-gradient(135deg, #00FFC6 0%, #00D4FF 100%);
	color: #000B14;
}

.resource-badge.guide {
	background: linear-gradient(135deg, #5B9BD5 0%, #2E5C8A 100%);
	color: #ffffff;
}

.resource-badge.announcement {
	background: linear-gradient(135deg, #2E5C8A 0%, #5B9BD5 100%);
	color: #ffffff;
}

.resource-info {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.resource-info h4 {
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	line-height: 1.3;
}

.resource-info p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.5;
	flex: 1;
}

.resource-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid rgba(0, 212, 255, 0.2);
}

.resource-meta span {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.resource-meta svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.resource-action {
	margin-left: auto;
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px;
}

.resource-action svg {
	stroke: var(--accent-color);
	transition: transform 0.3s ease;
}

.resource-card:hover .resource-action svg {
	transform: translateX(4px);
}

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

@media (max-width: 768px) {
	.resources-grid {
		grid-template-columns: 1fr;
	}
	.resources-section {
		padding: 60px 20px;
	}
	.section-header-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Footer */
.footer {
	background: linear-gradient(135deg, #001F3F 0%, #000B14 100%);
	padding: 60px 40px 30px;
	border-top: 3px solid var(--accent-color);
	box-shadow: 0 -10px 40px rgba(0, 212, 255, 0.2);
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
}

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

.footer-about h3,
.footer-column h3 {
	font-size: 20px;
	font-weight: 500;
	color: var(--accent-color);
	margin-bottom: 20px;
	text-shadow: 0 0 15px rgba(0, 255, 198, 0.4);
}

.footer-about p {
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 20px;
}

.newsletter-form {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.newsletter-input {
	flex: 1;
	padding: 12px 20px;
	border-radius: 25px;
	border: 2px solid var(--card-border);
	background: rgba(0, 61, 92, 0.3);
	color: white;
	font-size: 14px;
	outline: none;
	transition: all 0.3s ease;
}

.newsletter-input:focus {
	border-color: var(--accent-color);
	box-shadow: 0 0 20px rgba(0, 255, 198, 0.3);
}

.newsletter-btn {
	padding: 12px 30px;
	border-radius: 25px;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: white;
	border: none;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.newsletter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 255, 198, 0.5);
}

.social-links {
	display: flex;
	gap: 15px;
}

.social-link {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.social-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 255, 198, 0.5);
	background: var(--accent-color);
	color: #001F3F;
}

.footer-column ul {
	list-style: none;
}

.footer-column ul li {
	margin-bottom: 12px;
}

.footer-column ul li a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
}

.footer-column ul li a:hover {
	color: var(--accent-color);
	padding-left: 5px;
	text-shadow: 0 0 10px rgba(0, 255, 198, 0.5);
}

.footer-bottom {
	border-top: 1px solid rgba(0, 255, 198, 0.2);
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-copyright {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

.footer-legal {
	display: flex;
	gap: 30px;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-size: 14px;
	transition: all 0.3s ease;
}

.footer-legal a:hover {
	color: var(--accent-color);
	text-shadow: 0 0 10px rgba(0, 255, 198, 0.5);
}

@media (max-width: 1200px) {
	.footer-main {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.hero h1 {
		font-size: 40px;
	}
	
	.hero p {
		font-size: 18px;
	}
	
	.footer-main {
		grid-template-columns: 1fr;
	}
	
	.footer-bottom {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}
}

/* Ask Ostendo Showcase Section */
.showcase-section {
	padding: 60px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.showcase-container {
	position: relative;
	background: linear-gradient(135deg, rgba(0, 31, 63, 0.4) 0%, rgba(0, 61, 92, 0.2) 100%);
	border-radius: 24px;
	border: 2px solid var(--card-border);
	padding: 40px;
	box-shadow: 0 10px 60px rgba(0, 212, 255, 0.15);
	overflow: hidden;
	transition: all 0.4s ease;
}

.showcase-container:hover {
	box-shadow: 0 15px 80px rgba(0, 255, 198, 0.2);
	border-color: var(--accent-color);
}

.showcase-header {
	text-align: center;
	margin-bottom: 30px;
}

.showcase-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 198, 0.1) 100%);
	border: 1px solid var(--accent-color);
	border-radius: 20px;
	padding: 8px 20px;
	margin-bottom: 15px;
	animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 10px rgba(0, 255, 198, 0.3);
	}
	50% {
		box-shadow: 0 0 20px rgba(0, 255, 198, 0.5);
	}
}

.showcase-badge svg {
	width: 16px;
	height: 16px;
	stroke: var(--accent-color);
	fill: none;
	stroke-width: 2;
}

.showcase-badge span {
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.showcase-header h3 {
	font-size: 28px;
	font-weight: 600;
	background: linear-gradient(135deg, #00D4FF 0%, #00FFC6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 10px;
}

.showcase-header p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
}

.showcase-image-wrapper {
	display: flex;
	justify-content: center;
}

.showcase-image {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
	transition: transform 0.4s ease;
}

.showcase-image-wrapper:hover .showcase-image {
	transform: scale(1.02);
}

@media (max-width: 768px) {
	.showcase-section {
		padding: 40px 20px;
	}
	
	.showcase-container {
		padding: 25px;
	}
	
	.showcase-header h3 {
		font-size: 22px;
	}
}

:root {
  --sidebar-width:        350px;     /* matches your existing hnd-splitter left:350px */
  --transition-time:      0.35s;
  --transition-ease:      cubic-bezier(0.4, 0, 0.2, 1); /* smooth, natural feel */
  --overlay-bg:           rgba(0, 0, 0, 0.5);
}

/* ────────────────────────────────────────────────
   Large screens (≥ 768px) → fixed sidebar
───────────────────────────────────────────────── */
@media (min-width: 768px) {
/*
  body.md-nav-expanded {
    padding-left: var(--sidebar-width);
    transition: padding-left var(--transition-time) var(--transition-ease);
  }

  #panel-left.md-nav-expanded {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(0);
    transition: transform var(--transition-time) var(--transition-ease);
    z-index: 900;  
    overflow-y: auto;
    background: white;  
    box-shadow: 2px 0 12px rgba(0,0,0,0.12);
  }
*/
  #main {
    margin-left: var(--sidebar-width);
/*    transition: margin-left var(--transition-time) var(--transition-ease); */
  }

  #hnd-splitter {
    left: var(--sidebar-width) !important;
  }
  
  header.headroom {
	display: none;
  }
  
  /* Hide mobile-only elements */
  .nav-menu,
  .nav-overlay,
  .mask[data-bs-toggle="sm-nav-expanded"] {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  #panel-left {
  /*position: fixed; */
  height: 5px;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
/*    transition: transform var(--transition-time) var(--transition-ease); */
    z-index: 1050;          /* above header & content */
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }


  body.sm-nav-expanded #panel-left {
    transform: translateX(0);
  }


  body.sm-nav-expanded #main {
 /*  transform: translateX(var(--sidebar-width)); */
 /*   transition: transform var(--transition-time) var(--transition-ease); */
  }


  .nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s; /* fade out first */
    z-index: 1040;
  }

  body.sm-nav-expanded .nav-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }


  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85vw;         
    max-width: 380px;
    transform: translateX(-100%);
    transition: transform var(--transition-time) var(--transition-ease);
    z-index: 1051;
    background: white;
    overflow-y: auto;
  }

  body.sm-nav-expanded .nav-menu {
    transform: translateX(0);
  }


  .mask[data-bs-toggle="sm-nav-expanded"] {
    position: fixed;
    inset: 0;
    z-index: 900;
    cursor: pointer;
  }


  body.sm-nav-expanded {
    overflow: hidden;
  }
  
  header.headroom {
	display: block;
  }
}

.hnd-toggle {
  position: relative;
  padding: 9px 10px;             
  background-color: transparent;  
  border: none;              
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.hnd-toggle.btn-default {
  border-color: transparent;
  box-shadow: none;
  z-index: 1060;
}

.icon-bar {
  display: block;
  width: 22px;                     
  height: 3px;                   
  background-color: #2E5C8A;          
  border-radius: 2px;
  transition: all 0.35s ease;
  margin: 4px auto;          
}


.hnd-toggle:hover .icon-bar,
.hnd-toggle:focus .icon-bar {
  background-color: #333;     
}

.hnd-toggle.active .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hnd-toggle.active .icon-bar:nth-child(2) {
  opacity: 0;
}

.hnd-toggle.active .icon-bar:nth-child(3) {
  transform: rotate(-90deg) translate(7px, -6px);
}

@media (min-width: 768px) {
  .hnd-toggle {
    display: none;            
  }
}

@media (max-width: 767.98px) {
  .hnd-toggle {
    font-size: 1.4rem;           
    margin: 8px 12px 8px auto;   
  }
}