/* ===========================================================
   TextCRM — Not Found (404)
   Hero-style 404: brand-green gradient number, ambient teal glow,
   floating orbs, sparkles, pulsing eyebrow dot, full responsive.
   Palette / type / radii / shadows / hover mirror the Inner Hero,
   Contact and Privacy widgets (#0b1326 surface, #00f5a0 accent,
   teal glow, glass surfaces, white-tinted borders, Inter type) so
   the 404 page reads as part of the same TextCRM design system.
   =========================================================== */

.textcrm-404 {
	--tc404-accent:        #00f5a0;
	--tc404-accent-teal:   #44e2cd;
	--tc404-brand-gradient: linear-gradient(90deg, #00f5a0 0%, #44e2cd 100%);

	--tc404-heading:       #ffffff;
	--tc404-text:          #d1d5db;
	--tc404-muted:         #9ca3af;

	--tc404-border:        rgba(255, 255, 255, 0.1);
	--tc404-border-strong: rgba(255, 255, 255, 0.16);
	--tc404-surface:       rgba(255, 255, 255, 0.05);
	--tc404-surface-hover: rgba(255, 255, 255, 0.1);

	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #0b1326;
	color: var(--tc404-text);
	-webkit-font-smoothing: antialiased;
	/* Top padding clears the fixed site header at the same distance as the
	   Inner Hero (pt-32 = 128px), so the navbar → eyebrow gap matches the
	   other inner pages. Content is anchored to the top (not vertically
	   centered) for the same reason. */
	padding: 128px clamp(1.25rem, 3vw, 2.5rem) 96px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	border-top: 0 !important;
}
.textcrm-404 *,
.textcrm-404 *::before,
.textcrm-404 *::after { box-sizing: border-box; }

/* ----- Dot pattern overlay (opt-in via .is-dots) ----- */
.textcrm-404.is-dots::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 245, 160, 0.13) 1.4px, transparent 1.6px);
	background-size: 24px 24px;
	opacity: .55;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	        mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* ----- Ambient teal glow (opt-in via .is-glow) — the exact signature halo
   the Inner Hero / Contact pages draw (rgba(68,226,205,.19) blurred 130px,
   anchored at top:-70px), so the 404 carries the same top glow. ----- */
.textcrm-404.is-glow::before {
	content: "";
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	width: min(920px, 100%);
	height: 560px;
	background: rgba(68, 226, 205, 0.19);
	filter: blur(130px);
	border-radius: 9999px;
	pointer-events: none;
	z-index: 0;
}

/* ----- Background orbs ----- */
.textcrm-404__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.textcrm-404__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform, opacity;
}
.textcrm-404__orb--a {
	top: -120px;
	left: -100px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(0, 245, 160, 0.22), transparent 65%);
	animation: textcrm404Float 12s ease-in-out infinite;
}
.textcrm-404__orb--b {
	bottom: -120px;
	right: -80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(68, 226, 205, 0.2), transparent 65%);
	animation: textcrm404Float 14s ease-in-out infinite reverse;
}

@keyframes textcrm404Float {
	0%, 100% { transform: translate(0, 0)       scale(1);    opacity: 1; }
	50%      { transform: translate(20px, 18px) scale(1.06); opacity: .78; }
}
@keyframes textcrm404Bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@keyframes textcrm404Pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.6); opacity: .55; }
}
@keyframes textcrm404FadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes textcrm404SparkleSpin {
	0%, 100% { transform: rotate(0deg)   scale(1);    opacity: .9; }
	50%      { transform: rotate(180deg) scale(1.15); opacity: .55; }
}

/* ----- Inner wrap ----- */
.textcrm-404__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ----- Eyebrow — glass pill + pulsing green dot (mirrors Inner Hero badge) ----- */
.textcrm-404__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 6px 12px;
	background-color: var(--tc404-surface);
	border: 1px solid var(--tc404-border);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tc404-accent);
	margin-bottom: 24px;
	line-height: 1;
	animation: textcrm404FadeUp .7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.textcrm-404__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tc404-accent);
	box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.2);
	animation: textcrm404Pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* ----- Big 404 number + ghost layer ----- */
.textcrm-404__bignum-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 24px;
	line-height: .9;
}
.textcrm-404__bignum {
	position: relative;
	font-size: clamp(7rem, 22vw, 16rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.04em;
	background: var(--tc404-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	z-index: 1;
	animation:
		textcrm404FadeUp .9s cubic-bezier(0.16, 1, 0.3, 1) .08s backwards,
		textcrm404Bob 6s ease-in-out 1s infinite;
}
.textcrm-404__bignum--ghost {
	position: absolute;
	inset: 0;
	z-index: 0;
	filter: blur(40px);
	opacity: .4;
	animation: none;
	pointer-events: none;
}

/* ----- Sparkles (positioned around the number) ----- */
.textcrm-404__sparkle {
	position: absolute;
	width: 28px;
	height: 28px;
	color: var(--tc404-accent);
	pointer-events: none;
	z-index: 2;
	opacity: .85;
	filter: drop-shadow(0 4px 16px rgba(0, 245, 160, 0.4));
}
.textcrm-404__sparkle--1 {
	top: -6%;
	left: -4%;
	width: 36px;
	height: 36px;
	animation: textcrm404SparkleSpin 6s ease-in-out infinite;
}
.textcrm-404__sparkle--2 {
	top: 12%;
	right: -6%;
	width: 22px;
	height: 22px;
	color: var(--tc404-accent-teal);
	animation: textcrm404SparkleSpin 5s ease-in-out .8s infinite reverse;
}
.textcrm-404__sparkle--3 {
	bottom: 4%;
	left: 18%;
	width: 18px;
	height: 18px;
	animation: textcrm404SparkleSpin 7s ease-in-out .4s infinite;
}

/* ----- Title ----- */
.textcrm-404__title {
	font-size: clamp(1.875rem, 1rem + 2.6vw, 3rem);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--tc404-heading);
	text-wrap: balance;
	max-width: 22ch;
	animation: textcrm404FadeUp .8s cubic-bezier(0.16, 1, 0.3, 1) .14s backwards;
}
.textcrm-404__title-lead   { color: inherit; }
.textcrm-404__title-accent {
	color: var(--tc404-accent);
	font-weight: 700;
	margin-left: .35em;
}

/* ----- Description ----- */
.textcrm-404__desc {
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: var(--tc404-muted);
	margin: 0 auto 40px;
	max-width: 56ch;
	animation: textcrm404FadeUp .8s cubic-bezier(0.16, 1, 0.3, 1) .2s backwards;
}

/* ----- Actions ----- */
.textcrm-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	animation: textcrm404FadeUp .8s cubic-bezier(0.16, 1, 0.3, 1) .26s backwards;
}

.textcrm-404__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 26px;
	border-radius: 12px;            /* rounded-xl — matches Inner Hero buttons */
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

/* Primary — brand green, black label, green glow on hover (Inner Hero primary). */
.textcrm-404__btn--primary {
	background-color: var(--tc404-accent);
	color: #000000;
	box-shadow: 0 0 0 rgba(0, 245, 160, 0);
}
.textcrm-404__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 20px rgba(0, 245, 160, 0.4);
	color: #000000;
}

/* Secondary — white-tinted glass surface (Inner Hero secondary). */
.textcrm-404__btn--secondary {
	background-color: var(--tc404-surface);
	color: var(--tc404-heading);
	border-color: var(--tc404-border);
}
.textcrm-404__btn--secondary:hover {
	background-color: var(--tc404-surface-hover);
	transform: translateY(-2px);
}

.textcrm-404__arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}
.textcrm-404__btn--primary:hover .textcrm-404__arrow {
	transform: translateX(-3px);
}
.textcrm-404__btn--secondary:hover .textcrm-404__arrow {
	transform: translateX(3px);
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 768px) {
	.textcrm-404 {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		padding-bottom: 72px;
	}
	.textcrm-404__bignum { font-size: clamp(5rem, 32vw, 10rem); }
	.textcrm-404__desc   { font-size: 16px; }

	.textcrm-404__orb--a { width: 240px; height: 240px; top: -80px;    left: -80px; }
	.textcrm-404__orb--b { width: 240px; height: 240px; bottom: -80px; right: -60px; }

	.textcrm-404__sparkle--1 { width: 26px; height: 26px; }
	.textcrm-404__sparkle--2 { width: 18px; height: 18px; }
	.textcrm-404__sparkle--3 { width: 14px; height: 14px; }

	.textcrm-404__actions { width: 100%; }
	.textcrm-404__btn {
		flex: 1 1 100%;
		justify-content: center;
		padding: 14px 22px;
	}
}

/* Small phones — match the Inner Hero's tighter top padding (pt-28 = 112px). */
@media (max-width: 480px) {
	.textcrm-404 {
		padding-top: 112px;
		padding-bottom: 72px;
	}
}

@media (max-width: 420px) {
	.textcrm-404__sparkle--3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.textcrm-404.is-glow::before,
	.textcrm-404__bignum,
	.textcrm-404__orb,
	.textcrm-404__sparkle,
	.textcrm-404__dot,
	.textcrm-404__eyebrow,
	.textcrm-404__title,
	.textcrm-404__desc,
	.textcrm-404__actions {
		animation: none !important;
	}
	.textcrm-404__btn:hover { transform: none; }
}