/**
 * Page: Home (templates/template-home.php)
 */

/* Hero
--------------------------------------------------------------*/
.nk-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) 0 clamp(120px, 14vw, 170px);
	background:
		radial-gradient(circle at 0% 0%, #fff1d9 0, transparent 45%),
		radial-gradient(circle at 100% 30%, #fde6ec 0, transparent 40%),
		radial-gradient(circle at 60% 100%, #e3f1fc 0, transparent 45%),
		var(--nk-bg);
}

.nk-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.nk-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 8px 18px 8px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--nk-green-dark);
	font-family: var(--nk-font-heading);
	font-size: 0.98rem;
	font-weight: 600;
	box-shadow: var(--nk-shadow-sm);
}

.nk-hero__pulse {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nk-green);
}

.nk-hero__pulse::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--nk-green);
	animation: nk-pulse 1.8s ease-out infinite;
}

@keyframes nk-pulse {
	from { transform: scale(0.6); opacity: 1; }
	to { transform: scale(1.8); opacity: 0; }
}

.nk-hero__title {
	margin-bottom: 0.4em;
	font-size: clamp(2.5rem, 5.6vw, 4.3rem);
	font-weight: 700;
	line-height: 1.08;
}

.nk-hero__title span {
	position: relative;
	display: inline-block;
	color: var(--nk-pink);
}

.nk-hero__title span::after {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: -0.06em;
	height: 0.28em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4 80 4 110 10 S 170 16 197 6' fill='none' stroke='%23f6af2c' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	z-index: -1;
}

.nk-hero__text {
	max-width: 560px;
	margin: 0;
	color: var(--nk-muted);
	font-size: clamp(1.08rem, 1.7vw, 1.25rem);
}

.nk-hero__chips {
	margin-top: 32px;
}

.nk-hero__media {
	position: relative;
	max-width: 560px;
	width: 100%;
	justify-self: center;
}

.nk-hero__frame {
	position: relative;
	padding: 14px;
	border-radius: 44% 56% 50% 50% / 50% 46% 54% 50%;
	background: #fff;
	box-shadow: var(--nk-shadow-lg);
}

.nk-hero__frame::before {
	content: "";
	position: absolute;
	inset: -22px -18px 18px 26px;
	z-index: -1;
	border-radius: 50% 50% 44% 56% / 46% 54% 46% 54%;
	background: var(--nk-rainbow);
	opacity: 0.18;
	filter: blur(2px);
}

.nk-hero__frame img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: inherit;
}

.nk-hero__badge {
	animation: nk-bob 5s ease-in-out infinite;
}

.nk-hero__badge--1 {
	top: 12%;
	left: -6%;
}

.nk-hero__badge--2 {
	right: -4%;
	bottom: 12%;
	animation-delay: -2.5s;
}

.nk-hero__blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

.nk-hero__blob--1 {
	top: -120px;
	left: -120px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(246, 175, 44, 0.28), transparent 70%);
}

.nk-hero__blob--2 {
	right: -80px;
	bottom: 40px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(23, 173, 182, 0.22), transparent 70%);
}

.nk-hero__star {
	position: absolute;
	top: 16%;
	left: 47%;
	z-index: 0;
	width: 36px;
	color: var(--nk-orange);
	animation: nk-float 6s ease-in-out infinite;
}

/* Features — overlap the hero
--------------------------------------------------------------*/
.nk-home-features {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * clamp(72px, 9vw, 110px));
}

.nk-home-features .nk-card {
	box-shadow: var(--nk-shadow);
}

/* Welcome
--------------------------------------------------------------*/
.nk-home-about__badge {
	right: -4%;
	bottom: -6%;
}

/* Franchise band
--------------------------------------------------------------*/
.nk-home-franchise__box {
	padding: clamp(32px, 5vw, 64px);
	border-radius: var(--nk-radius-lg);
	background:
		radial-gradient(circle at 100% 0%, rgba(116, 174, 85, 0.14) 0 180px, transparent 181px),
		var(--nk-green-soft);
}

.nk-home-franchise .nk-eyebrow {
	background: #fff;
	color: var(--nk-green-dark);
}

/* FAQ
--------------------------------------------------------------*/
.nk-home-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.nk-home-faq__intro {
	position: sticky;
	top: calc(var(--nk-header-h) + 32px);
}

.nk-home-faq__intro .nk-head {
	margin-bottom: 28px;
}

.nk-home-faq__art {
	width: 100%;
	max-width: 340px;
	margin-top: 36px;
}

/* Responsive
--------------------------------------------------------------*/
@media (max-width: 960px) {
	.nk-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.nk-hero__text {
		margin-left: auto;
		margin-right: auto;
	}

	.nk-hero .nk-actions,
	.nk-hero__chips {
		justify-content: center;
	}

	.nk-hero__media {
		max-width: 460px;
	}

	.nk-hero__star {
		left: 8%;
		top: 6%;
	}

	.nk-home-faq__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.nk-home-faq__intro {
		position: static;
	}

	.nk-home-faq__art {
		display: none;
	}
}

@media (max-width: 640px) {
	.nk-hero__badge--1 {
		left: 0;
		top: 2%;
	}

	.nk-hero__badge--2 {
		right: 0;
		bottom: 2%;
	}

	.nk-home-about__badge {
		right: 4%;
	}
}