/* Technology page hero: speed billboard with animated top speed, price sticker and fibre streaks. */
.th {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--cnbn-white);
	padding: 44px 0 72px;
	background: linear-gradient(135deg, var(--cnbn-dark) 0%, var(--cnbn-dark-alt) 100%);
}
@supports (overflow: clip) {
	.th { overflow: visible; overflow-x: clip; }
}
.th .container { position: relative; z-index: 2; }
.th-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: center; }
.th-crumbs { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; }
.th-crumbs a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 2px; }
.th-crumbs a:hover { color: var(--cnbn-white); }
/* The H1 wraps the technology kicker (keyword) and the tagline, so it carries no type of its own. */
.th-h1 { margin: 0; padding: 0; font: inherit; font-size: 1rem; line-height: 1.5; letter-spacing: normal; text-transform: none; color: inherit; }
.th-h1 .th-title { display: block; }
.th-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.9) !important;
}
.th-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.th-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; animation: th-ping 1.8s ease-out infinite; }
.th-title {
	font-family: 'google_sansmedium', 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: clamp(2.5rem, 5.6vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--cnbn-white);
	margin: 0 0 20px;
	text-wrap: balance;
}
.th-title em {
	font-style: normal;
	background: linear-gradient(90deg, #ff4d64, #e21232 40%, #ff8a5c 60%, #ff4d64);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: th-shine 6s linear infinite;
}
.th-lead { color: rgba(255, 255, 255, 0.78) !important; font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); max-width: 52ch; margin: 0 0 26px; }
.th-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.th-check-note { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }
.th .cnbn-sq { margin: 0 0 10px; }
#check { position: relative; z-index: 3; scroll-margin-top: 24px; }

/* Pause animation control */
.th-motion {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(15, 17, 21, 0.6);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.th-motion:hover { background: rgba(15, 17, 21, 0.9); border-color: rgba(255, 255, 255, 0.5); }
.th-motion:focus-visible { outline: 2px solid var(--cnbn-primary); outline-offset: 2px; }
.th.is-paused *, .th.is-paused *::before, .th.is-paused *::after { animation-play-state: paused !important; }
.th.is-paused .th-rise { animation: none; opacity: 1; transform: none; }

/* Entrance */
.th-rise { opacity: 0; transform: translateY(18px); animation: th-rise 0.8s var(--cnbn-ease) forwards; }
.th-d1 { animation-delay: 0.12s; }
.th-d2 { animation-delay: 0.24s; }
.th-d3 { animation-delay: 0.36s; }

@keyframes th-rise { to { opacity: 1; transform: none; } }
@keyframes th-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes th-shine { to { background-position: -200% 0; } }

.th-a { background: radial-gradient(120% 80% at 85% 10%, rgba(226, 18, 50, 0.28) 0%, transparent 55%), linear-gradient(135deg, #0b0d11 0%, #1c1f26 100%); }
.th-a-streaks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.th-a-streaks i {
	position: absolute;
	left: -40%;
	width: 40%;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(255, 77, 100, 0.9), #fff);
	box-shadow: 0 0 12px rgba(226, 18, 50, 0.8);
	transform: rotate(-12deg);
	animation: th-streak 4.5s linear infinite;
	opacity: 0.7;
}
.th-a-streaks i:nth-child(1) { top: 12%; animation-delay: 0s; }
.th-a-streaks i:nth-child(2) { top: 26%; animation-delay: 1.6s; animation-duration: 5.5s; }
.th-a-streaks i:nth-child(3) { top: 40%; animation-delay: 0.8s; animation-duration: 3.8s; }
.th-a-streaks i:nth-child(4) { top: 55%; animation-delay: 2.6s; }
.th-a-streaks i:nth-child(5) { top: 68%; animation-delay: 0.3s; animation-duration: 6s; }
.th-a-streaks i:nth-child(6) { top: 80%; animation-delay: 3.4s; animation-duration: 4.2s; }
.th-a-streaks i:nth-child(7) { top: 92%; animation-delay: 1.1s; animation-duration: 5s; }
.th-a-streaks i:nth-child(8) { top: 4%; animation-delay: 2.1s; animation-duration: 6.5s; }
@keyframes th-streak { to { left: 140%; } }
.th-a-speed { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 22px; }
.th-a-speed b {
	font-family: 'google_sansmedium', 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: clamp(4.5rem, 10vw, 7.5rem);
	line-height: 0.82;
	letter-spacing: -0.05em;
	color: var(--cnbn-white);
	text-shadow: 0 0 40px rgba(226, 18, 50, 0.45);
	font-variant-numeric: tabular-nums;
}
.th-a-upto, .th-a-unit { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); padding-bottom: 6px; }
.th-a-upto { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 0 4px; }
.th-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0 0 28px; }
.th-ticks li { position: relative; padding-left: 24px; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.th-ticks li::before { content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--cnbn-primary); color: #fff; font-size: 0.58rem; }
.th-side { position: relative; padding-top: 34px; }
.th-a-sticker {
	position: absolute;
	top: -18px;
	right: -6px;
	z-index: 4;
	display: grid;
	place-items: center;
	align-content: center;
	width: 124px;
	height: 124px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ff4d64, var(--cnbn-primary) 60%, #a0021b);
	box-shadow: 0 16px 40px rgba(226, 18, 50, 0.5), inset 0 0 0 4px rgba(255, 255, 255, 0.18);
	text-align: center;
	animation: th-wobble 4s ease-in-out infinite;
}
.th-a-sticker b { font-family: 'google_sansmedium', 'Open Sans', sans-serif; font-weight: normal; font-size: 1.65rem; line-height: 1; color: #fff; }
.th-a-sticker small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
@keyframes th-wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }

@media (max-width: 991px) {
	.th-grid { grid-template-columns: 1fr; gap: 40px; }
	.th-a-sticker { right: 6px; }
}
@media (max-width: 640px) {
	.th { padding: 32px 0 52px; }
	.th-actions .cnbn-btn { width: 100%; }
	.th-side { padding-top: 0; }
	.th-a-sticker { position: static; display: inline-flex; align-items: baseline; gap: 6px; width: auto; height: auto; margin: 0 0 14px; padding: 8px 18px; border-radius: 999px; animation: none; }
	.th-a-sticker b { font-size: 1.3rem; }
}
/* Reduced motion: still unless the visitor presses Play (JS adds .is-playing). */
@media (prefers-reduced-motion: reduce) {
	.th:not(.is-playing) *, .th:not(.is-playing) *::before, .th:not(.is-playing) *::after { animation: none !important; }
	.th:not(.is-playing) .th-rise { opacity: 1; transform: none; }
	.th:not(.is-playing) .th-a-streaks { display: none; }
}