/**
 * Tapgrix Child Theme — Homepage
 *
 * WooCommerce demonstration storefront.
 * Parent Theme: Blocksy.
 *
 * DESIGN:
 * - Deep Navy
 * - Electric Blue
 * - Cyan accents
 * - Responsive technology-focused hero
 *
 * SECURITY:
 * Presentation only.
 * No payment, credential or checkout logic.
 *
 * COMPATIBILITY:
 * Transitional tnx-* selectors are retained
 * for the existing front-page.php template.
 */

/* =========================================================
   HOME DESIGN TOKENS
   ========================================================= */

.tgx-home.tnx-home {

	--tnx-home-max-width: 1200px;

	--tnx-navy-950: #061126;
	--tnx-navy-900: #0a1c3a;
	--tnx-navy-800: #102b53;

	--tnx-blue-500: #2563eb;
	--tnx-blue-400: #3b82f6;
	--tnx-cyan-400: #22d3ee;

	--tnx-white: #ffffff;
	--tnx-text-light: #e2edfc;
	--tnx-text-muted: #a8bdd8;

	background: #ffffff;

	color: #0f172a;

	overflow-wrap: break-word;
}

/* =========================================================
   SHARED HOMEPAGE CONTAINER
   ========================================================= */

.tgx-home .tnx-home-container {

	width: min(
		calc(100% - 48px),
		var(--tnx-home-max-width)
	);

	margin-inline: auto;

}

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

.tgx-home .tnx-hero {

	position: relative;

	overflow: hidden;

	isolation: isolate;

	background-color: var(--tnx-navy-950);

	background-image:

		radial-gradient(
			ellipse at 85% 30%,
			rgba(37, 99, 235, 0.36) 0%,
			transparent 48%
		),

		radial-gradient(
			ellipse at 76% 85%,
			rgba(34, 211, 238, 0.13) 0%,
			transparent 42%
		),

		linear-gradient(
			115deg,
			#061126 0%,
			#091a38 45%,
			#102e59 100%
		);

	background-repeat: no-repeat;

	background-size: cover;

	color: var(--tnx-white);

}

/* =========================================================
   SUBTLE TECHNOLOGY GRID
   ========================================================= */

.tgx-home .tnx-hero::before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	pointer-events: none;

	background-image:

		linear-gradient(
			rgba(148, 185, 235, 0.055) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(148, 185, 235, 0.055) 1px,
			transparent 1px
		);

	background-size: 64px 64px;

	mask-image:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(0, 0, 0, 0.35) 45%,
			#000000 100%
		);

}

/* =========================================================
   DECORATIVE HERO GLOW
   ========================================================= */

.tgx-home .tnx-hero::after {

	content: "";

	position: absolute;

	width: 480px;
	height: 480px;

	right: -170px;
	top: -180px;

	z-index: -1;

	border-radius: 50%;

	border: 1px solid rgba(34, 211, 238, 0.15);

	box-shadow:
		0 0 0 65px rgba(37, 99, 235, 0.045),
		0 0 0 135px rgba(37, 99, 235, 0.025);

	pointer-events: none;

}

/* =========================================================
   HERO INNER LAYOUT
   ========================================================= */

.tgx-home .tnx-hero__inner {

	position: relative;

	min-height: 520px;

	display: flex;

	align-items: center;

	padding-top: 80px;
	padding-bottom: 80px;

}

.tgx-home .tnx-hero__content {

	width: min(100%, 690px);

	position: relative;

	z-index: 1;

}

/* =========================================================
   HERO EYEBROW
   ========================================================= */

.tgx-home .tnx-hero__eyebrow {

	display: inline-flex;

	align-items: center;

	margin: 0 0 20px;

	font-size: 0.78rem;

	font-weight: 800;

	line-height: 1.5;

	letter-spacing: 0.18em;

	text-transform: uppercase;

	color: var(--tnx-cyan-400);

}

/* =========================================================
   HERO TITLE
   ========================================================= */

.tgx-home .tnx-hero__title {

	max-width: 750px;

	margin: 0;

	font-size: clamp(
		2.65rem,
		5vw,
		4.4rem
	);

	font-weight: 800;

	line-height: 1.07;

	letter-spacing: -0.035em;

	color: var(--tnx-white);

	text-wrap: balance;

}

/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.tgx-home .tnx-hero__description {

	max-width: 590px;

	margin: 26px 0 0;

	font-size: clamp(
		1rem,
		1.5vw,
		1.12rem
	);

	line-height: 1.8;

	color: var(--tnx-text-light);

}

/* =========================================================
   HERO CTA BUTTON
   ========================================================= */

.tgx-home .tnx-hero__button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 52px;

	margin-top: 32px;

	padding: 0 28px;

	border: 1px solid rgba(
		255,
		255,
		255,
		0.16
	);

	border-radius: 9px;

	background: linear-gradient(
		135deg,
		var(--tnx-blue-500),
		var(--tnx-blue-400)
	);

	color: var(--tnx-white);

	font-size: 0.96rem;

	font-weight: 700;

	line-height: 1.2;

	text-decoration: none;

	box-shadow:
		0 12px 30px rgba(37, 99, 235, 0.23),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);

	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		filter 160ms ease;

}

/* =========================================================
   BUTTON HOVER
   ========================================================= */

.tgx-home .tnx-hero__button:hover {

	color: var(--tnx-white);

	transform: translateY(-2px);

	filter: brightness(1.08);

	text-decoration: none;

	box-shadow:
		0 16px 38px rgba(37, 99, 235, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);

}

/* =========================================================
   BUTTON KEYBOARD ACCESSIBILITY
   ========================================================= */

.tgx-home .tnx-hero__button:focus-visible {

	outline: 3px solid var(--tnx-cyan-400);

	outline-offset: 4px;

}

/* =========================================================
   DEMONSTRATION DISCLOSURE
   ========================================================= */

.tgx-home .tgx-demo-disclosure {

	border-bottom: 1px solid #dbeafe;

}

.tgx-home .tgx-demo-disclosure strong {

	font-weight: 800;

}

/* =========================================================
   FALLBACK PRODUCT SECTION
   ========================================================= */

.tgx-home .tgx-demo-products {

	background: #f8fbff;

}

.tgx-home .tgx-demo-products h2 {

	margin-bottom: 12px;

	color: #0f172a;

	font-size: clamp(
		1.65rem,
		3vw,
		2.25rem
	);

	font-weight: 800;

}

.tgx-home .tgx-demo-products > .tnx-home-container > p {

	color: #64748b;

	line-height: 1.75;

	margin-bottom: 28px;

}

/* =========================================================
   TABLET — 1024px
   ========================================================= */

@media (max-width: 1024px) {

	.tgx-home .tnx-home-container {

		width: min(
			calc(100% - 40px),
			var(--tnx-home-max-width)
		);

	}

	.tgx-home .tnx-hero__inner {

		min-height: 480px;

		padding-top: 64px;
		padding-bottom: 64px;

	}

	.tgx-home .tnx-hero__content {

		width: min(100%, 620px);

	}

	.tgx-home .tnx-hero__title {

		font-size: clamp(
			2.4rem,
			6vw,
			3.8rem
		);

	}

	.tgx-home .tnx-hero::after {

		right: -260px;

	}

}

/* =========================================================
   MOBILE — 767px
   ========================================================= */

@media (max-width: 767px) {

	.tgx-home .tnx-home-container {

		width: calc(100% - 32px);

	}

	.tgx-home .tnx-hero {

		background-image:

			radial-gradient(
				ellipse at 90% 15%,
				rgba(37, 99, 235, 0.25),
				transparent 55%
			),

			linear-gradient(
				135deg,
				#061126 0%,
				#0a2146 100%
			);

	}

	.tgx-home .tnx-hero::before {

		background-size: 48px 48px;

		opacity: 0.55;

	}

	.tgx-home .tnx-hero::after {

		width: 310px;
		height: 310px;

		top: -150px;
		right: -190px;

		opacity: 0.5;

	}

	.tgx-home .tnx-hero__inner {

		min-height: 500px;

		padding-top: 64px;
		padding-bottom: 64px;

	}

	.tgx-home .tnx-hero__content {

		width: 100%;

	}

	.tgx-home .tnx-hero__eyebrow {

		margin-bottom: 16px;

		font-size: 0.72rem;

		letter-spacing: 0.14em;

	}

	.tgx-home .tnx-hero__title {

		max-width: 100%;

		font-size: clamp(
			2.1rem,
			9vw,
			3.1rem
		);

		line-height: 1.1;

	}

	.tgx-home .tnx-hero__description {

		max-width: 100%;

		margin-top: 22px;

		font-size: 1rem;

		line-height: 1.7;

	}

	.tgx-home .tnx-hero__button {

		width: 100%;

		margin-top: 28px;

	}

	.tgx-home .tgx-demo-products {

		padding-top: 36px;
		padding-bottom: 36px;

	}

}

/* =========================================================
   SMALL MOBILE — 420px
   ========================================================= */

@media (max-width: 420px) {

	.tgx-home .tnx-home-container {

		width: calc(100% - 28px);

	}

	.tgx-home .tnx-hero__inner {

		min-height: 480px;

		padding-top: 52px;
		padding-bottom: 52px;

	}

	.tgx-home .tnx-hero__title {

		font-size: clamp(
			1.95rem,
			10vw,
			2.65rem
		);

	}

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.tgx-home .tnx-hero__button {

		transition: none;

	}

	.tgx-home .tnx-hero__button:hover {

		transform: none;

	}

}