/* ==========================================================================
   Telesto — main stylesheet
   Dark, immersive design system (mobile-first).
   ========================================================================== */

:root {
	--bg: #02050d;
	--bg-2: #050a17;
	--surface: #07101f;
	--surface-2: #0b1730;
	--line: rgba(255, 255, 255, .1);
	--line-2: rgba(255, 255, 255, .18);
	--text: #e9eefb;
	--muted: #98a4bf;
	--dim: #5d6a86;
	--accent: #6fcf3b;        /* brand green, tuned for dark backgrounds */
	--accent-2: #8fe05a;
	--blue: #2f93ff;          /* brand technology blue, tuned for glow */
	--blue-deep: #087fe5;
	--navy: #07184f;
	--radius: 14px;
	--radius-sm: 8px;
	--header-h: 64px;
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--gutter: 16px;
	--glow-blue: 0 0 40px rgba(47, 147, 255, .45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--bg); }
body {
	margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65;
	color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Rainbow backdrop in medium tones: full spectrum, softly blended, with a veil for text contrast. */
body::before {
	content: ""; position: fixed; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: -1; pointer-events: none;
	background:
		radial-gradient(22% 20% at 36% 40%, rgba(70, 130, 210, .7), transparent 72%),
		radial-gradient(20% 18% at 64% 42%, rgba(200, 85, 170, .65), transparent 72%),
		radial-gradient(20% 18% at 50% 62%, rgba(215, 180, 70, .6), transparent 72%),
		conic-gradient(from 0deg at 50% 50%, #c9506c, #d0824a, #cdb24a, #58a86b, #3f9fc4, #4f68c4, #8a58c4, #bf55a6, #c9506c);
	border-radius: 50%; filter: blur(60px) saturate(.95);
	/* Colours change continuously: full hue cycle + rotation. */
	animation: tl-rainbow 40s linear infinite, tl-hue 16s linear infinite;
}
body::after {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(4, 8, 20, .44);
}
@keyframes tl-rainbow { to { transform: rotate(360deg); } }
@keyframes tl-hue {
	from { filter: blur(60px) saturate(.95) hue-rotate(0deg); }
	to { filter: blur(60px) saturate(.95) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #fff; }
::selection { background: rgba(111, 207, 59, .35); color: #fff; }

h1, h2, h3, h4 { color: #fff; line-height: 1.12; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.03em; overflow-wrap: break-word; text-shadow: 0 2px 18px rgba(2, 5, 13, .45); }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.015em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); text-shadow: 0 0 2px rgba(2, 5, 13, .7), 0 2px 22px rgba(2, 5, 13, .75); }
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text, .tl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tl-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.tl-skip:focus { top: 12px; color: #000; }

.tl-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.tl-narrow { max-width: 880px; margin-inline: auto; }
.tl-center { text-align: center; margin-top: 2.5rem; }
.tl-mt { margin-top: 3rem; }
.tl-main:focus { outline: none; }
.tl-icon { width: 1.25em; height: 1.25em; flex: none; }

/* Eyebrow */
.tl-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.tl-eyebrow--pill { padding: .4rem .85rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #cfd8ec; letter-spacing: .08em; font-size: .72rem; backdrop-filter: blur(6px); }
.tl-eyebrow--pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Buttons */
.tl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 46px; padding: .7rem 1.3rem; border-radius: 8px; border: 1px solid transparent;
	font: 600 .95rem/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.tl-btn__arrow { transition: transform .25s var(--ease); }
.tl-btn:hover .tl-btn__arrow { transform: translateX(4px); }
.tl-btn--primary, .tl-btn--light { background: #fff; color: #050a17; }
.tl-btn--primary:hover, .tl-btn--light:hover { background: var(--accent); color: #041002; box-shadow: 0 0 30px rgba(111, 207, 59, .35); }
.tl-btn--ghost, .tl-btn--outline-light { background: rgba(255, 255, 255, .02); color: #fff; border-color: var(--line-2); }
.tl-btn--ghost:hover, .tl-btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
.tl-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--accent); }
.tl-link .tl-icon { transition: transform .25s var(--ease); }
.tl-link:hover .tl-icon { transform: translateX(4px); }

/* ---------- Header: floating bar ---------- */
.tl-header { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; pointer-events: none; }
.admin-bar .tl-header { top: 58px; }
@media (min-width: 783px) { .admin-bar .tl-header { top: 44px; } }
.tl-header__inner {
	pointer-events: auto; position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	width: calc(100% - 2 * var(--gutter)); max-width: 1168px; margin-inline: auto; min-height: var(--header-h);
	padding: 0 .6rem 0 1.1rem; border: 1px solid var(--line-2); border-radius: 12px;
	background: rgba(3, 7, 17, .72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
	transition: background .3s, border-color .3s, box-shadow .3s;
}
.tl-header.is-scrolled .tl-header__inner { background: rgba(3, 7, 17, .9); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

.tl-brand .custom-logo-link img { max-height: 44px; width: auto; }
.tl-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.tl-logo__mark { width: 28px; height: 38px; color: #fff; flex: none; transition: transform .5s var(--ease); }
.tl-logo:hover .tl-logo__mark { transform: rotateY(180deg); }
.tl-logo__text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tl-logo__text strong { font-family: "Michroma", var(--font); font-size: 1.02rem; font-weight: 400; letter-spacing: .1em; color: #fff; }
.tl-logo__text small { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-family: "Michroma", var(--font); font-size: .43rem; letter-spacing: .28em; color: var(--accent); }
.tl-logo__text small::before, .tl-logo__text small::after { content: ""; width: 8px; height: 1.5px; background: var(--accent); }

.tl-header__actions { display: flex; align-items: center; gap: .5rem; }
.tl-header__actions > .tl-btn { display: none; min-height: 40px; padding: .5rem 1rem; font-size: .88rem; }
.tl-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: #fff; cursor: pointer; }
.tl-burger .tl-icon { width: 22px; height: 22px; }
.tl-burger__close { display: none; }
.tl-burger[aria-expanded="true"] .tl-burger__open { display: none; }
.tl-burger[aria-expanded="true"] .tl-burger__close { display: inline-flex; }

/* Mobile nav */
.tl-nav {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: calc(100vh - 110px); overflow-y: auto;
	padding: .75rem 1rem 1.25rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(3, 7, 17, .97);
	visibility: hidden; opacity: 0; transform: translateY(-6px);
	transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
}
.tl-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--ease); }
body.tl-nav-open { overflow: hidden; }
.tl-menu, .tl-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.tl-menu > li { border-bottom: 1px solid var(--line); }
.tl-menu a { display: flex; align-items: center; min-height: 46px; padding: .5rem .25rem; color: #d7deee; font-weight: 500; text-decoration: none; }
.tl-menu a:hover, .tl-menu .current-menu-item > a, .tl-menu .current-menu-ancestor > a { color: #fff; }
.tl-menu .sub-menu { padding: 0 0 .6rem .75rem; }
.tl-menu .sub-menu a { min-height: 40px; color: var(--muted); }
.tl-nav__mobile-cta { margin-top: 1.25rem; }
.tl-nav__mobile-cta .tl-btn { width: 100%; }

@media (min-width: 1140px) {
	.tl-header__actions > .tl-btn { display: inline-flex; }
	.tl-burger, .tl-nav__mobile-cta { display: none; }
	.tl-nav { position: static; visibility: visible; opacity: 1; transform: none; max-height: none; overflow: visible; padding: 0; border: 0; background: none; transition: none; }
	.tl-menu { display: flex; align-items: center; gap: .15rem; }
	.tl-menu > li { border: 0; position: relative; }
	.tl-menu > li > a { min-height: var(--header-h); padding: 0 .75rem; font-size: .92rem; color: #b9c3da; }
	.tl-menu > li > a:hover, .tl-menu > .current-menu-item > a { color: #fff; }
	.tl-menu > .menu-item-has-children > a { padding-right: 1.45rem; position: relative; }
	.tl-menu > .menu-item-has-children > a::after { content: ""; position: absolute; right: .65rem; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
	.tl-menu .sub-menu {
		position: absolute; top: calc(100% - 4px); left: -.5rem; min-width: 280px; padding: .5rem;
		background: rgba(5, 10, 23, .98); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
		opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
	}
	.tl-menu li:hover > .sub-menu, .tl-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
	.tl-menu .sub-menu a { min-height: 40px; padding: .5rem .75rem; border-radius: 8px; color: #cfd8ec; font-size: .9rem; }
	.tl-menu .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
}

.tl-progress { position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--accent)); pointer-events: none; }

/* ---------- Hero ---------- */
.tl-hero {
	position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
	display: flex; align-items: flex-end; padding: 140px 0 clamp(4rem, 12vh, 8rem);
	background: radial-gradient(900px 600px at 74% 40%, rgba(8, 127, 229, .16), transparent 65%);
}
.tl-stream { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tl-hero__orb { position: absolute; left: 76%; top: 42%; transform: translate(-50%, -50%); transition: transform .4s ease-out; pointer-events: none; }
.tl-hero__inner { position: relative; z-index: 2; }
.tl-hero__title { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.6rem); letter-spacing: -.045em; line-height: 1.04; margin-bottom: 1.25rem; max-width: 12ch; }
.tl-hero__text { font-size: clamp(1.02rem, .95rem + .45vw, 1.35rem); color: #d4dbeb; max-width: 44rem; margin-bottom: 2rem; }
.tl-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.tl-hero__scroll { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 24px; height: 38px; margin-left: -12px; border: 1.5px solid var(--line-2); border-radius: 14px; }
.tl-hero__scroll span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: tl-scrollhint 1.8s ease-in-out infinite; }
@keyframes tl-scrollhint { 60% { transform: translateY(12px); opacity: 0; } 61% { transform: none; opacity: 0; } }
@media (max-width: 767px) {
	.tl-hero__orb { left: 72%; top: 17%; }
	.tl-hero__orb .tl-orb { --s: 104px; }
	.tl-hero__scroll { display: none; }
}
@media (max-width: 479px) { .tl-hero__actions .tl-btn { width: 100%; } }

/* Glowing orb (reused) */
.tl-orb {
	--s: clamp(120px, 16vw, 200px);
	position: relative; display: grid; place-items: center; width: var(--s); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, rgba(160, 225, 255, .95), rgba(47, 147, 255, .75) 22%, rgba(8, 80, 180, .55) 48%, rgba(3, 20, 60, .9) 72%);
	box-shadow: 0 0 60px rgba(47, 147, 255, .65), 0 0 140px rgba(47, 147, 255, .35), inset 0 0 40px rgba(255, 255, 255, .15);
	animation: tl-breathe 5s ease-in-out infinite;
}
.tl-orb > .tl-logo__mark { width: 30%; height: 40%; color: #fff; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .6)); }
.tl-orb__ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(143, 200, 255, .35); animation: tl-spin 26s linear infinite; }
.tl-orb__ring--2 { inset: -34%; border-style: solid; border-color: rgba(111, 207, 59, .18); animation-duration: 40s; animation-direction: reverse; }
.tl-orb--md { --s: clamp(110px, 14vw, 160px); }
.tl-orb--lg { --s: clamp(130px, 15vw, 190px); }
@keyframes tl-breathe { 50% { box-shadow: 0 0 80px rgba(47, 147, 255, .8), 0 0 180px rgba(47, 147, 255, .4), inset 0 0 40px rgba(255, 255, 255, .2); } }
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* ---------- Belt ---------- */
.tl-belt-section { padding: 3.5rem 0 1rem; text-align: center; }
.tl-belt__label { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: #cfd8ec; margin-bottom: 1.75rem; }
.tl-belt__label em { font-style: normal; color: var(--accent); }
.tl-belt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tl-belt__track { display: flex; width: max-content; animation: tl-marquee 40s linear infinite; }
.tl-belt:hover .tl-belt__track, .tl-belt:focus-within .tl-belt__track { animation-play-state: paused; }
.tl-belt__list { display: flex; list-style: none; margin: 0; padding: 0; }
.tl-belt__list a { display: inline-flex; align-items: center; gap: .65rem; padding: .5rem 2.25rem; color: #aeb8cf; font-weight: 600; font-size: 1.1rem; text-decoration: none; white-space: nowrap; filter: grayscale(1); opacity: .8; transition: color .25s, opacity .25s, filter .25s; }
.tl-belt__list a:hover { color: #fff; opacity: 1; filter: none; }
.tl-belt__list .tl-icon { width: 24px; height: 24px; color: var(--accent); }
@keyframes tl-marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.tl-section { position: relative; padding: 4.5rem 0; }
@media (min-width: 992px) { .tl-section { padding: 7rem 0; } }
.tl-section--page { padding-top: 3.5rem; }
.tl-section--tint, .tl-section--tint-green { background: linear-gradient(180deg, transparent, rgba(8, 127, 229, .05), transparent); }
.tl-section__head { max-width: 780px; margin: 0 auto 3rem; text-align: center; }
.tl-section__head h2 { margin-bottom: .6rem; }
.tl-section__head p:last-child { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

/* ---------- Converge ---------- */
.tl-converge__stage { position: relative; height: clamp(320px, 42vw, 460px); margin: 0 auto 3rem; max-width: 900px; --p: 0; }
.tl-converge__stage > .tl-orb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tl-chip {
	position: absolute; z-index: 1;
	left: calc(var(--x) * (1 - var(--p)) + 50% * var(--p));
	top: calc(var(--y) * (1 - var(--p)) + 50% * var(--p));
	translate: -50% -50%;
	opacity: calc(1 - var(--p) * .85);
	display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
	font-size: clamp(.72rem, .68rem + .2vw, .9rem); font-weight: 600; color: #fff; white-space: nowrap;
	background: rgba(7, 16, 31, .85); border: 1px solid rgba(143, 200, 255, .3); box-shadow: 0 0 20px rgba(47, 147, 255, .15);
	animation: tl-float 6s ease-in-out infinite; animation-delay: var(--d);
}
.tl-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes tl-float { 50% { transform: translateY(-10px); } }
@media (max-width: 600px) { .tl-chip:nth-of-type(n+7) { display: none; } }
.tl-scrolltext { max-width: 900px; margin: 0 auto; text-align: center; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.45; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.tl-scrolltext em { font-style: normal; }
.tl-js .tl-scrolltext .w { color: rgba(255, 255, 255, .18); transition: color .35s; }
.tl-js .tl-scrolltext .w.is-lit { color: #fff; }
.tl-js .tl-scrolltext em .w.is-lit { color: var(--accent); }

/* ---------- Flow ---------- */
.tl-flow-section { overflow: hidden; }
.tl-flow { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.tl-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tl-flow__svg path { fill: none; stroke: rgba(143, 200, 255, .22); stroke-width: 1.2; }
.tl-flow__svg circle { fill: #9fd4ff; filter: drop-shadow(0 0 5px #4fb0ff); }
.tl-flow__svg circle.is-green { fill: var(--accent-2); filter: drop-shadow(0 0 5px var(--accent)); }
.tl-flow__col { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; position: relative; }
.tl-pill {
	display: inline-flex; padding: .55rem 1.05rem; border-radius: 6px; font-size: .92rem; font-weight: 600; color: #fff;
	background: rgba(7, 16, 31, .92); border: 1px solid var(--line-2); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.tl-pill:hover { border-color: rgba(143, 200, 255, .6); }
.tl-pill--out { border-color: rgba(111, 207, 59, .35); }
.tl-pill.is-pulse { border-color: var(--accent); box-shadow: 0 0 22px rgba(111, 207, 59, .35); }
.tl-flow__hub { justify-self: center; position: relative; }
@media (min-width: 992px) {
	.tl-flow { grid-template-columns: 1fr auto 1fr; gap: 6rem; min-height: 440px; }
	.tl-flow__col { flex-direction: column; align-items: flex-start; gap: .9rem; }
	.tl-flow__col--out { align-items: flex-end; }
	.tl-flow__col--in .tl-pill:nth-child(odd) { margin-left: 2.25rem; }
	.tl-flow__col--out .tl-pill:nth-child(even) { margin-right: 2.25rem; }
}

/* ---------- Segmented tabs ---------- */
.tl-seg {
	display: flex; width: max-content; max-width: 100%; margin: 0 auto 2.5rem; padding: 4px; gap: 2px;
	border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); overflow-x: auto; scrollbar-width: none;
}
.tl-seg::-webkit-scrollbar { display: none; }
.tl-seg__tab {
	position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: .45rem;
	padding: .6rem 1.15rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
	font: 600 .78rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
	transition: background .25s, color .25s;
}
.tl-seg__tab:hover { color: #fff; }
.tl-seg__tab[aria-selected="true"] { background: var(--surface-2); color: #fff; }
.tl-seg__tab .tl-icon { width: 16px; height: 16px; }
.tl-seg--wide .tl-seg__tab { letter-spacing: .02em; text-transform: none; font-size: .88rem; }
/* Fade the edges that have more tabs beyond them. */
.tl-seg--wide.is-overflowing { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.tl-seg--wide.is-overflowing.at-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.tl-seg--wide.is-overflowing.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.tl-seg__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--fill, 0%); background: var(--accent); }
.tl-tabs__panel:not([hidden]) { animation: tl-fade .45s var(--ease); }
@keyframes tl-fade { from { opacity: 0; transform: translateY(8px); } }

.tl-step, .tl-module { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .tl-step, .tl-module { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.tl-step__num { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--dim); margin-bottom: .75rem; }
.tl-step h3, .tl-module h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--accent); margin-bottom: .75rem; }
.tl-step p, .tl-module p { color: #c3cce0; font-size: 1.05rem; }
.tl-step__visual {
	position: relative; height: 300px; border-radius: var(--radius); border: 1px solid var(--line-2); overflow: hidden;
	background: radial-gradient(400px 220px at 75% 50%, rgba(47, 147, 255, .18), transparent 70%), var(--bg-2);
}
.tl-step__lines { position: absolute; inset: 0; }
.tl-step__lines span {
	position: absolute; left: 6%; right: 25%; height: 1px; top: calc(12% + var(--i) * 12.5%);
	background: linear-gradient(90deg, transparent, rgba(143, 200, 255, .25) 30%, rgba(143, 200, 255, .5));
	transform-origin: right center; transform: rotate(calc((var(--i) - 3) * -3.2deg));
}
.tl-step__lines span::after {
	content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%;
	background: var(--accent-2); box-shadow: 0 0 8px var(--accent);
	animation: tl-travel calc(2.2s + var(--i) * .25s) linear infinite; animation-delay: calc(var(--i) * -.4s);
}
@keyframes tl-travel { from { left: 0; opacity: 0; } 15% { opacity: 1; } to { left: 100%; opacity: .2; } }
.tl-step__icon {
	position: absolute; right: 12%; top: 50%; transform: translate(50%, -50%); display: grid; place-items: center;
	width: 76px; height: 76px; border-radius: 50%; color: #fff;
	background: radial-gradient(circle at 35% 30%, #4fb0ff, var(--blue-deep) 55%, #06245e); box-shadow: var(--glow-blue), 0 0 0 10px rgba(47, 147, 255, .1);
}
.tl-step__icon .tl-icon { width: 32px; height: 32px; }

.tl-module__kicker { font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue) !important; margin-top: -.25rem; }
.tl-module__list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: .55rem; }
.tl-module__list li { position: relative; padding-left: 1.2rem; color: #d7deee; }
.tl-module__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tl-module__visual { position: relative; height: 340px; display: grid; place-items: center; }
.tl-module__orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(143, 200, 255, .16); }
.tl-module__orbit--1 { width: 200px; height: 200px; }
.tl-module__orbit--2 { width: 320px; height: 320px; border-style: dashed; }
.tl-module__center { position: relative; z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #4fb0ff, var(--blue-deep) 55%, #06245e); box-shadow: var(--glow-blue), 0 0 0 12px rgba(47, 147, 255, .08); }
.tl-module__center .tl-icon { width: 40px; height: 40px; }
.tl-module__sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: tl-spin 30s linear infinite; }
.tl-module__sat > span {
	position: absolute; width: 50px; height: 50px; left: -25px; top: -25px; display: grid; place-items: center; border-radius: 50%;
	color: var(--accent-2); background: rgba(7, 16, 31, .95); border: 1px solid rgba(111, 207, 59, .45); box-shadow: 0 0 18px rgba(111, 207, 59, .2);
	transform: rotate(var(--a)) translate(160px) rotate(calc(-1 * var(--a)));
}
.tl-module__sat .tl-icon { width: 22px; height: 22px; }
@media (max-width: 520px) {
	.tl-module__orbit--2 { width: 250px; height: 250px; }
	.tl-module__sat > span { transform: rotate(var(--a)) translate(125px) rotate(calc(-1 * var(--a))); }
	.tl-module__visual { height: 300px; }
}

/* ---------- Cards ---------- */
.tl-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tl-grid--3, .tl-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-grid { gap: 1.25rem; } .tl-grid--3 { grid-template-columns: repeat(3, 1fr); } .tl-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.tl-card {
	--mx: 50%; --my: 50%;
	position: relative; padding: 1.75rem; border-radius: var(--radius); border: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--bg-2);
	transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.tl-card:hover { border-color: rgba(143, 200, 255, .35); background: radial-gradient(380px circle at var(--mx) var(--my), rgba(47, 147, 255, .12), transparent 65%), var(--bg-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.tl-card p { color: var(--muted); margin-bottom: 0; }
.tl-card__title { margin: 1.1rem 0 .45rem; font-size: 1.15rem; }
.tl-card__title a { color: inherit; text-decoration: none; }
.tl-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--accent-2); background: rgba(111, 207, 59, .1); border: 1px solid rgba(111, 207, 59, .25); transition: transform .35s var(--ease), box-shadow .35s; }
.tl-card__icon .tl-icon { width: 24px; height: 24px; }
.tl-card__icon--green { color: var(--accent-2); }
.tl-card:hover .tl-card__icon { transform: scale(1.06); box-shadow: 0 0 24px rgba(111, 207, 59, .3); }

.tl-solution-card { display: flex; flex-direction: column; }
.tl-solution-card .tl-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tl-solution-card p { flex: 1; }
.tl-card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-weight: 600; color: var(--accent); }
.tl-card__link .tl-icon { transition: transform .25s var(--ease); }
.tl-solution-card:hover, .tl-solution-card:focus-within { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.tl-solution-card:hover .tl-card__link .tl-icon { transform: translateX(5px); }
.tl-solution-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-solution-card a:focus-visible { outline: none; }

.tl-post-card__img { margin: -1.75rem -1.75rem 1.25rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.tl-post-card__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.tl-post-card__date { font-size: .8rem; font-weight: 600; color: var(--accent) !important; margin-bottom: .25rem !important; }
.tl-post-card .tl-card__title a::after { content: ""; position: absolute; inset: 0; }

/* Bento */
.tl-bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tl-bento { grid-template-columns: repeat(2, 1fr); } .tl-bento__item--lg, .tl-bento__cta { grid-column: span 2; } }
@media (min-width: 1024px) {
	.tl-bento { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
	.tl-bento__item--lg { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px;
		background: radial-gradient(420px 260px at 80% 10%, rgba(47, 147, 255, .25), transparent 70%), var(--bg-2); }
	.tl-bento__item--lg .tl-card__title { font-size: 1.8rem; }
	.tl-bento__item--lg p { font-size: 1.05rem; }
}
.tl-bento__cta {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem; border-radius: var(--radius);
	border: 1px solid rgba(111, 207, 59, .35); background: linear-gradient(120deg, rgba(111, 207, 59, .12), rgba(47, 147, 255, .08));
	color: #fff; font-size: 1.15rem; font-weight: 700; text-decoration: none; transition: border-color .3s, transform .3s var(--ease);
}
.tl-bento__cta:hover { color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.tl-bento__cta .tl-icon { width: 28px; height: 28px; color: var(--accent); transition: transform .3s var(--ease); }
.tl-bento__cta:hover .tl-icon { transform: translateX(6px); }

/* Why */
.tl-why { display: flex; gap: 1rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); transition: border-color .3s, transform .3s var(--ease); }
.tl-why:hover { border-color: rgba(111, 207, 59, .4); transform: translateY(-3px); }
.tl-why__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; background: radial-gradient(circle at 35% 30%, #4fb0ff, var(--blue-deep) 60%, #06245e); box-shadow: 0 0 20px rgba(47, 147, 255, .3); }
.tl-why h3 { margin: .1rem 0 .3rem; font-size: 1.05rem; }
.tl-why p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Ecosystem ---------- */
.tl-eco { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .tl-eco { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.tl-eco__map { position: relative; width: min(540px, 100%); aspect-ratio: 1; margin-inline: auto; }
.tl-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-eco__lines line { stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.tl-eco__spoke { stroke: rgba(143, 200, 255, .25); stroke-width: 1.2; stroke-dasharray: 3 5; }
.tl-eco__spoke.is-on { stroke: var(--blue); stroke-width: 2; stroke-dasharray: none; }
.tl-eco__link { stroke: rgba(143, 200, 255, .12); stroke-width: 1; }
.tl-eco__link.is-on { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; animation: tl-dash 1.2s linear infinite; }
@keyframes tl-dash { to { stroke-dashoffset: -24; } }
.tl-eco__hub {
	position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, rgba(160, 225, 255, .9), rgba(47, 147, 255, .7) 25%, rgba(3, 20, 60, .95) 72%); box-shadow: 0 0 50px rgba(47, 147, 255, .5);
}
.tl-eco__hub .tl-logo__mark { width: 30%; height: 40%; color: #fff; }
.tl-eco__node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 112px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #cfd8ec; }
.tl-eco__node .tl-icon { width: 54px; height: 54px; padding: 14px; border-radius: 50%; background: var(--surface); color: #9fd4ff; border: 1px solid var(--line-2); transition: all .25s var(--ease); }
.tl-eco__node span { font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center; }
.tl-eco__node:hover .tl-icon { border-color: var(--blue); transform: scale(1.08); }
.tl-eco__node.is-active .tl-icon { background: var(--blue-deep); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 8px rgba(47, 147, 255, .15), var(--glow-blue); transform: scale(1.1); }
.tl-eco__node.is-linked .tl-icon { border-color: var(--accent); color: var(--accent-2); }
.tl-eco__node:focus-visible { outline: none; }
.tl-eco__node:focus-visible .tl-icon { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 519px) {
	.tl-eco__node { width: 46px; }
	.tl-eco__node span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tl-eco__node .tl-icon { width: 44px; height: 44px; padding: 11px; }
}
.tl-eco__panel { padding: 2rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); min-height: 300px; }
.tl-eco__detail h3 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.tl-eco__detail > p { color: var(--muted); }
.tl-eco__detail:not([hidden]) { animation: tl-fade .35s var(--ease); }
.tl-eco__connects { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent) !important; margin: 1.25rem 0 .5rem; }
.tl-eco__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-eco__chips li { font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); color: #d7deee; }

/* ---------- FAQ ---------- */
.tl-faq { border-top: 1px solid var(--line); }
.tl-faq__item, .tl-content details.wp-block-details { border-bottom: 1px solid var(--line); }
.tl-faq__item summary, .tl-content details.wp-block-details summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem .25rem;
	cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; color: #fff; transition: color .2s;
}
.tl-faq__item summary:hover { color: var(--accent); }
.tl-faq__item summary::-webkit-details-marker, .tl-content details summary::-webkit-details-marker { display: none; }
.tl-faq__chev, .tl-content details.wp-block-details summary::after {
	flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; border: 1px solid rgba(111, 207, 59, .5); color: var(--accent); transition: transform .3s var(--ease), background .3s;
}
.tl-content details.wp-block-details summary::after { content: "+"; display: grid; place-items: center; padding: 0; font-size: 1.1rem; line-height: 1; }
.tl-faq__item[open] .tl-faq__chev, .tl-content details.wp-block-details[open] summary::after { transform: rotate(45deg); background: rgba(111, 207, 59, .12); }
.tl-faq__answer, .tl-content details.wp-block-details > :not(summary) { padding: 0 .25rem; color: var(--muted); }
.tl-faq__answer p:last-child, .tl-content details.wp-block-details > :last-child { padding-bottom: 1.35rem; margin-bottom: 0; }
.tl-faq__item[open] .tl-faq__answer { animation: tl-fade .35s var(--ease); }

/* ---------- CTA card ---------- */
.tl-cta { padding: 2rem 0 4rem; }
.tl-cta__box {
	position: relative; overflow: hidden; display: grid; gap: 1.75rem; padding: 2.25rem 1.5rem;
	border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-2);
}
.tl-cta__circuit {
	position: absolute; inset: 0; pointer-events: none; opacity: .55;
	background-image: radial-gradient(rgba(143, 200, 255, .35) 1px, transparent 1.2px); background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(600px 300px at 85% 100%, #000, transparent 70%); mask-image: radial-gradient(600px 300px at 85% 100%, #000, transparent 70%);
}
.tl-cta__copy, .tl-cta__actions { position: relative; }
.tl-cta h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.2rem); max-width: 30ch; margin-bottom: .5rem; }
.tl-cta p { margin: 0; color: var(--muted); max-width: 42rem; }
.tl-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 479px) { .tl-cta__actions .tl-btn { width: 100%; } }
@media (min-width: 992px) { .tl-cta__box { grid-template-columns: 1fr auto; align-items: end; padding: 3.5rem; } }

/* ---------- Inner page hero ---------- */
.tl-page-hero {
	position: relative; overflow: hidden; padding: 150px 0 4rem; color: #cfd8ec;
	background: radial-gradient(800px 420px at 85% 0%, rgba(47, 147, 255, .2), transparent 65%), radial-gradient(600px 300px at 0% 100%, rgba(111, 207, 59, .08), transparent 60%);
	border-bottom: 1px solid var(--line);
}
.tl-hero-grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(143, 200, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 200, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}
.tl-page-hero__inner { position: relative; }
.tl-page-hero h1 { max-width: 20ch; margin-bottom: .9rem; }
.tl-page-hero__lead { font-size: clamp(1rem, .95rem + .35vw, 1.25rem); max-width: 44rem; margin: 0; color: #c3cce0; }
.tl-page-hero .tl-hero__actions { margin-top: 1.75rem; }
.tl-page-hero__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: #fff; margin-bottom: 1rem; }
.tl-page-hero__split { display: grid; gap: 2rem; align-items: center; }
.tl-page-hero__badge { display: none; }
.tl-page-hero__bigicon {
	display: grid; place-items: center; width: 210px; aspect-ratio: 1; margin-left: auto; border-radius: 50%; color: #fff;
	background: radial-gradient(circle at 38% 34%, rgba(160, 225, 255, .95), rgba(47, 147, 255, .75) 22%, rgba(8, 80, 180, .55) 48%, rgba(3, 20, 60, .9) 72%);
	box-shadow: 0 0 60px rgba(47, 147, 255, .55), 0 0 140px rgba(47, 147, 255, .25); animation: tl-breathe 5s ease-in-out infinite;
}
.tl-page-hero__bigicon .tl-icon { width: 40%; height: 40%; stroke-width: 1.5; }
.tl-page-hero__img { border-radius: var(--radius); border: 1px solid var(--line-2); }
@media (min-width: 768px) {
	.tl-page-hero { padding: 170px 0 5rem; }
	.tl-page-hero__split { grid-template-columns: 1.4fr .6fr; }
	.tl-page-hero__badge { display: block; }
}
.tl-breadcrumbs ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .82rem; }
.tl-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; color: var(--dim); }
.tl-breadcrumbs li + li::before { content: "/"; }
.tl-breadcrumbs a { color: var(--muted); text-decoration: none; }
.tl-breadcrumbs a:hover { color: #fff; }
.tl-breadcrumbs [aria-current] { color: #fff; }

/* ---------- Page content ---------- */
.tl-content { font-size: 1.05rem; }
.tl-content > * + h2 { margin-top: 2.75rem; }
.tl-content > * + h3 { margin-top: 1.75rem; }
.tl-content p, .tl-content li { color: #c3cce0; }
.tl-content a { color: var(--accent); }
.tl-content ul, .tl-content ol { padding-left: 1.25rem; }
.tl-content li { margin-bottom: .4rem; }
.tl-content img { border-radius: 12px; }
.tl-content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 0 12px 12px 0; }
.tl-content table { width: 100%; border-collapse: collapse; }
.tl-content th, .tl-content td { border: 1px solid var(--line-2); padding: .6rem .8rem; text-align: left; }
.tl-content--solution h2 { display: flex; align-items: center; gap: .75rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.tl-content--solution h2::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: linear-gradient(var(--blue), var(--accent)); flex: none; }
.tl-content ul.wp-block-list, .tl-content--solution ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .tl-content--solution ul { grid-template-columns: repeat(2, 1fr); } }
.tl-content ul.wp-block-list > li, .tl-content--solution ul > li {
	position: relative; margin: 0; padding: .85rem 1rem .85rem 2.6rem; border-radius: 10px;
	background: var(--bg-2); border: 1px solid var(--line); color: #e3e9f6; font-weight: 500; transition: border-color .25s;
}
.tl-content ul.wp-block-list > li:hover { border-color: rgba(111, 207, 59, .4); }
.tl-content ul.wp-block-list > li::before, .tl-content--solution ul > li::before {
	content: ""; position: absolute; left: 1rem; top: 1.3rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.tl-checks { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .75rem; }
.tl-checks li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 600; }
.tl-checks .tl-icon { color: #041002; background: var(--accent); border-radius: 50%; padding: 4px; width: 22px; height: 22px; }

/* ---------- Contact + form ---------- */
.tl-contact { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .tl-contact { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; } }
.tl-contact__info > p { color: var(--muted); }
.tl-contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.tl-contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.tl-contact-list > li > .tl-icon { width: 42px; height: 42px; padding: 11px; border-radius: 10px; background: var(--bg-2); color: var(--accent); border: 1px solid var(--line-2); }
.tl-contact-list span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.tl-contact-list a, .tl-contact-list address { font-style: normal; font-weight: 600; color: #fff; text-decoration: none; word-break: break-word; }
.tl-contact-list a:hover { color: var(--accent); }
.tl-steps-mini { margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.tl-steps-mini h2 { font-size: 1.1rem; }
.tl-steps-mini ol { margin: 0; padding-left: 1.2rem; color: #c3cce0; }
.tl-steps-mini li { margin-bottom: .35rem; }

.tl-form-wrap { padding: 1.5rem; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-2); }
@media (min-width: 640px) { .tl-form-wrap { padding: 2.25rem; } }
.tl-form-wrap__title { font-size: 1.4rem; }
.tl-form__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tl-form__grid { grid-template-columns: 1fr 1fr; } .tl-field--full { grid-column: 1 / -1; } }
.tl-field label { display: block; font-size: .85rem; font-weight: 600; color: #cfd8ec; margin-bottom: .35rem; }
.tl-field label span { color: #ff8a7a; }
.tl-field input, .tl-field select, .tl-field textarea {
	width: 100%; min-height: 48px; padding: .7rem .9rem; font: 400 1rem/1.4 var(--font); color: #fff;
	background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; transition: border-color .2s, box-shadow .2s;
}
.tl-field select { color-scheme: dark; }
.tl-field textarea { resize: vertical; min-height: 130px; }
.tl-field ::placeholder { color: var(--dim); }
.tl-field input:focus, .tl-field select:focus, .tl-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111, 207, 59, .18); }
.tl-field.is-invalid input, .tl-field.is-invalid select, .tl-field.is-invalid textarea { border-color: #ff6b5b; }
.tl-field__error { display: block; margin-top: .3rem; font-size: .85rem; color: #ff8a7a; font-weight: 500; }
.tl-form__note { font-size: .85rem; color: var(--dim); margin: 1rem 0 1.25rem; }
.tl-form .tl-btn { width: 100%; }
@media (min-width: 640px) { .tl-form .tl-btn { width: auto; } }
.tl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tl-alert { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: .95rem; }
.tl-alert--success { background: rgba(111, 207, 59, .1); color: #c8f0ae; border: 1px solid rgba(111, 207, 59, .4); }
.tl-alert--success .tl-icon { color: var(--accent); width: 22px; height: 22px; }
.tl-alert--error { background: rgba(255, 107, 91, .1); color: #ffc2b9; border: 1px solid rgba(255, 107, 91, .4); }

/* ---------- Footer ---------- */
.tl-footer { padding: 1rem 0 2rem; font-size: .92rem; color: var(--muted); }
.tl-footer__card { position: relative; overflow: hidden; padding: 2.5rem 1.5rem 0; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-2); }
@media (min-width: 768px) { .tl-footer__card { padding: 3.25rem 3rem 0; } }
.tl-footer__circuit { position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(47, 147, 255, .18), transparent 65%); }
.tl-footer__grid { position: relative; display: grid; gap: 2.25rem; }
@media (min-width: 640px) { .tl-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tl-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.tl-footer .tl-logo__mark { width: 38px; height: 50px; }
.tl-footer .tl-logo__text strong { font-size: 1.45rem; }
.tl-footer .tl-logo__text small { font-size: .56rem; }
.tl-footer__tagline { color: var(--accent); font-weight: 600; margin: 1rem 0 .5rem; }
.tl-footer__title { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.tl-footer__links, .tl-footer__legal, .tl-socials { list-style: none; margin: 0; padding: 0; }
.tl-footer__links li { margin-bottom: .5rem; }
.tl-footer a { color: #b9c3da; text-decoration: none; }
.tl-footer a:hover { color: #fff; }
.tl-footer .tl-contact-list > li > .tl-icon { width: 36px; height: 36px; padding: 9px; }
.tl-footer .tl-contact-list a, .tl-footer .tl-contact-list address, .tl-footer .tl-contact-list div { color: #dfe6f5; }
.tl-socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tl-socials a { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .82rem; }
.tl-footer__bottom { position: relative; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.75rem; padding: 1.4rem 0; border-top: 1px solid var(--line); font-size: .82rem; }
.tl-footer__bottom p { margin: 0; }
.tl-footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- WhatsApp + mobile bar ---------- */
.tl-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1ebe57; color: #fff; box-shadow: 0 10px 30px rgba(30, 190, 87, .4); transition: transform .25s var(--ease); }
.tl-wa-float .tl-icon { width: 28px; height: 28px; }
.tl-wa-float:hover { transform: scale(1.08); color: #fff; }
.tl-wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1ebe57; animation: tl-ring 2.4s ease-out infinite; }
@keyframes tl-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.tl-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; background: rgba(3, 7, 17, .96); border-top: 1px solid var(--line-2); backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); }
.tl-mobile-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; font-size: .74rem; font-weight: 600; color: #dfe6f5; text-decoration: none; }
.tl-mobile-bar .tl-icon { width: 22px; height: 22px; }
.tl-mobile-bar__wa { color: #4ade80 !important; }
.tl-mobile-bar__primary { background: #fff; color: #050a17 !important; }
body { padding-bottom: 60px; }
@media (min-width: 768px) { .tl-mobile-bar { display: none; } body { padding-bottom: 0; } .tl-wa-float { display: grid; } }

/* ---------- Misc ---------- */
.tl-feature-img { margin: 0 0 2rem; }
.tl-feature-img img { border-radius: var(--radius); width: 100%; }
.tl-pagination { margin-top: 2.5rem; }
.tl-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.tl-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 8px; border: 1px solid var(--line-2); color: #fff; text-decoration: none; font-weight: 600; }
.tl-pagination .current { background: #fff; color: #050a17; }
.post-navigation { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tl-404__code { font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 800; line-height: 1; margin: 0 0 .5rem; background: linear-gradient(90deg, #4fb0ff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] { flex: 1; min-height: 48px; padding: .6rem .9rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: #fff; font: inherit; }
.search-form .search-submit { min-height: 48px; padding: 0 1.2rem; border: 0; border-radius: 8px; background: #fff; color: #050a17; font-weight: 600; cursor: pointer; }

/* Scroll reveal (only when JS runs) */
.tl-js .tl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tl-js .tl-reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }
@media (min-width: 1920px) { .tl-container { max-width: 1320px; } .tl-header__inner { max-width: 1288px; } body { font-size: 1.05rem; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.tl-js .tl-reveal { opacity: 1; transform: none; }
	.tl-js .tl-scrolltext .w { color: #fff; }
	.tl-js .tl-scrolltext em .w { color: var(--accent); }
}
