/* ==========================================================================
   TEKCRAFT — Home hero
   Two-column hero (copy + front-view laptop). On desktop a short pinned scroll
   moves the laptop to the centre and dives into its screen (hero-cine.js).
   Tablets, phones and reduced motion get a flat, unpinned layout (.is-flat).
   Theme: dark = graphite device on a night scene, light = silver device on a
   bright scene. The screen UI is dark in both, like a real product shot.
   ========================================================================== */

.tkc {
	--tkc-cyan: #22d3ee;
	--tkc-sky: #38bdf8;
	--tkc-violet: #a855f7;
	--tkc-ink: #c9d1e8;
	--tkc-muted: #7b85ac;

	--tkc-scene: linear-gradient(180deg, #020617 0%, #030712 60%, #03030c 100%);
	--tkc-orb-a: rgba(34, 211, 238, .16);
	--tkc-orb-b: rgba(147, 51, 234, .18);
	--tkc-grid: rgba(56, 189, 248, .045);
	--tkc-next: #03030c;

	--tkc-frame: linear-gradient(150deg, #6b7397 0%, #2b3049 22%, #161a2b 55%, #23283f 80%, #565e83 100%);
	--tkc-base: linear-gradient(180deg, #8a93b8 0, #3b415e 2px, #262b43 30%, #151828 72%, #0b0d17 100%);
	--tkc-notch: linear-gradient(180deg, #0b0d17, #1d2136);
	--tkc-shadow: rgba(0, 0, 0, .75);
	--tkc-aura: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(34, 211, 238, .22), rgba(147, 51, 234, .14) 45%, transparent 70%);
	--tkc-strip: 1;
	--tkc-rim: rgba(129, 140, 248, .28);
	--tkc-halo: rgba(34, 211, 238, .14);

	--tkc-chip-bg: rgba(10, 15, 36, .86);
	--tkc-chip-bd: rgba(148, 163, 184, .16);
	--tkc-chip-sh: 0 18px 44px rgba(0, 0, 0, .45);
	--tkc-chip-tx: #e6ebff;
	--tkc-chip-mu: #94a3b8;
	--tkc-num: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);

	position: relative;
	height: 190vh;
	background: var(--tkc-next);
}

body.light-theme .tkc,
html.light-theme .tkc {
	--tkc-scene: linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%);
	--tkc-orb-a: rgba(6, 182, 212, .16);
	--tkc-orb-b: rgba(124, 58, 237, .12);
	--tkc-grid: rgba(15, 23, 42, .045);
	--tkc-next: #f8fafc;

	--tkc-frame: linear-gradient(150deg, #ffffff 0%, #dfe4ec 25%, #b8c0ce 60%, #d3d9e3 82%, #f6f8fb 100%);
	--tkc-base: linear-gradient(180deg, #ffffff 0, #eef1f6 2px, #dde2ea 30%, #c3cad6 72%, #9ea7b7 100%);
	--tkc-notch: linear-gradient(180deg, #a7b0bf, #cfd5df);
	--tkc-shadow: rgba(15, 23, 42, .28);
	--tkc-aura: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6, 182, 212, .2), rgba(124, 58, 237, .12) 45%, transparent 70%);
	--tkc-strip: .55;
	--tkc-rim: rgba(15, 23, 42, .12);
	--tkc-halo: rgba(56, 189, 248, .12);

	--tkc-chip-bg: rgba(255, 255, 255, .94);
	--tkc-chip-bd: rgba(15, 23, 42, .08);
	--tkc-chip-sh: 0 18px 40px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .05);
	--tkc-chip-tx: #0f172a;
	--tkc-chip-mu: #475569;
	--tkc-num: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%);
}

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

/* overflow-x:hidden on html/body turns body into a scroll container and breaks
   the sticky viewport; clip hides horizontal overflow without doing that. */
html:has(.tkc),
html:has(.tkc) body {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.tkc-vp {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	background: var(--tkc-scene);
}

/* --------------------------------------------------------------------------
   Scene background (static gradients only — nothing repaints per frame)
   -------------------------------------------------------------------------- */
.tkc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tkc-bg i { position: absolute; display: block; }

.tkc-orb { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; }
.tkc-orb-a { top: -22%; inset-inline-end: -12%; background: radial-gradient(circle, var(--tkc-orb-a), transparent 65%); }
.tkc-orb-b { bottom: -30%; inset-inline-start: -14%; background: radial-gradient(circle, var(--tkc-orb-b), transparent 65%); }

.tkc-grid-bg {
	inset: 0;
	background:
		repeating-linear-gradient(90deg, var(--tkc-grid) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg, var(--tkc-grid) 0 1px, transparent 1px 64px);
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 50%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 65% at 60% 50%, #000 25%, transparent 75%);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.tkc-shell {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: center;
	gap: clamp(32px, 3.8vw, 68px);
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 104px 36px 56px;
}

.tkc-copy { position: relative; z-index: 3; }
.tkc-copy .tek-hero-content { width: 100%; }

.tkc-stage {
	position: relative;
	height: min(64vh, 580px);
	min-height: 350px;
}

.tkc-dbox { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   Device — 760×430 drawing, scaled/moved by JS from its centre
   -------------------------------------------------------------------------- */
.tkc-device {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 760px;
	height: 430px;
	margin: -215px 0 0 -380px;
	transform: scale(.7);
	transform-origin: 50% 50%;
	direction: ltr;
}

.tkc-rig {
	position: absolute;
	inset: 0;
	animation: tkcRise 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
}

@keyframes tkcRise {
	from { opacity: 0; transform: perspective(1800px) translateY(48px) rotateX(16deg) scale(.95); }
}

.tkc-tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.tkc-aura {
	position: absolute;
	left: -14%;
	right: -14%;
	top: -22%;
	bottom: -10%;
	background:
		radial-gradient(ellipse 65% 55% at 50% 50%, rgba(34, 211, 238, .26), rgba(147, 51, 234, .18) 50%, transparent 75%),
		radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .12), transparent 60%);
	pointer-events: none;
	filter: blur(10px);
}

.tkc-lid {
	position: absolute;
	left: 60px;
	top: 0;
	width: 640px;
	height: 406px;
	padding: 3px;
	border-radius: 22px 22px 8px 8px;
	background: var(--tkc-frame);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .45),
		0 0 0 1px var(--tkc-rim),
		0 0 70px var(--tkc-halo),
		0 40px 80px -30px var(--tkc-shadow);
}

/* black glass bezel inside the metal rim */
.tkc-lid::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 19px 19px 6px 6px;
	background: #05060b;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.tkc-cam {
	position: absolute;
	z-index: 2;
	top: 7px;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #4a5a90 0 1px, #10142a 1.6px, #05060c 2.5px);
}

.tkc-screen {
	position: absolute;
	z-index: 1;
	left: 14px;
	top: 14px;
	width: 612px;
	height: 374px;
	overflow: hidden;
	border-radius: 5px;
	background: #060918;
}

/* one-time power-on light sweep */
.tkc-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 21;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 30%, rgba(125, 211, 252, .28) 48%, rgba(192, 132, 252, .2) 52%, transparent 70%);
	transform: translateX(-110%);
	animation: tkcSweep 1.3s .55s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes tkcSweep { to { transform: translateX(110%); } }

.tkc-glass {
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .025) 32%, transparent 44%);
}

/* base seen from the front: lit top edge, thumb notch, brand light strip */
.tkc-base {
	position: absolute;
	left: 0;
	top: 404px;
	width: 760px;
	height: 20px;
	border-radius: 3px 3px 16px 16px / 3px 3px 12px 12px;
	background: var(--tkc-base);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.tkc-notch {
	position: absolute;
	left: 50%;
	top: 0;
	width: 128px;
	height: 6px;
	margin-left: -64px;
	border-radius: 0 0 9px 9px;
	background: var(--tkc-notch);
}

.tkc-strip {
	position: absolute;
	left: 28%;
	right: 28%;
	bottom: 3px;
	height: 1.5px;
	border-radius: 2px;
	opacity: var(--tkc-strip);
	background: linear-gradient(90deg, transparent, #22d3ee 22%, #818cf8 50%, #a855f7 78%, transparent);
	box-shadow: 0 0 10px rgba(34, 211, 238, .7), 0 0 22px rgba(147, 51, 234, .5);
}

.tkc-shadow {
	position: absolute;
	left: 4%;
	right: 4%;
	top: 410px;
	height: 40px;
	pointer-events: none;
	background: radial-gradient(ellipse 50% 50% at 50% 30%, var(--tkc-shadow), transparent 72%);
}

/* --------------------------------------------------------------------------
   Screen: control room dashboard (staggered once on load)
   -------------------------------------------------------------------------- */
.tkc-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	font-family: "Rubik", sans-serif;
	font-size: 9px;
	color: var(--tkc-ink);
	background: linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px) 0 0 / 100% 18px, #060918;
}

html[dir="rtl"] .tkc-ui { direction: rtl; }

.tkc-top { display: flex; align-items: center; justify-content: space-between; }

.tkc-brand {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
}

.tkc-brand i {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	font: 700 10px/1 "Fira Code", monospace;
	font-style: normal;
	color: #fff;
	background: linear-gradient(135deg, #0284c7, #9333ea);
}

.tkc-live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: 8px;
	font-size: 8px;
	color: #7fe3b8;
}

.tkc-live::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #3ddc97;
	animation: tkcBlink 1.6s infinite;
}

@keyframes tkcBlink { 50% { opacity: .25; } }

.tkc-tabs {
	display: flex;
	gap: 3px;
	padding: 2.5px;
	border-radius: 8px;
	background: #0b1028;
	border: 1px solid #161d40;
	user-select: none;
}

.tkc-tabs span {
	padding: 3px 10px;
	border-radius: 6px;
	color: var(--tkc-muted);
	cursor: pointer;
	font-weight: 500;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tkc-tabs span:hover:not(.on) {
	color: #e2e8f0;
	background: rgba(255, 255, 255, 0.08);
}

.tkc-tabs span.on {
	color: #fff;
	background: linear-gradient(135deg, rgba(2, 132, 199, .8), rgba(147, 51, 234, .8));
	box-shadow: 0 2px 10px rgba(34, 211, 238, 0.3);
}

.tkc-cols {
	flex: 1;
	display: grid;
	grid-template-columns: 1.35fr 1fr .85fr;
	gap: 8px;
	min-height: 0;
	transition: all 0.35s ease;
}

.tkc-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tab filter / focus states */
.tkc-ui[data-tab="map"] .tkc-col:nth-child(2) {
	transform: scale(1.02);
}
.tkc-ui[data-tab="map"] .tkc-col:nth-child(2) .tkc-pn {
	border-color: rgba(34, 211, 238, 0.55);
	box-shadow: 0 0 22px rgba(34, 211, 238, 0.22);
}
.tkc-ui[data-tab="map"] .tkc-col:not(:nth-child(2)) {
	opacity: 0.6;
}

.tkc-ui[data-tab="activity"] .tkc-col:nth-child(1) {
	transform: scale(1.02);
}
.tkc-ui[data-tab="activity"] .tkc-col:nth-child(1) .tkc-pn {
	border-color: rgba(168, 85, 247, 0.55);
	box-shadow: 0 0 22px rgba(168, 85, 247, 0.22);
}
.tkc-ui[data-tab="activity"] .tkc-col:not(:nth-child(1)) {
	opacity: 0.6;
}

.tkc-pn {
	position: relative;
	overflow: hidden;
	padding: 7px 8px;
	border-radius: 8px;
	background: rgba(10, 15, 40, .85);
	border: 1px solid #161e45;
	animation: tkcPn .7s cubic-bezier(.16, 1, .3, 1) backwards;
	animation-delay: calc(.45s + var(--d, 0) * .09s);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes tkcPn { from { opacity: 0; transform: translateY(8px); } }

.tkc-pn h6 {
	display: flex;
	justify-content: space-between;
	margin: 0 0 5px;
	font-size: 8.5px;
	font-weight: 600;
	color: #e6ebff;
}

.tkc-pn h6 em { font-style: normal; font-weight: 400; color: #6e7aa6; }

.tkc-kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tkc-kp > div {
	padding: 2px 4px;
	border-radius: 4px;
	transition: transform 0.2s ease, background 0.2s ease;
}
.tkc-kp > div:hover {
	background: rgba(34, 211, 238, 0.12);
	transform: translateY(-1px);
}
.tkc-kp > div.is-active-pulse {
	animation: tkcKpiRipple 0.5s ease;
}
@keyframes tkcKpiRipple {
	50% { transform: scale(1.1); background: rgba(56, 189, 248, 0.28); }
}

.tkc-kp small { font-size: 7.5px; color: #6e7aa6; }

.tkc-kp b {
	display: block;
	direction: ltr;
	text-align: start;
	font: 600 13px/1.3 "Fira Code", monospace;
	color: #fff;
}

html[dir="rtl"] .tkc-kp b { text-align: right; }
.tkc-kp em { font: normal 7.5px "Fira Code", monospace; color: #3ddc97; }

.tkc-ch { display: block; width: 100%; height: 92px; }

.tkc-ch path.l {
	fill: none;
	stroke: url(#tkcChL);
	stroke-width: 1.6;
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	animation: tkcDraw 1.4s .8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.tkc-ch path.a { fill: url(#tkcChA); opacity: 0; animation: tkcShow .8s 1.6s forwards; }

@keyframes tkcDraw { to { stroke-dashoffset: 0; } }
@keyframes tkcShow { to { opacity: 1; } }

.tkc-stream {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 58px;
	overflow: hidden;
	direction: ltr;
	font: 7.5px "Fira Code", monospace;
	color: var(--tkc-muted);
}

.tkc-stream div { display: flex; justify-content: space-between; padding-bottom: 2px; border-bottom: 1px solid #10173a; }
.tkc-stream b { font-weight: 500; color: #7dd3fc; }
.tkc-stream div.n { animation: tkcIn .5s; }
@keyframes tkcIn { from { opacity: 0; transform: translateY(-6px); } }

.tkc-map { flex: 1; }
.tkc-map svg { display: block; width: 100%; height: 100%; }
.tkc-map .dt { fill: #1c2754; }
.tkc-map .hot { fill: var(--tkc-cyan); }

.tkc-map .pulse {
	fill: none;
	stroke: var(--tkc-cyan);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: tkcPulse 2.6s infinite;
}

@keyframes tkcPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }

.tkc-map .arc { fill: none; stroke: var(--tkc-violet); stroke-width: .8; stroke-dasharray: 3 3; opacity: .7; }

.tkc-tile {
	flex: 1.2;
	background: linear-gradient(160deg, #0f1d52, #0a1236);
	border-color: #24418f;
	transition: border-color .4s, box-shadow .4s;
}

.tkc-tile h6 { font-size: 10px; }
.tkc-tile p { margin: 0; font-size: 8px; line-height: 1.6; color: #9aa6d1; }

.tkc-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }

.tkc-thumbs i {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 3px;
	background: #162564 center top / cover no-repeat;
}

.tkc-thumbs i:nth-child(1):not([style]) { background-image: linear-gradient(135deg, #0e7490, #0b1a3a); }
.tkc-thumbs i:nth-child(2):not([style]) { background-image: linear-gradient(135deg, #4c1d95, #120b2e); }
.tkc-thumbs i:nth-child(3):not([style]) { background-image: linear-gradient(135deg, #1d4ed8, #0b1430); }
.tkc-thumbs i:nth-child(4):not([style]) { background-image: linear-gradient(135deg, #9333ea, #1a0b2e); }

.tkc-go { margin-top: 6px; font-size: 8px; color: #7dd3fc; }
.on-tile .tkc-tile { border-color: var(--tkc-cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, .3), 0 0 30px rgba(34, 211, 238, .25); }

.tkc-cta { display: flex; flex-direction: column; justify-content: space-between; }
.tkc-cta p { margin: 0; font-size: 8px; color: #9aa6d1; }

.tkc-cta span {
	display: block;
	margin-top: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	font-size: 8.5px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #0284c7 0%, #38bdf8 45%, #9333ea 100%);
}

/* --------------------------------------------------------------------------
   Stat chips floating around the device
   -------------------------------------------------------------------------- */
.tkc-chips { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }

.tkc-chip {
	position: absolute;
	pointer-events: auto;
	cursor: pointer;
	animation: tkcChip .8s cubic-bezier(.16, 1, .3, 1) backwards;
}

/* --dw/--dh: rendered device size, set by hero-cine.js */
.tkc-stage { --dw: 540px; --dh: 300px; }
.tkc-chip.c1 { top: calc(50% - var(--dh) / 2 - 34px); inset-inline-end: calc(50% - var(--dw) / 2 - 18px); animation-delay: .7s; }
.tkc-chip.c2 { top: calc(50% + var(--dh) * .02); inset-inline-end: calc(50% - var(--dw) / 2 - 34px); animation-delay: .82s; }
.tkc-chip.c3 { top: calc(50% - var(--dh) * .3); inset-inline-start: calc(50% - var(--dw) / 2 - 26px); animation-delay: .94s; }
.tkc-chip.c4 { top: calc(50% + var(--dh) / 2 + 4px); inset-inline-start: calc(50% - var(--dw) / 2 + var(--dw) * .08); animation-delay: 1.06s; }
.tkc-chip.c5 { top: calc(50% + var(--dh) / 2 + 18px); inset-inline-end: calc(50% - var(--dw) / 2 + var(--dw) * .1); animation-delay: 1.18s; }

@keyframes tkcChip { from { opacity: 0; transform: translateY(16px) scale(.92); } }

.tkc-chip-in {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 16px 10px 10px;
	border-radius: 16px;
	background: var(--tkc-chip-bg);
	border: 1px solid var(--tkc-chip-bd);
	box-shadow: var(--tkc-chip-sh);
	color: var(--tkc-chip-tx);
	text-decoration: none;
	backdrop-filter: blur(12px);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	animation: tkcFloat 7s ease-in-out infinite;
	will-change: transform;
}

.tkc-chip:hover .tkc-chip-in,
.tkc-chip-in:focus-visible {
	transform: translateY(-5px) scale(1.05);
	border-color: rgba(56, 189, 248, 0.5);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.3);
}

.tkc-chip-in:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }

html[dir="rtl"] .tkc-chip-in { padding: 10px 10px 10px 16px; }
.tkc-chip.c2 .tkc-chip-in { animation-delay: -2.2s; }
.tkc-chip.c3 .tkc-chip-in { animation-delay: -4.1s; }
.tkc-chip.c4 .tkc-chip-in { animation-delay: -1.3s; }
.tkc-chip.c5 .tkc-chip-in { animation-delay: -5.4s; }

@keyframes tkcFloat { 50% { transform: translateY(-7px); } }

.tkc-chip .ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 15px;
	color: #fff;
	background: linear-gradient(135deg, #0284c7 0%, #38bdf8 45%, #9333ea 100%);
	box-shadow: 0 6px 16px rgba(56, 189, 248, .3);
}

.tkc-chip .tx { display: flex; flex-direction: column; min-width: 0; }

.tkc-chip b {
	direction: ltr;
	font: 800 20px/1.15 "Rubik", sans-serif;
	background: var(--tkc-num);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

html[dir="rtl"] .tkc-chip b { text-align: right; }

.tkc-chip small {
	max-width: 170px;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--tkc-chip-mu);
}

.tkc-note .tkc-chip-in { gap: 9px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tkc-note .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }

/* --------------------------------------------------------------------------
   Overlays
   -------------------------------------------------------------------------- */
.tkc-t3 {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 11vh;
	padding: 0 20px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}

.tkc-t3 h2 {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 800;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .85);
}

.tkc-grad {
	background: linear-gradient(135deg, #38bdf8 0%, #818cf8 45%, #c084fc 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tkc-hint.tek-hero-scroll-indicator {
	position: absolute;
	z-index: 5;
	bottom: 2.5vh;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
}

.tkc-fade { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; background: var(--tkc-next); }

.tkc + .portfolio-section { padding-top: 60px !important; }

/* pause every looping animation while the hero is off screen */
.tkc.is-off *,
.tkc.is-off *::before,
.tkc.is-off *::after { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   Large desktops
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
	.tkc-stage { height: min(64vh, 640px); }
	.tkc-chip b { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Flat layout: tablets, phones, reduced motion — nothing pinned
   -------------------------------------------------------------------------- */
.tkc.is-flat { height: auto; }
.tkc.is-flat .tkc-vp { position: relative; height: auto; min-height: 0; }
.tkc.is-flat .tkc-shell { height: auto; min-height: min(100vh, 900px); }
.tkc.is-flat .tkc-hint,
.tkc.is-flat .tkc-t3,
.tkc.is-flat .tkc-fade { display: none; }

@media (max-width: 1023px) {
	.tkc-shell {
		grid-template-columns: 1fr;
		gap: 26px;
		height: auto;
		padding: 104px 20px 56px;
	}

	.tkc-copy .tek-hero-content { align-items: center; text-align: center; }
	.tkc-copy .tek-hero-buttons-row,
	.tkc-copy .tek-hero-trust-bar { justify-content: center; }

	.tkc-stage { height: auto; min-height: 0; }
	.tkc-dbox { position: relative; height: 62vw; max-height: 470px; }

	.tkc-chips {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 14px;
	}

	.tkc-chip { position: static; }
	.tkc-chip-in { height: 100%; animation: none; }
	.tkc-note { grid-column: 1 / -1; justify-self: center; }
	.tkc-note .tkc-chip-in { white-space: normal; }
	.tkc-chip small { max-width: none; }
}

@media (max-width: 640px) {
	.tkc-shell { padding-top: 92px; }
	.tkc-copy .tek-hero-heading { font-size: 28px; }
	.tkc-copy .tek-hero-description { margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
	.tkc-copy .tek-hero-buttons-row { flex-wrap: nowrap; gap: 10px; margin-bottom: 14px; }

	.tkc-copy .tek-btn-cta-primary,
	.tkc-copy .tek-btn-cta-glass {
		width: auto;
		flex: 1 1 0;
		gap: 8px;
		padding: 11px 12px;
		font-size: 13.5px;
		justify-content: center;
		white-space: nowrap;
	}

	.tkc-copy .tek-btn-circle-arrow,
	.tkc-copy .tek-btn-play-icon { width: 22px; height: 22px; }
	.tkc-copy .tek-hero-trust-bar { gap: 8px 14px; }
	.tkc-copy .tek-trust-item { font-size: 12px; }

	.tkc-chip-in { gap: 9px; padding: 9px 10px !important; border-radius: 14px; }
	.tkc-chip .ic { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
	.tkc-chip b { font-size: 17px; }
	.tkc-chip small { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.tkc *,
	.tkc *::before,
	.tkc *::after { animation: none !important; }
	.tkc-ch path.l { stroke-dashoffset: 0; }
	.tkc-ch path.a { opacity: 1; }
	.tkc-screen::after { display: none; }
}