/**
 * Front Page Styles
 * Scoped to .wpmls-front-page to avoid any Elementor conflicts
 *
 * @package WPMindSet_Light_Theme
 * @since 1.0.1
 */

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

.wpmls-hero {
	background: linear-gradient( 145deg, #0a1628 0%, #0d2247 50%, #0a3d6b 100% );
	color: #ffffff;
	padding: 80px 0 90px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* Subtle grid pattern overlay */
.wpmls-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient( rgba(255,255,255,0.03) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba(255,255,255,0.03) 1px, transparent 1px );
	background-size: 48px 48px;
	pointer-events: none;
}

.wpmls-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

.wpmls-hero__badge {
	display: inline-block;
	background: rgba( 0, 115, 170, 0.35 );
	border: 1px solid rgba( 0, 180, 255, 0.25 );
	color: #7dd3fc;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 100px;
	margin-bottom: 28px;
}

.wpmls-hero__heading {
	font-size: clamp( 2rem, 5vw, 3.2rem );
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
	color: #ffffff;
	letter-spacing: -0.02em;
}

.wpmls-hero__heading--accent {
	display: block;
	background: linear-gradient( 90deg, #38bdf8, #818cf8 );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.wpmls-hero__description {
	font-size: 1.1rem;
	line-height: 1.75;
	color: rgba( 255, 255, 255, 0.72 );
	margin: 0 auto 36px;
	max-width: 600px;
}

.wpmls-hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.wpmls-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 28px;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
	line-height: 1;
}

.wpmls-btn:hover {
	text-decoration: none;
	transform: translateY( -2px );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
}

.wpmls-btn--primary {
	background: #0073aa;
	color: #ffffff;
	border-color: #0073aa;
}

.wpmls-btn--primary:hover {
	background: #005a87;
	border-color: #005a87;
	color: #ffffff;
	opacity: 1;
}

.wpmls-btn--outline {
	background: transparent;
	color: rgba( 255, 255, 255, 0.85 );
	border-color: rgba( 255, 255, 255, 0.3 );
}

.wpmls-btn--outline:hover {
	background: rgba( 255, 255, 255, 0.08 );
	color: #ffffff;
	border-color: rgba( 255, 255, 255, 0.6 );
	opacity: 1;
}

.wpmls-btn--outline-light {
	background: transparent;
	color: rgba( 255, 255, 255, 0.85 );
	border-color: rgba( 255, 255, 255, 0.3 );
}

.wpmls-btn--outline-light:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: #ffffff;
	opacity: 1;
}

/* =========================================================================
   FEATURES SECTION
   ========================================================================= */

.wpmls-features {
	padding: 72px 0 80px;
	background: #f8f9fb;
}

.wpmls-features__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 24px;
}

.wpmls-feature-card {
	background: #ffffff;
	border: 1px solid #e8eaf0;
	border-radius: 10px;
	padding: 28px 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpmls-feature-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.08 );
}

.wpmls-feature-card__icon {
	font-size: 1.8rem;
	margin-bottom: 14px;
	display: block;
	line-height: 1;
}

.wpmls-feature-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 10px;
	color: #111827;
}

.wpmls-feature-card__desc {
	font-size: 0.9rem;
	color: #6b7280;
	line-height: 1.65;
	margin: 0;
}

/* =========================================================================
   CTA STRIP
   ========================================================================= */

.wpmls-cta-strip {
	background: linear-gradient( 135deg, #0a1628, #0d2247 );
	color: rgba( 255, 255, 255, 0.8 );
	padding: 40px 0;
	text-align: center;
}

.wpmls-cta-strip .container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.wpmls-cta-strip__text {
	margin: 0;
	font-size: 0.95rem;
}

.wpmls-cta-strip__text a {
	color: #7dd3fc;
	text-decoration: none;
	font-weight: 600;
}

.wpmls-cta-strip__text a:hover {
	text-decoration: underline;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media ( max-width: 640px ) {
	.wpmls-hero {
		padding: 56px 0 64px;
	}

	.wpmls-hero__actions {
		flex-direction: column;
		align-items: center;
	}

	.wpmls-btn {
		width: 100%;
		justify-content: center;
		max-width: 320px;
	}

	.wpmls-features {
		padding: 48px 0 56px;
	}

	.wpmls-cta-strip .container {
		flex-direction: column;
		gap: 16px;
	}
}