/* ==========================================================================
   Komatek Hero Banner — gradient recreated from the brand hero reference:
   deep navy night sky → electric blue network glow → warm city-light base.
   All layers are CSS/SVG, no image files required. An optional bg photo
   (bg_image attr) slots underneath the gradient overlay.
   ========================================================================== */

.kmt-hero {
	position: relative;
	overflow: hidden;
	min-height: var(--kmt-hero-height, 92vh);
	display: flex;
	align-items: center;
	background: #070D26;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	isolation: isolate;
}

/* ---- Layer 1: background image slides ------------------------------------ */
.kmt-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.kmt-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1); /* slow, agency-grade crossfade */
	will-change: opacity, transform;
}
.kmt-hero__slide.is-active { opacity: 1; }

/* Ken Burns: the active slide slowly zooms while it is shown */
.kmt-hero--kenburns .kmt-hero__slide.is-active {
	animation: kmt-kenburns 9s ease-out forwards;
}
@keyframes kmt-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* ==========================================================================
   PREMIUM effect — agency entrance for each slide:
   1. Slow 2.6s crossfade (shared transition above)
   2. A soft diagonal light sweep glides across right after the slide lands
   ========================================================================== */
.kmt-hero--premium .kmt-hero__sweep {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(115deg,
		transparent 42%,
		rgba(255, 255, 255, .07) 50%,
		rgba(160, 195, 255, .05) 54%,
		transparent 62%);
	transform: translateX(-120%);
	opacity: 0;
}
.kmt-hero--premium .kmt-hero__sweep.is-run {
	animation: kmt-sweep 2.8s cubic-bezier(.4, 0, .2, 1) .9s forwards;
}
@keyframes kmt-sweep {
	0%   { transform: translateX(-120%); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translateX(120%); opacity: 0; }
}

/* ---- Slider controls ------------------------------------------------------ */
.kmt-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.kmt-hero__dot {
	width: 30px;
	height: 4px;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .28);
	cursor: pointer;
	padding: 0;
	transition: background .3s ease, width .3s ease;
}
.kmt-hero__dot:hover { background: rgba(255, 255, 255, .55); }
.kmt-hero__dot.is-active { background: rgba(255, 255, 255, .35); width: 44px; }
.kmt-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Premium: the active dot becomes an autoplay progress bar that fills in
   red over exactly one slide interval, restarting on every slide change */
.kmt-hero__dot { position: relative; overflow: hidden; }
.kmt-hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #D4232B;
	transform: scaleX(0);
	transform-origin: left;
}
.kmt-hero--premium .kmt-hero__dot.is-active::after {
	animation: kmt-dot-progress var(--kmt-slide-secs, 6s) linear forwards;
}
/* Non-premium sliders keep the simple solid red active dot */
.kmt-hero--fade .kmt-hero__dot.is-active::after,
.kmt-hero--kenburns .kmt-hero__dot.is-active::after {
	transform: scaleX(1);
}
@keyframes kmt-dot-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.kmt-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(7, 13, 38, .45);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, border-color .25s ease;
	backdrop-filter: blur(4px);
}
.kmt-hero__arrow:hover { background: #D4232B; border-color: #D4232B; }
.kmt-hero__arrow:focus-visible { outline: 3px solid #FF9BA0; outline-offset: 3px; }
.kmt-hero__arrow--prev { left: 22px; }
.kmt-hero__arrow--next { right: 22px; }

/* ---- Layer 2: the signature gradient ------------------------------------ */
/* Reads left→right like the reference: near-black navy over the headline,
   opening into an electric blue field on the right, with a horizon glow. */
.kmt-hero__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		/* left darkening so text always sits on solid navy */
		linear-gradient(90deg,
			rgba(6, 11, 34, 1) 0%,
			rgba(7, 13, 38, .96) 30%,
			rgba(10, 20, 56, .72) 55%,
			rgba(12, 26, 74, .45) 100%),
		/* big electric-blue radial glow, upper right */
		radial-gradient(ellipse 90% 85% at 78% 22%,
			rgba(43, 92, 210, .55) 0%,
			rgba(26, 55, 140, .35) 40%,
			rgba(8, 14, 40, 0) 75%),
		/* warm horizon / city-light band near the bottom */
		radial-gradient(ellipse 120% 42% at 60% 100%,
			rgba(64, 120, 255, .38) 0%,
			rgba(28, 60, 150, .22) 45%,
			rgba(7, 13, 38, 0) 80%),
		/* base vertical navy ramp */
		linear-gradient(180deg, #070D26 0%, #0B1741 55%, #0A1233 100%);
}
/* When a photo is present, gradient strength follows the overlay attr */
.kmt-hero--has-image .kmt-hero__gradient { opacity: var(--kmt-overlay, 1); }

/* Image mode: replace the decorative night-sky gradient with the 35/65
   left-to-right panel. The left 35% is solid brand navy (text always
   readable); across the right 65% it fades out completely so the photo
   is fully visible. A thin bottom scrim keeps slider dots legible. */
.kmt-hero--has-image .kmt-hero__gradient {
	background:
		linear-gradient(90deg,
			rgba(6, 11, 34, .97) 0%,
			rgba(6, 11, 34, .96) 35%,
			rgba(7, 14, 40, .62) 50%,
			rgba(8, 16, 46, .28) 66%,
			rgba(8, 16, 46, .08) 82%,
			rgba(8, 16, 46, 0) 100%),
		linear-gradient(0deg,
			rgba(5, 9, 26, .55) 0%,
			rgba(5, 9, 26, 0) 14%);
}

/* ---- Stars (two drifting particle fields via repeating gradients) ------- */
.kmt-hero__stars {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image:
		radial-gradient(1.4px 1.4px at 22% 28%, rgba(255,255,255,.85) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 64% 14%, rgba(180,205,255,.9) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 82% 42%, rgba(255,255,255,.7) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 44% 52%, rgba(160,195,255,.8) 50%, transparent 51%),
		radial-gradient(1.3px 1.3px at 92% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 8% 62%, rgba(160,195,255,.6) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 32%, rgba(255,255,255,.65) 50%, transparent 51%);
	background-size: 640px 640px;
	animation: kmt-twinkle 6s ease-in-out infinite alternate;
}
@keyframes kmt-twinkle { from { opacity: .55; } to { opacity: 1; } }

/* ---- Network arcs (SVG) -------------------------------------------------- */
.kmt-hero__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	opacity: .9;
}
.kmt-net-arcs path {
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	animation: kmt-draw 3.2s ease forwards;
}
.kmt-net-arcs path:nth-child(2) { animation-delay: .35s; }
.kmt-net-arcs path:nth-child(3) { animation-delay: .7s; }
.kmt-net-arcs path:nth-child(4) { animation-delay: 1.05s; }
.kmt-net-arcs path:nth-child(5) { animation-delay: 1.4s; }
@keyframes kmt-draw { to { stroke-dashoffset: 0; } }
.kmt-net-nodes circle { animation: kmt-node 3.4s ease-in-out infinite; }
.kmt-net-nodes circle:nth-child(odd) { animation-delay: 1.4s; }
@keyframes kmt-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- Right-side ambient glow -------------------------------------------- */
.kmt-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(ellipse 46% 55% at 86% 60%,
		rgba(90, 150, 255, .28) 0%, rgba(90, 150, 255, 0) 70%);
	filter: blur(2px);
}

/* ---- Highway light streaks at the base ----------------------------------- */
.kmt-hero__streaks {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 26%;
	z-index: 3;
	background:
		linear-gradient(100deg, transparent 30%, rgba(255, 96, 80, .18) 46%, transparent 52%),
		linear-gradient(95deg, transparent 48%, rgba(255, 200, 120, .14) 60%, transparent 66%),
		linear-gradient(105deg, transparent 60%, rgba(120, 170, 255, .20) 74%, transparent 80%),
		linear-gradient(0deg, rgba(5, 9, 26, .9) 0%, transparent 100%);
	mask-image: linear-gradient(to top, black 55%, transparent);
	-webkit-mask-image: linear-gradient(to top, black 55%, transparent);
}

/* ---- Content -------------------------------------------------------------- */
.kmt-hero__inner {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 96px 40px;
}
.kmt-hero--center .kmt-hero__inner { text-align: center; }
.kmt-hero--center .kmt-hero__ctas { justify-content: center; }
.kmt-hero--center .kmt-hero__desc { margin-left: auto; margin-right: auto; }

.kmt-hero__eyebrow {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #C6D2F2;
	margin: 0 0 22px;
	animation: kmt-rise .8s ease both;
}

.kmt-hero__title {
	font-size: clamp(44px, 5.6vw, 76px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	margin: 0 0 26px;
	color: #fff;
}
.kmt-hero__title .kmt-line {
	display: block;
	animation: kmt-rise .8s ease both;
}
.kmt-hero__title .kmt-line:nth-child(2) { animation-delay: .12s; }
.kmt-hero__title .kmt-line:nth-child(3) { animation-delay: .24s; }
.kmt-line--accent { color: #E02830; }

.kmt-hero__desc {
	font-size: 18px;
	line-height: 1.65;
	color: #C9D3EF;
	max-width: 56ch;
	margin: 0 0 38px;
	animation: kmt-rise .8s ease .3s both;
}

@keyframes kmt-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Buttons --------------------------------------------------------------- */
.kmt-hero__ctas {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	animation: kmt-rise .8s ease .42s both;
}
.kmt-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 600;
	padding: 16px 28px;
	border-radius: 8px;
	text-decoration: none;
	transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.kmt-btn:hover { transform: translateY(-2px); }
.kmt-btn--red {
	background: #D4232B;
	color: #fff;
	box-shadow: 0 10px 30px rgba(212, 35, 43, .35);
}
.kmt-btn--red:hover { background: #B81D24; color: #fff; }
.kmt-btn__arr { transition: transform .22s ease; }
.kmt-btn--red:hover .kmt-btn__arr { transform: translateX(4px); }
.kmt-btn--ghost {
	background: rgba(255, 255, 255, .02);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .38);
}
.kmt-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.kmt-btn__circle {
	width: 26px; height: 26px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
}

.kmt-btn:focus-visible {
	outline: 3px solid #FF9BA0;
	outline-offset: 3px;
}

/* ---- Responsive ------------------------------------------------------------ */
/* In image mode, keep the text inside the solid left panel on wide screens */
@media (min-width: 1024px) {
	.kmt-hero--has-image:not(.kmt-hero--center) .kmt-hero__title { max-width: 46%; }
	.kmt-hero--has-image:not(.kmt-hero--center) .kmt-hero__desc { max-width: 42%; }
}

@media (max-width: 780px) {
	.kmt-hero__inner { padding: 72px 24px; }
	.kmt-hero__desc { font-size: 16px; }
	.kmt-hero__net { opacity: .55; }
	.kmt-hero__arrow { width: 40px; height: 40px; font-size: 22px; }
	.kmt-hero__arrow--prev { left: 12px; }
	.kmt-hero__arrow--next { right: 12px; }
	/* Narrow screens can't split 35/65 — use a top-to-bottom fade instead */
	.kmt-hero--has-image .kmt-hero__gradient {
		background:
			linear-gradient(180deg,
				rgba(6, 11, 34, .96) 0%,
				rgba(6, 11, 34, .88) 55%,
				rgba(7, 14, 40, .55) 78%,
				rgba(8, 16, 46, .25) 100%);
	}
}

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kmt-hero__stars,
	.kmt-net-arcs path,
	.kmt-net-nodes circle,
	.kmt-hero__eyebrow,
	.kmt-hero__title .kmt-line,
	.kmt-hero__desc,
	.kmt-hero__ctas,
	.kmt-hero--kenburns .kmt-hero__slide.is-active,
	.kmt-hero--premium .kmt-hero__sweep.is-run,
	.kmt-hero--premium .kmt-hero__dot.is-active::after { animation: none; }
	.kmt-hero--premium .kmt-hero__dot.is-active::after { transform: scaleX(1); }
	.kmt-net-arcs path { stroke-dashoffset: 0; }
	.kmt-hero__slide { transition: opacity .4s ease; }
}