/* ============================================
   Job Seeker OS Homepage Styles
   ============================================ */

/* Hero Section */
.js-hero-section {
	padding: 5rem 2rem;
	background: linear-gradient(180deg, rgba(235, 245, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.js-hero-container {
	max-width: 1200px;
	margin: 0 auto;
}

.js-hero-content {
	max-width: 800px;
	text-align: center;
	margin: 0 auto;
}

.js-hero-tagline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: rgba(0, 0, 0, 0.85);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--background-white);
	margin-bottom: 1.5rem;
}

.js-hero-tagline i {
	font-size: 0.75rem;
	color: var(--background-white);
}

.js-hero-heading {
	font-size: 3.5rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
}

.js-hero-heading br {
	display: block;
}

.js-hero-accent {
	background: linear-gradient(90deg, #3B82F6 0%, #2563EB 40%, #1E3A8A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--primary-color); /* Fallback for browsers that don't support gradient text */
	display: inline-block;
}

.js-hero-description {
	font-size: 1.25rem;
	color: var(--text-secondary);
	margin-bottom: 2.5rem;
	line-height: 1.6;
	font-weight: 400;
}

.js-hero-description br {
	display: block;
}

.js-hero-description-bold {
	font-weight: bold;
	color: var(--text-primary);
}

.js-hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.js-hero-btn-outline {
	border-color: var(--border-color);
	color: var(--text-primary);
}

.js-hero-btn-outline:hover:not(:disabled) {
	background-color: var(--background-white);
	color: var(--text-primary);
	border-color: var(--border-color);
}

/* Key Statistics Section */
.js-categories-section {
	padding: 0rem 2rem 4rem 2rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(235, 245, 255, 0.3) 100%);
}

.js-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
}

.js-category-card {
	text-align: center;
	padding: 2.5rem 2rem;
	background-color: var(--background-white);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.js-category-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
	text-decoration: none;
	color: inherit;
}

.js-category-card-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	font-size: 2rem;
}

.js-category-icon-blue {
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--primary-color);
}

.js-category-icon-orange {
	background-color: rgba(251, 146, 60, 0.15);
	color: #FB923C;
}

.js-category-icon-green {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22C55E;
}

.js-category-icon-purple {
	background-color: rgba(147, 51, 234, 0.15);
	color: #9333EA;
}

.js-category-icon-pink {
	background-color: rgba(255, 182, 193, 0.3);
	color: #DC2626;
}

.js-category-card-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
}

.js-category-card-description {
	font-size: 1rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

.js-category-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--primary-color);
	transition: gap 0.3s ease;
}

.js-category-card:hover .js-category-card-link {
	gap: 0.75rem;
}

/* Problem & Solution Section */
.js-problem-solution-section {
	padding: 5rem 2rem;
	background-color: var(--background-gray);
}

.js-section-title {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--text-primary);
	text-align: center;
	margin-bottom: 1rem;
}

.js-section-subtitle {
	font-size: 1rem;
	color: var(--text-secondary);
	text-align: center;
	margin-bottom: 3rem;
	line-height: 1.6;
}

.js-problem-solution-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.js-problem-solution-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	background-color: var(--background-white);
}

.js-problem-box {
	padding: 2rem;
	background-color: rgba(255, 182, 193, 0.3);
	display: flex;
	flex-direction: column;
	text-align: left;
}

.js-solution-box {
	padding: 2rem;
	background-color: rgba(235, 245, 255, 0.5);
	display: flex;
	flex-direction: column;
	text-align: left;
}

.js-problem-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--border-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	background-color: rgba(255, 182, 193, 0.4);
	color: #DC2626;
	flex-shrink: 0;
}

.js-solution-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	background-color: var(--primary-color);
	color: var(--background-white);
	flex-shrink: 0;
}

.js-problem-label,
.js-solution-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.75rem;
}

.js-problem-label {
	color: #DC2626;
}

.js-solution-label {
	color: var(--primary-color);
}

.js-problem-text,
.js-solution-text {
	font-size: 1rem;
	color: var(--text-primary);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

/* Tools Section */
.js-tools-section {
	padding: 5rem 2rem;
	background-color: var(--background-white);
}

.js-tools-section .section-container {
	text-align: center;
}

.js-tools-tagline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: var(--background-gray);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 1.5rem;
}

.js-tools-tagline i {
	font-size: 0.875rem;
	color: var(--text-primary);
}

.js-tool-category {
	margin-bottom: 5rem;
}

.js-tool-category:last-child {
	margin-bottom: 0;
}

.js-category-header {
	padding: 2rem;
	border-radius: var(--border-radius-lg);
	margin-bottom: 2rem;
	position: relative;
	text-align: left;
}

.js-category-header-purple {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
	background-color: rgba(102, 126, 234, 0.1);
}

.js-category-header-pink {
	background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
	background-color: rgba(240, 147, 251, 0.1);
}

.js-category-header-blue {
	background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
	background-color: rgba(79, 172, 254, 0.1);
}

.js-category-header-green {
	background: linear-gradient(135deg, rgba(67, 233, 123, 0.15) 0%, rgba(56, 249, 215, 0.15) 100%);
	background-color: rgba(67, 233, 123, 0.1);
}

.js-category-header-purple-light {
	background: linear-gradient(135deg, rgba(251, 194, 235, 0.15) 0%, rgba(166, 193, 238, 0.15) 100%);
	background-color: rgba(251, 194, 235, 0.1);
}

.js-category-count-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--background-white);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

.js-category-title {
	font-size: 1.75rem;
	font-weight: bold;
	color: var(--text-primary);
	margin: 0 0 1rem 0;
	text-align: left;
}

.js-category-description {
	font-size: 1rem;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.6;
	text-align: left;
}

.js-category-description br {
	display: block;
}

.js-category-description {
	font-size: 1rem;
	color: var(--text-secondary);
	margin-bottom: 2rem;
	line-height: 1.6;
}

.js-tools-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.js-tools-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.js-tool-item {
	background-color: var(--background-white);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	box-shadow: var(--shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.js-tool-item:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.js-tool-item-featured {
	border: 2px solid var(--primary-color);
}

.js-tool-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-color: rgba(0, 0, 0, 0.7);
	color: var(--background-white);
	padding: 0.375rem 0.75rem;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	z-index: 10;
}

.js-tool-badge i {
	font-size: 0.625rem;
}

.js-tool-badge-popular {
	background-color: rgba(0, 0, 0, 0.7);
}

.js-tool-item-icon {
	width: 3rem;
	height: 3rem;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

.js-tool-icon-blue {
	background-color: var(--primary-color);
	color: var(--background-white);
}

.js-tool-icon-blue-light {
	background-color: rgba(58, 135, 255, 0.15);
	color: var(--primary-color);
}

.js-tool-icon-purple {
	background-color: #9333EA;
	color: var(--background-white);
}

.js-tool-icon-purple-light {
	background-color: rgba(147, 51, 234, 0.15);
	color: #9333EA;
}

.js-tool-icon-yellow {
	background-color: #FBBF24;
	color: var(--background-white);
}

.js-tool-icon-orange-light {
	background-color: rgba(251, 191, 36, 0.2);
	color: #F97316;
}

.js-tool-icon-red {
	background-color: #EF4444;
	color: var(--background-white);
}

.js-tool-icon-pink-light {
	background-color: rgba(255, 182, 193, 0.3);
	color: #DC2626;
}

.js-tool-icon-green-light {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22C55E;
}

.js-tool-icon-lavender-light {
	background-color: rgba(196, 181, 253, 0.3);
	color: #8B5CF6;
}

.js-tool-item-title {
	font-size: 1.125rem;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
}

.js-tool-item-description {
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.js-tool-item-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
	gap: 0.75rem;
}

.js-tool-link {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.2s ease;
}

.js-tool-link:hover {
	color: #2A6FE0;
	text-decoration: underline;
}

.js-tool-link-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: var(--background-white);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.js-tool-link-outline:hover {
	background-color: var(--background-gray);
	border-color: var(--border-color);
	color: var(--text-primary);
	text-decoration: none;
}

/* Testimonials Section */
.js-testimonials-section {
	padding: 5rem 2rem;
	background-color: var(--background-gray);
}

.js-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.js-testimonial-card {
	background-color: var(--background-white);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 2rem;
	box-shadow: var(--shadow);
}

.js-testimonial-rating {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	color: #FFD700;
	font-size: 1.125rem;
}

.js-testimonial-text {
	font-size: 1rem;
	color: var(--text-primary);
	line-height: 1.6;
	margin-bottom: 1.5rem;
	font-style: italic;
}

.js-testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.js-testimonial-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: var(--background-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.js-testimonial-info {
	flex: 1;
}

.js-testimonial-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}

.js-testimonial-role {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* CTA Section */
.js-cta-section {
	padding: 5rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.js-cta-content {
	max-width: 800px;
	margin: 0 auto;
	background-color: var(--background-white);
	border-radius: var(--border-radius-lg);
	padding: 3rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.js-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: var(--primary-color);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--background-white);
	margin-bottom: 1.5rem;
}

.js-cta-badge i {
	font-size: 1rem;
}

.js-cta-heading {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 1rem;
}

.js-cta-description {
	font-size: 1.125rem;
	color: var(--text-secondary);
	margin-bottom: 2rem;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.js-cta-features {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 2.5rem;
	flex-wrap: wrap;
}

.js-cta-feature-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
	color: #6B7280;
}

.js-cta-feature-item span {
	white-space: nowrap;
}

.js-cta-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	background-color: var(--primary-color);
	border-radius: 50%;
	color: var(--background-white);
	font-size: 0.875rem;
	flex-shrink: 0;
}

.js-cta-button {
	margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.js-hero-heading {
		font-size: 2.5rem;
	}

	.js-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.js-problem-solution-grid {
		grid-template-columns: 1fr;
	}

	.js-testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.js-tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.js-hero-section {
		padding: 3rem 1.5rem;
	}

	.js-hero-heading {
		font-size: 2rem;
	}

	.js-hero-description {
		font-size: 1.125rem;
	}

	.js-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.js-hero-actions .btn {
		width: 100%;
	}

	.js-categories-section {
		padding: 3rem 1.5rem;
	}

	.js-categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.js-category-card {
		padding: 2rem 1.5rem;
	}

	.js-problem-solution-section {
		padding: 3rem 1.5rem;
	}

	.js-problem-solution-grid {
		gap: 1.5rem;
	}

	.js-problem-box,
	.js-solution-box {
		padding: 1.5rem;
	}

	.js-tools-section {
		padding: 3rem 1.5rem;
	}

	.js-tool-category {
		margin-bottom: 3rem;
	}

	.js-category-header {
		padding: 1.25rem 1.5rem;
	}

	.js-category-title {
		font-size: 1.5rem;
	}

	.js-tools-grid {
		grid-template-columns: 1fr;
	}

	.js-testimonials-section {
		padding: 3rem 1.5rem;
	}

	.js-testimonials-grid {
		grid-template-columns: 1fr;
	}

	.js-cta-section {
		padding: 3rem 1.5rem;
	}

	.js-cta-heading {
		font-size: 2rem;
	}

	.js-cta-content {
		padding: 2rem 1.5rem;
	}

	.js-cta-features {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.js-hero-heading {
		font-size: 1.75rem;
	}

	.js-hero-description {
		font-size: 1rem;
	}

	.js-category-card-title {
		font-size: 1.25rem;
	}

	.js-category-card-description {
		font-size: 0.9375rem;
	}

	.js-category-title {
		font-size: 1.25rem;
	}

	.js-cta-heading {
		font-size: 1.75rem;
	}

	.js-cta-description {
		font-size: 1rem;
	}
}

/* Community Section */
.js-community-section {
	padding: 5rem 2rem;
	background-color: var(--background-white);
}

.js-community-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	margin-top: 3rem;
}

.js-community-features {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.js-community-feature-item {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.js-community-feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(59, 130, 246, 0.1);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.js-community-feature-content {
	flex: 1;
}

.js-community-feature-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}

.js-community-feature-description {
	font-size: 1rem;
	color: var(--text-secondary);
	line-height: 1.6;
}

.js-community-button {
	margin-top: 1rem;
	align-self: flex-start;
}

.js-community-activity {
	background-color: var(--background-white);
	border-radius: var(--border-radius-lg);
	padding: 2rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-left: 4px solid var(--primary-color);
}

.js-activity-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.js-activity-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.js-activity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--primary-color);
	display: inline-block;
}

.js-activity-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
}

.js-activity-count {
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.js-activity-feed {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
}

.js-activity-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.js-activity-item-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.js-activity-item-content {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: baseline;
}

.js-activity-user {
	font-weight: 600;
	color: var(--text-primary);
}

.js-activity-text {
	color: var(--text-secondary);
}

.js-activity-time {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-left: auto;
}

.js-activity-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.js-activity-stat-card {
	text-align: center;
	padding: 1rem;
	background-color: rgba(59, 130, 246, 0.05);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.js-activity-stat-value {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 0.25rem;
}

.js-activity-stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	line-height: 1.3;
}

/* Mentor Section */
.js-mentor-section {
	padding: 5rem 2rem;
	background-color: #1F2937;
}

.js-section-title-light {
	color: var(--background-white);
}

.js-section-subtitle-light {
	color: rgba(255, 255, 255, 0.8);
}

.js-mentor-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 3rem;
}

.js-mentor-card {
	background-color: #F3F4F6;
	border-radius: var(--border-radius-lg);
	padding: 2rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.js-mentor-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.js-mentor-card-icon {
	font-size: 3rem;
	color: var(--text-primary);
	margin-bottom: 1rem;
}

.js-mentor-card-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
}

.js-mentor-card-description {
	font-size: 1rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

.js-mentor-footer {
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 3rem;
	font-size: 1rem;
}

/* Masterclass Section */
.js-masterclass-section {
	padding: 5rem 2rem;
	background-color: var(--background-white);
}

.js-masterclass-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	margin-top: 3rem;
}

.js-masterclass-features {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.js-masterclass-feature-item {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.js-masterclass-feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(59, 130, 246, 0.1);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.js-masterclass-feature-content {
	flex: 1;
}

.js-masterclass-feature-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}

.js-masterclass-feature-description {
	font-size: 1rem;
	color: var(--text-secondary);
	line-height: 1.6;
}

.js-masterclass-topics {
	background-color: rgba(59, 130, 246, 0.05);
	border-radius: var(--border-radius-lg);
	padding: 2rem;
}

.js-masterclass-topics-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 1.5rem;
}

.js-masterclass-topics-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.js-masterclass-topics-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
	color: var(--text-primary);
}

.js-topic-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--primary-color);
	display: inline-block;
	flex-shrink: 0;
}

.js-masterclass-button {
	width: 100%;
}

/* Final CTA Section */
.js-final-cta-section {
	padding: 5rem 2rem;
	background: linear-gradient(135deg, var(--primary-color) 0%, #1E40AF 100%);
}

.js-final-cta-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.js-final-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--background-white);
	margin-bottom: 1.5rem;
}

.js-final-cta-badge i {
	font-size: 1rem;
}

.js-final-cta-heading {
	font-size: 3rem;
	font-weight: bold;
	color: var(--background-white);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.js-final-cta-description {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2.5rem;
	line-height: 1.6;
}

.js-final-cta-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.js-final-cta-btn-primary {
	background-color: #000000;
	color: var(--background-white);
	border: none;
}

.js-final-cta-btn-primary:hover {
	background-color: #1F2937;
	color: var(--background-white);
}

.js-final-cta-btn-secondary {
	background-color: transparent;
	color: var(--background-white);
	border: 2px solid var(--background-white);
}

.js-final-cta-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--background-white);
}

.js-final-cta-footer {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 1rem;
}

.js-text-accent {
	color: var(--primary-color);
	display: inline-block;
}

/* Responsive Design for New Sections */
@media (max-width: 1024px) {
	.js-community-content,
	.js-masterclass-content {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.js-mentor-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.js-community-section,
	.js-mentor-section,
	.js-masterclass-section,
	.js-final-cta-section {
		padding: 3rem 1.5rem;
	}

	.js-activity-stats {
		grid-template-columns: 1fr;
	}

	.js-mentor-grid {
		grid-template-columns: 1fr;
	}

	.js-final-cta-heading {
		font-size: 2rem;
	}

	.js-final-cta-description {
		font-size: 1.125rem;
	}

	.js-final-cta-actions {
		flex-direction: column;
	}

	.js-final-cta-actions .btn {
		width: 100%;
	}
}