/* =========================================================
   Harto CTA – full-width closing call to action
   by Zoon11 · https://zoon11.com
   ========================================================= */

.hcta {
	/* Colours (overridden from the widget's Style tab) */
	--hcta-bg: #0A0A0A;
	--hcta-accent: #C8FF00;
	--hcta-title: #6E6E6E;
	--hcta-highlight: var(--hcta-accent);
	--hcta-outline: #F5F2EB;
	--hcta-eyebrow: var(--hcta-accent);
	--hcta-eyebrow-line: rgba(245, 242, 235, .7);
	--hcta-link: rgba(245, 242, 235, .7);
	--hcta-link-hover: var(--hcta-accent);
	--hcta-link-line: #2C2C2C;
	--hcta-border: #222222;
	--hcta-ghost: rgba(200, 255, 0, .09);
	--hcta-glow-o: 1;

	--hcta-orb-bg: var(--hcta-accent);
	--hcta-orb-fg: #000000;
	--hcta-orb-ring: rgba(200, 255, 0, .35);
	--hcta-orb-bg-h: #FFE600;
	--hcta-orb-fg-h: #000000;
	--hcta-orb-ring-h: rgba(255, 230, 0, .5);

	/* Layout */
	--hcta-width: 1280px;
	--hcta-gutter: clamp(16px, 5vw, 64px);
	--hcta-pad: clamp(88px, 10vw, 140px);
	--hcta-gap: 80px;
	--hcta-orb: 216px;
	--hcta-stack-align: start;

	/* Motion */
	--hcta-spin: 16s;
	--hcta-ghost-speed: 60s;
	--hcta-ghost-size: clamp(180px, 24vw, 360px);
	--hcta-ease: cubic-bezier(.22, 1, .36, 1);

	/* Spotlight position (set by JS) */
	--hcta-mx: 75%;
	--hcta-my: 50%;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--hcta-pad);
	background: var(--hcta-bg);
	-webkit-font-smoothing: antialiased;
}

.hcta *,
.hcta *::before,
.hcta *::after { box-sizing: border-box; }

/* Edge to edge, even inside a boxed container */
.hcta--bleed {
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	margin-left: -50vw;
}
body:has(.hcta--bleed) { overflow-x: clip; }

.hcta--lines {
	border-top: 1px solid var(--hcta-border);
	border-bottom: 1px solid var(--hcta-border);
}

/* ---------- Background layers ---------- */
.hcta__grid,
.hcta__glow {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

.hcta__grid {
	/* Fallback for browsers without color-mix() */
	background:
		linear-gradient(rgba(200, 255, 0, .09) 1px, transparent 1px) 0 0 / 72px 72px,
		linear-gradient(90deg, rgba(200, 255, 0, .09) 1px, transparent 1px) 0 0 / 72px 72px;
	background:
		linear-gradient(color-mix(in srgb, var(--hcta-accent) 9%, transparent) 1px, transparent 1px) 0 0 / 72px 72px,
		linear-gradient(90deg, color-mix(in srgb, var(--hcta-accent) 9%, transparent) 1px, transparent 1px) 0 0 / 72px 72px;
	-webkit-mask-image: radial-gradient(420px circle at var(--hcta-mx) var(--hcta-my), #000, transparent 70%);
	mask-image: radial-gradient(420px circle at var(--hcta-mx) var(--hcta-my), #000, transparent 70%);
}

.hcta__glow {
	opacity: var(--hcta-glow-o);
	background: radial-gradient(520px circle at var(--hcta-mx) var(--hcta-my), rgba(200, 255, 0, .13), transparent 70%);
	background: radial-gradient(520px circle at var(--hcta-mx) var(--hcta-my), color-mix(in srgb, var(--hcta-accent) 13%, transparent), transparent 70%);
}

.hcta__ghost {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: -1;
	display: flex;
	width: max-content;
	transform: translateY(-50%);
	animation: hcta-ghost var(--hcta-ghost-speed) linear infinite;
	pointer-events: none;
}
.hcta__ghost span {
	padding-right: .3em;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-size: var(--hcta-ghost-size);
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--hcta-ghost);
}
@keyframes hcta-ghost { to { transform: translate(-50%, -50%); } }

/* ---------- Content ---------- */
.hcta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 48px var(--hcta-gap);
	width: 100%;
	max-width: var(--hcta-width);
	margin: 0 auto;
	padding-inline: var(--hcta-gutter);
}

.hcta__text { min-width: 0; }

.hcta .hcta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-family: 'Space Mono', 'Courier New', monospace;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hcta-eyebrow);
}
.hcta .hcta__eyebrow::before {
	content: '';
	flex: 0 0 32px;
	width: 32px;
	height: 1px;
	background: var(--hcta-eyebrow-line);
}
.hcta--no-line .hcta__eyebrow::before { display: none; }

.hcta .hcta__title {
	margin: 0 0 28px;
	padding: 0;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: clamp(52px, 6vw, 88px);
	line-height: .94;
	letter-spacing: 0;
	color: var(--hcta-title);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.hcta__t--highlight { color: var(--hcta-highlight); }
.hcta__t--outline {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--hcta-outline);
}

.hcta .hcta__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Space Mono', 'Courier New', monospace;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.hcta .hcta__links li { margin: 0; padding: 0; }
.hcta .hcta__links li::before { display: none; }

.hcta .hcta__link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--hcta-link-line);
	color: var(--hcta-link);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .25s ease, border-color .25s ease;
}
.hcta a.hcta__link:hover,
.hcta a.hcta__link:focus-visible {
	color: var(--hcta-link-hover);
	border-color: var(--hcta-link-hover);
}
.hcta__suffix { color: var(--hcta-accent); }

/* ---------- Round button ---------- */
.hcta .hcta__orb {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--hcta-orb);
	height: var(--hcta-orb);
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--hcta-orb-bg);
	color: var(--hcta-orb-fg);
	text-decoration: none;
	transition: background-color .35s ease, color .35s ease, transform .5s var(--hcta-ease);
	will-change: transform;
}
.hcta .hcta__orb::after {
	content: '';
	position: absolute;
	inset: -14px;
	border: 1px solid var(--hcta-orb-ring);
	border-radius: 50%;
	pointer-events: none;
	transition: inset .5s var(--hcta-ease), border-color .35s ease;
}
.hcta .hcta__orb:hover,
.hcta .hcta__orb:focus-visible {
	background: var(--hcta-orb-bg-h);
	color: var(--hcta-orb-fg-h);
}
.hcta .hcta__orb:hover::after,
.hcta .hcta__orb:focus-visible::after {
	inset: -22px;
	border-color: var(--hcta-orb-ring-h);
}
.hcta .hcta__orb:focus-visible {
	outline: 2px solid var(--hcta-outline);
	outline-offset: 28px;
}

.hcta__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: hcta-spin var(--hcta-spin) linear infinite;
}
.hcta--still .hcta__ring { animation: none; }
.hcta__ring text {
	font-family: 'Space Mono', 'Courier New', monospace;
	font-size: 10px;
	font-weight: 700;
	fill: currentColor;
}
.hcta__arrow {
	width: 38%;
	height: 38%;
	transition: transform .5s var(--hcta-ease);
}
.hcta .hcta__orb:hover .hcta__arrow,
.hcta .hcta__orb:focus-visible .hcta__arrow { transform: rotate(45deg); }

@keyframes hcta-spin { to { transform: rotate(360deg); } }

/* ---------- Tablet (Elementor breakpoint) ---------- */
@media (max-width: 1024px) {
	.hcta {
		--hcta-orb: 184px;
		--hcta-gap: 56px;
	}
	.hcta__inner { grid-template-columns: minmax(0, 1fr); }
	.hcta .hcta__orb { justify-self: var(--hcta-stack-align); }
}

/* ---------- Mobile (Elementor breakpoint) ---------- */
@media (max-width: 767px) {
	.hcta {
		--hcta-gutter: 20px;
		--hcta-orb: 152px;
		--hcta-pad: 72px;
		--hcta-ghost-size: 140px;
	}
	.hcta__inner { gap: 40px; }
	.hcta .hcta__title { font-size: clamp(44px, 13vw, 64px); margin-bottom: 24px; }
	.hcta .hcta__links { flex-direction: column; gap: 14px; }
	.hcta .hcta__orb::after { inset: -10px; }
	.hcta .hcta__orb:focus-visible { outline-offset: 20px; }
	.hcta__ring text { font-size: 11px; }
}

/* Touch screens: no cursor, so park the glow behind the button */
@media (hover: none) {
	.hcta { --hcta-mx: 80%; --hcta-my: 75%; }
}

@media (prefers-reduced-motion: reduce) {
	.hcta__ghost,
	.hcta__ring { animation: none; }
	.hcta .hcta__orb,
	.hcta__arrow { transition: none; }
}