/**
 * Home Page Styles (page-home.php)
 * Figma Design Node: 110:959
 *
 * Sections:
 *   1. Hero
 *   2. Services Grid
 *   3. Why Choose Us
 *   4. Stats Band
 *   5. Benefits
 *   6. CTA
 *
 * @package MJC_Fintech_Child
 */

/* =====================================================
   HIDE FLOATING WHATSAPP BUTTONS (not in Figma design)
   ===================================================== */

.wp-whatsapp-chat-button,
.whatsapp-float,
[class*="whatsapp-float"],
[id*="whatsapp-float"] {
	display: none !important;
}

/* =====================================================
   1. HERO SECTION
   ===================================================== */

.mjc-home-hero {
	position:      relative;
	height:        100vh;
	display:       flex;
	align-items:   center;
	padding:       var(--space-10) var(--container-padding);
	background:    var(--gradient-hero);
	overflow:      hidden;
	color:         var(--color-white);
}

.mjc-home-hero__background {
	position:      absolute;
	top:           0;
	left:          0;
	right:         0;
	bottom:        0;
	z-index:       0;
	pointer-events: none;
}

.mjc-home-hero__wave {
	position:       absolute;
	border:         1px solid var(--color-teal);
	border-radius:  50%;
	opacity:        0.06;
	will-change:    transform;
	pointer-events: none;
}

.mjc-home-hero__wave--top {
	width:  900px;
	height: 900px;
	top:    -400px;
	right:  100px;
}

.mjc-home-hero__wave--bottom {
	width:  700px;
	height: 700px;
	bottom: -300px;
	left:   -350px;
}

.mjc-home-hero .mjc-container {
	position:  relative;
	z-index:   1;
	text-align: center;
	max-width: 900px;
}

.mjc-home-hero__tag {
	margin-bottom: var(--space-4);
}

.mjc-home-hero__heading {
	font-family:      var(--font-heading);
	font-size:        clamp(2.5rem, 8vw, 4rem);
	font-weight:      700;
	line-height:      1.15;
	color:            var(--color-white);
	margin-bottom:    var(--space-4);
	letter-spacing:   -0.02em;
}

.mjc-home-hero__heading-gradient {
	background:           var(--gradient-cyan-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:      text;
	display:              inline-block;
}

.mjc-home-hero__description {
	font-family:  var(--font-body);
	font-size:    var(--text-body-lg);
	line-height:  1.6;
	color:        var(--color-white-muted);
	max-width:    700px;
	margin:       0 auto var(--space-7);
}

.mjc-home-hero__ctas {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--space-4);
	justify-content: center;
	margin-bottom:  var(--space-9);
}

.mjc-home-hero__stats {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--space-8);
	justify-content: center;
}

.mjc-home-hero__stat {
	text-align: center;
}

.mjc-home-hero__stat-number {
	font-family: var(--font-mono);
	font-size:   clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color:       var(--color-teal);
	line-height: 1;
	margin-bottom: var(--space-2);
}

.mjc-home-hero__stat-label {
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	color:       var(--color-white-muted);
}

/* =====================================================
   RESPONSIVE — HERO
   ===================================================== */

@media (max-width: 768px) {
	.mjc-home-hero {
		height:     100vh;
		padding:    var(--space-8) var(--container-padding);
	}

	.mjc-home-hero__heading {
		font-size: 2rem;
	}

	.mjc-home-hero__description {
		font-size: var(--text-body);
	}

	.mjc-home-hero__ctas {
		flex-direction: column;
		align-items:    center;
	}

	.mjc-home-hero__ctas .mjc-btn {
		width: 100%;
	}

	.mjc-home-hero__stats {
		flex-direction: column;
		gap:            var(--space-5);
	}
}

/* =====================================================
   2. SERVICES SECTION
   ===================================================== */

.mjc-home-services {
	padding-top:    var(--space-10);
	padding-bottom: var(--space-10);
	background-color: var(--color-surface);
}

.mjc-home-services__header {
	text-align:     center;
	margin-bottom:  var(--space-3);
}

.mjc-home-services__heading {
	font-family:    var(--font-heading);
	font-size:      var(--text-h2);
	font-weight:    700;
	color:          var(--color-text-heading-light);
	text-align:     center;
	margin-bottom:  var(--space-5);
}

.mjc-home-services__grid {
	display:      grid;
	grid-template-columns: repeat(4, 1fr);
	gap:          3rem;
	margin-top:   var(--space-8);
}

/* Service Card Component */
.mjc-service-card {
	position:       relative;
	padding:        var(--space-6);
	background:     var(--color-surface-card);
	border:         1px solid var(--color-border);
	border-radius:  var(--radius-md);
	transition:     all var(--transition-base);
}

.mjc-service-card:hover {
	box-shadow:     var(--shadow-md);
	transform:      translateY(-4px);
}

.mjc-service-card__accent-bar {
	position:       absolute;
	top:            0;
	left:           0;
	right:          0;
	height:         4px;
	background:     var(--gradient-accent);
	border-radius:  var(--radius-md) var(--radius-md) 0 0;
}

.mjc-service-card__icon {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          56px;
	height:         56px;
	margin:         var(--space-6) auto var(--space-4);
	background:     rgba(43, 191, 206, 0.08);
	border-radius:  50%;
	color:          var(--color-teal);
	font-size:      0;
}

.mjc-service-card__icon svg {
	width:  40px;
	height: 40px;
}

.mjc-service-card__title {
	font-family:  var(--font-heading);
	font-size:    var(--text-h3);
	font-weight:  700;
	color:        var(--color-text-heading-light);
	margin-bottom: var(--space-3);
	text-align:   center;
}

.mjc-service-card__description {
	font-family:  var(--font-body);
	font-size:    var(--text-body);
	line-height:  1.6;
	color:        var(--color-text-light);
	text-align:   center;
	margin-bottom: var(--space-4);
}

.mjc-service-card__link {
	display:        block;
	text-align:     center;
	font-family:    var(--font-body);
	font-size:      var(--text-sm);
	font-weight:    500;
	color:          var(--color-navy-light);
	text-decoration: none;
	transition:     color var(--transition-fast);
}

.mjc-service-card__link:hover {
	color: var(--color-teal);
}

/* =====================================================
   3. WHY CHOOSE US SECTION
   ===================================================== */

.mjc-home-why-choose {
	padding-top:    var(--space-10);
	padding-bottom: var(--space-10);
	background:     linear-gradient(
		135deg,
		var(--color-navy) 0%,
		var(--color-navy-mid) 100%
	);
	color:          var(--color-white);
}

.mjc-home-why-choose__heading {
	font-family:    var(--font-heading);
	font-size:      var(--text-h2);
	font-weight:    700;
	text-align:     center;
	margin-bottom:  var(--space-9);
	color:          var(--color-white);
}

.mjc-home-why-choose__heading-gradient {
	background:           var(--gradient-cyan-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:      text;
}

.mjc-home-why-choose__grid {
	display:      grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap:          var(--space-6);
}

/* Why Choose Card */
.mjc-why-card {
	padding:       var(--space-6);
	background:    rgba(255, 255, 255, 0.05);
	border:        1px solid rgba(43, 191, 206, 0.1);
	border-radius: var(--radius-lg);
	text-align:    center;
	transition:    all var(--transition-base);
}

.mjc-why-card:hover {
	background:  rgba(255, 255, 255, 0.08);
	box-shadow:  var(--shadow-lg);
	transform:   translateY(-4px);
}

.mjc-why-card__icon {
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          64px;
	height:         64px;
	margin:         0 auto var(--space-4);
	background:     rgba(43, 191, 206, 0.08);
	border-radius:  50%;
	color:          var(--color-teal);
	font-size:      0;
}

.mjc-why-card__icon svg {
	width:  48px;
	height: 48px;
}

.mjc-why-card__title {
	font-family:   var(--font-heading);
	font-size:     var(--text-h3);
	font-weight:   700;
	color:         var(--color-white-muted);
	margin-bottom: var(--space-3);
}

.mjc-why-card__description {
	font-family: var(--font-body);
	font-size:   var(--text-body);
	line-height: 1.6;
	color:       var(--color-white-faint);
}

/* =====================================================
   4. STATS BAND SECTION
   ===================================================== */

.mjc-home-stats {
	padding-top:    var(--space-10);
	padding-bottom: var(--space-10);
	background:     var(--gradient-stats);
	color:          var(--color-white);
}

.mjc-home-stats__heading {
	font-family: var(--font-heading);
	font-size:   var(--text-h2);
	font-weight: 700;
	text-align:  center;
	color:       var(--color-white-muted);
	margin:      0;
}

.mjc-home-stats__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-6);
}

@media (max-width: 1024px) {
	.mjc-home-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap:                   var(--space-5);
	}
}

@media (max-width: 768px) {
	.mjc-home-stats__grid {
		grid-template-columns: 1fr;
	}
}

/* Stat Card */
.mjc-stat-card {
	padding:       var(--space-6);
	background:    rgba(255, 255, 255, 0.1);
	border:        1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	text-align:    center;
	transition:    all var(--transition-base);
}

.mjc-stat-card:hover {
	background:  rgba(255, 255, 255, 0.15);
	transform:   translateY(-4px);
}

.mjc-stat-card__number {
	font-family:  var(--font-mono);
	font-size:    clamp(1.75rem, 4vw, 2.375rem);
	font-weight:  700;
	color:        var(--color-white-muted);
	line-height:  1;
	margin-bottom: var(--space-2);
}

.mjc-stat-card__label {
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	color:       var(--color-white-faint);
}

/* =====================================================
   5. BENEFITS SECTION
   ===================================================== */

.mjc-home-benefits {
	padding-top:    var(--space-10);
	padding-bottom: var(--space-10);
	background-color: var(--color-surface);
}

.mjc-home-benefits__header {
	text-align:    center;
	margin-bottom: var(--space-3);
}

.mjc-home-benefits__heading {
	font-family:    var(--font-heading);
	font-size:      var(--text-h2);
	font-weight:    700;
	color:          var(--color-text-heading-light);
	text-align:     center;
	margin-bottom:  var(--space-9);
}

.mjc-home-benefits__content {
	display:      grid;
	grid-template-columns: 1fr 1fr;
	gap:          var(--space-8);
	align-items:  start;
}

.mjc-home-benefits__list {
	display:      flex;
	flex-direction: column;
	gap:          var(--space-5);
}

/* Benefit Item */
.mjc-benefit-item {
	display:  flex;
	gap:      var(--space-4);
	align-items: flex-start;
}

.mjc-benefit-item__icon {
	flex-shrink:  0;
	width:        32px;
	height:       32px;
	display:      flex;
	align-items:  center;
	justify-content: center;
	background:   var(--gradient-accent);
	border-radius: 50%;
	color:        var(--color-white);
	font-size:    0;
}

.mjc-benefit-item__icon svg {
	width:  20px;
	height: 20px;
}

.mjc-benefit-item__title {
	font-family:  var(--font-heading);
	font-size:    var(--text-h4);
	font-weight:  700;
	color:        var(--color-text-heading-light);
	margin-bottom: var(--space-2);
}

.mjc-benefit-item__description {
	font-family: var(--font-body);
	font-size:   var(--text-body);
	line-height: 1.6;
	color:       var(--color-text-light);
}

/* Performance Card */
.mjc-performance-card {
	padding:       var(--space-7);
	background:    var(--color-surface-card);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow:    var(--shadow-md);
}

.mjc-performance-card__title {
	font-family:   var(--font-heading);
	font-size:     var(--text-h3);
	font-weight:   700;
	color:         var(--color-text-heading-light);
	margin-bottom: var(--space-6);
	text-align:    center;
}

/* Performance Metric */
.mjc-performance-metric {
	margin-bottom: var(--space-5);
}

.mjc-performance-metric:last-child {
	margin-bottom: var(--space-6);
}

.mjc-performance-metric__header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   var(--space-2);
}

.mjc-performance-metric__label {
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	font-weight: 500;
	color:       var(--color-text-light);
}

.mjc-performance-metric__value {
	font-family: var(--font-mono);
	font-size:   var(--text-sm);
	font-weight: 700;
	color:       var(--color-teal);
}

.mjc-performance-metric__bar {
	width:           100%;
	height:          8px;
	background:      var(--color-border);
	border-radius:   var(--radius-pill);
	overflow:        hidden;
}

.mjc-performance-metric__fill {
	height:        100%;
	background:    var(--gradient-accent);
	border-radius: var(--radius-pill);
	width:         0;
	transition:    width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================
   6. CTA SECTION
   ===================================================== */

.mjc-home-cta {
	padding-top:    var(--space-10);
	padding-bottom: var(--space-10);
	background:     linear-gradient(
		135deg,
		var(--color-navy) 0%,
		var(--color-navy-mid) 100%
	);
	text-align:     center;
	color:          var(--color-white);
}

.mjc-home-cta .mjc-container {
	max-width: 800px;
}

.mjc-home-cta__heading {
	font-family:    var(--font-heading);
	font-size:      var(--text-h2);
	font-weight:    700;
	color:          var(--color-white);
	margin-bottom:  var(--space-4);
	line-height:    1.15;
}

.mjc-home-cta__heading-gradient {
	background:           var(--gradient-cyan-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:      text;
	display:              inline;
}

.mjc-home-cta__description {
	font-family: var(--font-body);
	font-size:   var(--text-body-lg);
	line-height: 1.6;
	color:       var(--color-white-faint);
	max-width:   600px;
	margin:      0 auto var(--space-7);
}

.mjc-home-cta__buttons {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--space-4);
	justify-content: center;
	margin-bottom:  var(--space-6);
}

.mjc-home-cta__disclaimer {
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	color:       var(--color-white-faint);
}

/* =====================================================
   BUTTON VARIANTS FOR HOME PAGE
   ===================================================== */

.mjc-btn--primary-light {
	background-color: var(--color-white);
	color:            var(--color-navy);
	border-color:     var(--color-white);
}

.mjc-btn--primary-light:hover {
	background-color: var(--color-white-muted);
	color:            var(--color-navy);
	box-shadow:       0 0 20px rgba(255, 255, 255, 0.3);
}

.mjc-btn--secondary-light {
	background-color: transparent;
	color:            var(--color-white);
	border-color:     var(--color-white);
}

.mjc-btn--secondary-light:hover {
	background-color: var(--color-white);
	color:            var(--color-navy);
}

.mjc-btn--block {
	width:      100%;
	text-align: center;
}

/* =====================================================
   RESPONSIVE — HOME PAGE
   ===================================================== */

@media (max-width: 1024px) {
	.mjc-home-benefits__content {
		grid-template-columns: 1fr;
		gap:                   var(--space-6);
	}

	.mjc-home-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.mjc-home-services__grid,
	.mjc-home-why-choose__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.mjc-home-hero__ctas {
		flex-direction: column;
	}

	.mjc-home-hero__ctas .mjc-btn {
		width: 100%;
	}

	.mjc-home-cta__buttons {
		flex-direction: column;
	}

	.mjc-home-cta__buttons .mjc-btn {
		width: 100%;
	}

	.mjc-benefit-item {
		gap: var(--space-3);
	}

	.mjc-benefit-item__icon {
		width:  28px;
		height: 28px;
	}

	.mjc-benefit-item__title {
		font-size: 1rem;
	}

	.mjc-benefit-item__description {
		font-size: 0.875rem;
	}
}
/* =====================================================
   INDUSTRIES WE SERVE SECTION
   ===================================================== */

.mjc-home-industries {
	padding-top:      var(--space-10);
	padding-bottom:   var(--space-10);
	background-color: var(--color-surface);
}

.mjc-home-industries__header {
	text-align:    center;
	margin-bottom: var(--space-3);
}

.mjc-home-industries__heading {
	font-family:   var(--font-heading);
	font-size:     var(--text-h2);
	font-weight:   700;
	color:         var(--color-text-heading-light);
	text-align:    center;
	margin-bottom: var(--space-9);
}

/* Mobile: 2 columns */
.mjc-home-industries__grid {
	display:               grid;
	grid-template-columns: repeat(5, 1fr);
	gap:                   var(--space-4);
}

@media (max-width: 1024px) {
	.mjc-home-industries__grid {
		grid-template-columns: repeat(3, 1fr);
		gap:                   var(--space-5);
	}
}

@media (max-width: 768px) {
	.mjc-home-industries__grid {
		grid-template-columns: repeat(2, 1fr);
		gap:                   var(--space-4);
	}
}

.mjc-industry-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--space-2);
	background:     var(--color-surface-card);
	border:         1px solid var(--color-border);
	border-radius:  var(--radius-md);
	padding:        var(--space-5);
	text-align:     center;
	box-shadow:     var(--shadow-sm);
	transition:     all var(--transition-base);
}

.mjc-industry-item:hover {
	transform:  translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* Icon wrapper — matches .mjc-service-card__icon visual language */
.mjc-industry-item__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	background:      rgba(43, 191, 206, 0.08);
	border-radius:   50%;
	color:           var(--color-teal);
	flex-shrink:     0;
	transition:      color var(--transition-base), background var(--transition-base);
}

.mjc-industry-item__icon svg {
	width:  24px;
	height: 24px;
}

.mjc-industry-item:hover .mjc-industry-item__icon {
	color:      var(--color-teal-light);
	background: rgba(78, 205, 204, 0.14);
}

/* Label */
.mjc-industry-item__label {
	font-family: var(--font-body);
	font-size:   var(--text-sm);
	font-weight: 600;
	color:       var(--color-text-heading-light);
	line-height: var(--lh-sm);
	transition:  color var(--transition-base);
}

.mjc-industry-item:hover .mjc-industry-item__label {
	color: var(--color-teal);
}