/*    49. HOMEPAGE UI POLISH
   ------------------------------------------- */
.hero-section {
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 210, 30, 0.08) 0%, transparent 60%),
		var(--color-bg-primary);
}

/* Hero badge shine sweep */
.hero-badge {
	position: relative;
	overflow: hidden;
}

.hero-badge::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 210, 30, 0.18), transparent);
	transform: translateX(-100%);
	animation: hero-badge-shine 4s ease-in-out infinite;
}

@keyframes hero-badge-shine {
	0% { transform: translateX(-100%); }
	55%, 100% { transform: translateX(100%); }
}

/* Stat counters — warm gradient numbers */
.stat-number {
	background: linear-gradient(180deg, var(--color-accent) 0%, #ffe066 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Service icon hover glow */
.service-icon {
	position: relative;
	transition: transform var(--transition-base);
}

.service-icon svg {
	transition: filter var(--transition-base), transform var(--transition-base);
}

.service-card:hover .service-icon {
	transform: translateY(-4px) scale(1.06);
}

.service-card:hover .service-icon svg {
	filter: drop-shadow(0 0 16px rgba(255, 210, 30, 0.45));
}

/* Powered-by icons hover */
.wp-powered-icon svg {
	transition: transform var(--transition-base), filter var(--transition-base);
}

.wp-powered-card:hover .wp-powered-icon svg {
	transform: scale(1.08) rotate(-3deg);
	filter: drop-shadow(0 0 16px rgba(255, 210, 30, 0.4));
}

/* 5 Sebab cards — accent border on hover */
.reason-card {
	transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.reason-card:hover {
	border-color: rgba(255, 210, 30, 0.35);
}

/* Portal CTA mock card lift */
.portal-cta-card {
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.portal-cta-wrap:hover .portal-cta-card {
	transform: translateY(-6px) rotate(-1deg);
	box-shadow: 0 24px 60px rgba(255, 210, 30, 0.16);
}

/* Gentle fade at the bottom of the page into the footer */
.order-cta-section + .site-footer {
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hero-badge::after,
	.hero-scroll-indicator {
		animation: none;
	}

	.service-icon svg,
	.wp-powered-icon svg {
		transition: none;
	}
}