/*
Theme Name: TC Partners
Theme URI: https://tcpartners.eu/
Author: Telecom Consulting Partners
Author URI: https://tcpartners.eu/
Description: Bilingual (EN/BG) marketing theme for Telecom Consulting Partners — home, solutions, industries, how we work and contact, built from the TCP design system.
Version: 1.8.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tcpartners
Tags: business, one-column, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--tcp-blue: #0B2E9E;
	--tcp-blue-deep: #061B5C;
	--tcp-blue-mid: #1257C8;
	--tcp-cyan: #29A9E1;
	--tcp-cyan-deep: #1583BC;
	--tcp-ink: #0F2246;
	--tcp-ink-soft: #23385C;
	--tcp-slate: #3E5170;
	--tcp-slate-2: #4A5A75;
	--tcp-muted: #55688A;
	--tcp-muted-2: #5B6D8C;
	--tcp-muted-3: #6B7C99;
	--tcp-line: #E3EAF4;
	--tcp-line-2: #DCE4F0;
	--tcp-line-3: #CFDAEA;
	--tcp-line-4: #C3D2E8;
	--tcp-soft: #F3F6FB;
	--tcp-tint: #EDF3FC;
	--tcp-tint-2: #E8F1FD;
	--tcp-white: #FFFFFF;
	--tcp-dark: #0B1220;
	--tcp-dark-line: #16223A;

	--tcp-sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--tcp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--tcp-max: 1280px;
	--tcp-px: 40px;

	/* One radius scale, four steps plus the pill. The rule: tags and inline
	   chips are 6px, anything you click is 8px, cards are 12px, panels and
	   feature cards are 16px, and the nav / status chips are fully round.
	   Nothing outside this list. */
	--r-tag: 6px;
	--r-control: 8px;
	--r-card: 12px;
	--r-panel: 16px;
	--r-pill: 999px;

	--tcp-error: #B3261E;
	--tcp-dim: #93A3B8;

	/* The nav is a floating pill, so on desktop it takes no layout space and
	   the banner is exactly one device screen. On mobile the section strip
	   underneath it does take space — see the 760px breakpoint. */
	--tcp-nav-top: 28px;
	--tcp-chrome-h: 0px;

	/* Layer scale. Nothing gets an ad-hoc z-index outside these five. */
	--z-grain: 30;
	--z-nav: 40;
	--z-progress: 60;
	--z-menu: 80;
	--z-skip: 100;

	--tcp-shadow-card: 0 16px 40px rgba(11, 46, 158, 0.07);
	--tcp-shadow-hover: 0 24px 54px rgba(11, 46, 158, 0.14);

	/* The nav pill is fixed, so anything scrolled to by an anchor has to
	   clear it: --tcp-nav-top + the pill itself + a little air. Re-measure
	   this if either the offset or the pill's padding changes. */
	--tcp-anchor: 120px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

/* Smooth scroll to an anchor otherwise parks the target under the nav pill. */
[id] {
	scroll-margin-top: var(--tcp-anchor);
}

body {
	margin: 0;
	background: var(--tcp-white);
	color: var(--tcp-ink);
	font-family: var(--tcp-sans);
	font-size: 15px;
	line-height: 1.5;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--tcp-blue);
	text-decoration: none;
	transition: color .18s ease;
}

a:hover,
a:focus {
	color: var(--tcp-cyan);
}

img,
svg {
	max-width: 100%;
}

/* Step numbers, timestamps and order IDs sit in columns and get compared to
   each other, so they need fixed-width figures. Prose keeps proportional. */
.tcp-eyebrow,
.tcp-tag,
.tcp-mixtag,
.tcp-pillar__num,
.tcp-layer__n,
.tcp-panel__num,
.tcp-sol__num,
.tcp-phone__time,
.tcp-flow__head,
.tcp-flow__note,
.tcp-code,
.tcp-code__foot {
	font-variant-numeric: tabular-nums;
}

button {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4 {
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0;
	text-wrap: balance;
}

.tcp-h2,
.tcp-h3,
.tcp-band__title,
.tcp-page__h1 {
	text-wrap: balance;
}

/* The ring follows the shape it is wrapping, so it never squares off a pill. */
:focus-visible {
	outline: 2px solid var(--tcp-cyan);
	outline-offset: 3px;
	border-radius: var(--r-control);
}

.tcp-hero :focus-visible,
.tcp-band :focus-visible {
	outline-color: var(--tcp-white);
}

.tcp-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tcp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-skip);
	background: var(--tcp-blue);
	color: var(--tcp-white);
	padding: 11px 16px;
	border-radius: 0 0 8px 0;
}

.tcp-skip:focus {
	left: 0;
	color: var(--tcp-white);
}

/* Cards lit from wherever the pointer is. theme.js writes --mx/--my as
   percentages on the card it is over and drops them again on leave, so a card
   that never gets hovered — and every card on touch — costs nothing.
   Deliberately weak: it should register as the card noticing you, not as a
   light show. */
[data-spotlight] {
	position: relative;
}

[data-spotlight]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
	background: radial-gradient(
		280px circle at var(--mx, 50%) var(--my, 50%),
		rgba(41, 169, 225, 0.13),
		transparent 70%
	);
}

[data-spotlight]:hover::before {
	opacity: 1;
}

/* Keep the card's own content above the wash. The ring decorations are
   absolutely positioned and must keep their own containing block, so they are
   left alone — .tcp-layer already positions its content for the same reason. */
[data-spotlight] > *:not([class*="__ring"]) {
	position: relative;
	z-index: 1;
}

/* A fixed film of grain over the whole page. The blue fields are large and
   perfectly smooth, which is where banding shows; the noise breaks it up and
   stops the flat areas reading as unrendered. Kept under the nav so the pill
   stays crisp, and low enough that it is felt rather than seen. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tcp-wrap {
	max-width: var(--tcp-max);
	margin: 0 auto;
	padding-left: var(--tcp-px);
	padding-right: var(--tcp-px);
}

.tcp-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.tcp-main {
	flex: 1;
}

.tcp-eyebrow {
	display: inline-block;
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tcp-blue);
	margin-bottom: 14px;
}

.tcp-label {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
}

.tcp-h2 {
	font-size: 34px;
	line-height: 1.14;
	letter-spacing: -0.035em;
	margin: 0 0 11px;
	max-width: 680px;
}

.tcp-h3 {
	font-size: 29px;
	letter-spacing: -0.03em;
	margin: 0 0 11px;
}

.tcp-sub {
	margin: 0 0 40px;
	font-size: 16.5px;
	color: var(--tcp-muted);
	max-width: 600px;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.tcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--r-control);
	padding: 15px 26px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all .18s ease;
	background: none;
}

.tcp-btn--primary {
	background: var(--tcp-blue);
	color: var(--tcp-white);
}

.tcp-btn--primary:hover,
.tcp-btn--primary:focus {
	background: var(--tcp-cyan);
	color: var(--tcp-white);
}

/* A light sweep across the filled buttons on hover. The button is already
   position:relative + overflow:hidden, so the sheen is clipped to its shape.
   Transform only — nothing here triggers layout. */
.tcp-btn--primary::after,
.tcp-nav__cta::after,
.tcp-submit::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	pointer-events: none;
	transform: skewX(-18deg) translate3d(0, 0, 0);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.tcp-btn--primary:hover::after,
.tcp-nav__cta:hover::after,
.tcp-submit:hover:not(:disabled)::after {
	transform: skewX(-18deg) translate3d(360%, 0, 0);
}

.tcp-btn:active,
.tcp-submit:active:not(:disabled),
.tcp-nav__cta:active,
.tcp-tab:active,
.tcp-chipbtn:active {
	transform: translateY(1px) scale(0.99);
}

.tcp-btn--white {
	background: var(--tcp-white);
	color: var(--tcp-blue);
}

.tcp-btn--white:hover,
.tcp-btn--white:focus {
	background: var(--tcp-cyan);
	color: var(--tcp-white);
	transform: translateY(-2px);
}

.tcp-btn--ghost {
	border-color: rgba(255, 255, 255, 0.42);
	color: var(--tcp-white);
	font-weight: 400;
}

.tcp-btn--ghost:hover,
.tcp-btn--ghost:focus {
	border-color: var(--tcp-white);
	background: rgba(255, 255, 255, 0.12);
	color: var(--tcp-white);
}

.tcp-btn--outline {
	border-color: var(--tcp-line-4);
	color: var(--tcp-ink);
	font-weight: 400;
	font-size: 14px;
	padding: 12px 21px;
	border-radius: var(--r-control);
}

.tcp-btn--outline:hover,
.tcp-btn--outline:focus {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint);
	color: var(--tcp-blue);
}

.tcp-btn--small {
	font-size: 14px;
	font-weight: 600;
	padding: 12px 21px;
	border-radius: var(--r-control);
}

.tcp-btn--quiet {
	border-color: var(--tcp-line-3);
	color: var(--tcp-muted);
	font-size: 13.5px;
	font-weight: 400;
	padding: 11px 16px;
	border-radius: var(--r-control);
}

.tcp-btn--quiet:hover,
.tcp-btn--quiet:focus {
	border-color: var(--tcp-blue);
	color: var(--tcp-blue);
}

.tcp-btn__sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	background: linear-gradient(90deg, transparent, rgba(11, 46, 158, 0.16), transparent);
	animation: tcpSheen 4.2s ease-in-out infinite;
	pointer-events: none;
}

.tcp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

/* ==========================================================================
   4. Header / navigation
   ========================================================================== */

.tcp-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--tcp-blue), var(--tcp-cyan));
	z-index: var(--z-progress);
	will-change: transform;
}

@supports (animation-timeline: scroll()) {
	.tcp-progress {
		animation: tcpProgress linear both;
		animation-timeline: scroll(root block);
	}
}

/* Browsers without scroll timelines get the same effect from theme.js. */
@supports not (animation-timeline: scroll()) {
	.tcp-progress {
		transition: transform .12s linear;
	}
}

/* A zero-height sticky rail so the pill floats over the page instead of
   reserving a band at the top of it. */
.tcp-navbar {
	position: sticky;
	top: var(--tcp-nav-top);
	z-index: var(--z-nav);
	height: 0;
}

.tcp-navbar:has(.tcp-menu[open]) {
	z-index: var(--z-menu);
}

.tcp-navbar__center {
	display: flex;
	justify-content: center;
}

.tcp-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 7px 7px 7px 16px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(18px);
	box-shadow: 0 12px 34px rgba(6, 27, 92, 0.18), inset 0 0 0 1px rgba(227, 234, 244, 0.9);
	transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
	animation: tcpNavIn .8s cubic-bezier(.2, .7, .2, 1) both;
}

.tcp-nav.is-scrolled {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 16px 42px rgba(6, 27, 92, 0.28), inset 0 0 0 1px rgba(203, 216, 238, 0.95);
	transform: scale(0.97);
}

.tcp-brand {
	display: flex;
	align-items: center;
	margin-right: 8px;
}

.tcp-brand img {
	height: 20px;
	width: auto;
	display: block;
}

.tcp-nav__link {
	display: block;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	white-space: nowrap;
	font-size: 14px;
	color: var(--tcp-slate);
	transition: color .2s ease, background .2s ease, transform .2s ease;
}

.tcp-nav__link:hover,
.tcp-nav__link:focus {
	color: var(--tcp-blue);
	background: var(--tcp-tint);
	transform: translateY(-1px);
}

.tcp-nav__link.is-active {
	color: var(--tcp-blue);
	background: var(--tcp-tint);
}

.tcp-lang {
	margin-left: 6px;
	font-family: var(--tcp-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	border: 1px solid var(--tcp-line-3);
	border-radius: var(--r-pill);
	padding: 7px 11px;
	white-space: nowrap;
	color: var(--tcp-slate);
	transition: all .2s ease;
}

.tcp-lang:hover,
.tcp-lang:focus {
	border-color: var(--tcp-blue);
	color: var(--tcp-blue);
	background: var(--tcp-tint);
}

.tcp-nav__cta {
	position: relative;
	overflow: hidden;
	margin-left: 6px;
	background: var(--tcp-blue);
	color: var(--tcp-white);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	padding: 10px 20px;
	border-radius: var(--r-pill);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tcp-nav__cta:hover,
.tcp-nav__cta:focus {
	background: var(--tcp-cyan);
	color: var(--tcp-white);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(41, 169, 225, 0.42);
}

.tcp-nav__sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 44px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	animation: tcpSheen 4.6s ease-in-out infinite;
	pointer-events: none;
}

/* --- Mobile menu ---------------------------------------------------------
   A <details> disclosure so it works without JavaScript. The summary is the
   burger inside the pill; the panel covers the screen.
   ------------------------------------------------------------------------ */

.tcp-menu {
	display: none;
}

.tcp-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-left: 6px;
	border-radius: var(--r-pill);
	background: var(--tcp-tint);
	cursor: pointer;
	list-style: none;
	transition: background .2s ease;
}

/* Safari still paints a disclosure triangle without this. */
.tcp-burger::-webkit-details-marker {
	display: none;
}

.tcp-burger:hover {
	background: var(--tcp-line);
}

.tcp-burger__bars,
.tcp-burger__bars::before,
.tcp-burger__bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--tcp-blue);
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .18s ease;
}

.tcp-burger__bars {
	position: relative;
}

.tcp-burger__bars::before,
.tcp-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.tcp-burger__bars::before { top: -5px; }
.tcp-burger__bars::after  { top: 5px; }

/* Burger folds into a cross while the panel is open. */
.tcp-menu[open] .tcp-burger__bars {
	background: transparent;
}

.tcp-menu[open] .tcp-burger__bars::before {
	transform: translateY(5px) rotate(45deg);
}

.tcp-menu[open] .tcp-burger__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

.tcp-menu[open] .tcp-burger {
	background: var(--tcp-line);
}

.tcp-menu__panel:focus {
	outline: none;
}

.tcp-menu__panel {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 40px;
	padding: 96px var(--tcp-px) 48px;
	background: linear-gradient(150deg, var(--tcp-blue-deep) 0%, var(--tcp-blue) 62%, var(--tcp-blue-mid) 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: tcpMenuIn .28s ease both;
}

.tcp-menu__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: auto 0;
	padding: 0;
	list-style: none;
}

.tcp-menu__list li {
	animation: tcpMenuItem .4s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--i) * 50ms + 60ms);
}

.tcp-menu__link {
	display: block;
	padding: 12px 0;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--tcp-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tcp-menu__link:hover,
.tcp-menu__link:focus {
	color: #C6E7FA;
}

.tcp-menu__link.is-active {
	color: #8FC9F0;
}

/* Sections sit in the middle of the panel, contact details on the floor. */
.tcp-menu__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	font-size: 14.5px;
	color: #C6D8F5;
	animation: tcpMenuItem .4s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--i) * 50ms + 60ms);
}

.tcp-menu__foot a {
	color: #C6D8F5;
}

.tcp-menu__foot a:hover,
.tcp-menu__foot a:focus {
	color: var(--tcp-white);
}

.tcp-menu__lang {
	font-family: var(--tcp-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--r-pill);
	padding: 8px 14px;
	color: var(--tcp-white);
}

.tcp-menu__lang:hover,
.tcp-menu__lang:focus {
	background: rgba(255, 255, 255, 0.12);
	color: var(--tcp-white);
}

/* Keeps the pill and its burger above the panel so the cross stays tappable. */
.tcp-menu[open] {
	position: static;
}

.tcp-menu[open] .tcp-burger {
	position: relative;
	z-index: calc(var(--z-menu) + 1);
}

/* ==========================================================================
   5. Decorative backgrounds
   ========================================================================== */

.tcp-rings {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.tcp-rings--light {
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 22px);
}

.tcp-rings--cyan {
	background: repeating-radial-gradient(circle, rgba(41, 169, 225, 0.34) 0 1px, transparent 1px 16px);
}

.tcp-rings--blue {
	background: repeating-radial-gradient(circle, rgba(11, 46, 158, 0.07) 0 1px, transparent 1px 18px);
}

.tcp-rings--blue-faint {
	background: repeating-radial-gradient(circle, rgba(11, 46, 158, 0.06) 0 1px, transparent 1px 18px);
}

.tcp-rings--cyan-soft {
	background: repeating-radial-gradient(circle, rgba(41, 169, 225, 0.16) 0 1px, transparent 1px 14px);
}

.tcp-rings--spin {
	animation: tcpDriftRing 120s linear infinite;
}

.tcp-rings--spin-slow {
	animation: tcpDriftRing 150s linear infinite;
}

.tcp-rings--spin-rev {
	animation: tcpDriftRing 90s linear infinite reverse;
}

.tcp-rings--float {
	animation: tcpFloat 9s ease-in-out infinite;
}

.tcp-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .5;
	pointer-events: none;
}

.tcp-dots--blue {
	background-image: radial-gradient(rgba(11, 46, 158, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 1;
}

/* ==========================================================================
   6. Hero — fills exactly one device screen
   ========================================================================== */

.tcp-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--tcp-chrome-h));
	min-height: calc(100svh - var(--tcp-chrome-h));
	background: linear-gradient(118deg, var(--tcp-blue-deep) 0%, var(--tcp-blue) 56%, var(--tcp-blue-mid) 100%);
	color: var(--tcp-white);
	animation: tcpUp .5s ease both;
}

.tcp-hero__ring-a {
	top: -340px;
	left: -240px;
	width: 1020px;
	height: 1020px;
}

.tcp-hero__ring-b {
	right: -180px;
	bottom: -440px;
	width: 780px;
	height: 780px;
}

.tcp-hero__edge {
	position: absolute;
	right: 40px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	pointer-events: none;
}

/* Soft light blooms that drift on their own and shift on scroll. */
.tcp-aurora {
	position: absolute;
	pointer-events: none;
	will-change: transform;
}

@supports (animation-timeline: scroll()) {
	.tcp-aurora {
		animation: tcpAuroraDrift linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100vh;
	}

	.tcp-aurora--b {
		--tcp-drift: 60px;
	}
}

.tcp-aurora span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	filter: blur(30px);
}

.tcp-aurora--a {
	right: -140px;
	top: -120px;
	width: 720px;
	height: 560px;
}

.tcp-aurora--a span {
	background: radial-gradient(closest-side, rgba(41, 169, 225, 0.55), rgba(41, 169, 225, 0) 70%);
	animation: tcpAurora 16s ease-in-out infinite;
}

.tcp-aurora--b {
	left: -180px;
	bottom: -220px;
	width: 620px;
	height: 520px;
}

.tcp-aurora--b span {
	background: radial-gradient(closest-side, rgba(91, 123, 232, 0.45), rgba(91, 123, 232, 0) 70%);
	filter: blur(34px);
	animation: tcpAurora 21s ease-in-out infinite reverse;
}

.tcp-hero__glow {
	position: absolute;
	left: 0;
	top: 0;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.tcp-hero__inner {
	position: relative;
	width: 100%;
	/* Clears the floating pill even when the banner is short. */
	padding-top: 92px;
	padding-bottom: 56px;
}

.tcp-hero__logo {
	height: 46px;
	display: block;
	margin-bottom: 28px;
	animation: tcpUp .7s ease both;
}

.tcp-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
	animation: tcpUp .6s ease .12s both;
}

.tcp-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(41, 169, 225, 0.55);
	background: rgba(41, 169, 225, 0.14);
	border-radius: var(--r-pill);
	padding: 6px 14px;
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #C6E7FA;
}

.tcp-hero h1 {
	font-size: 72px;
	line-height: 1.04;
	letter-spacing: -0.05em;
	max-width: 860px;
	animation: tcpUp .7s ease .2s both;
}

.tcp-hero__lead {
	margin: 26px 0 0;
	font-size: 19px;
	line-height: 1.5;
	color: #C6D8F5;
	max-width: 540px;
	animation: tcpUp .7s ease .32s both;
}

.tcp-hero .tcp-actions {
	animation: tcpUp .7s ease .44s both;
}

/* Landscape phones and short laptops: let the banner shrink to its content
   rather than pushing everything off the screen. */
@media (max-height: 620px) {
	.tcp-hero {
		min-height: 0;
	}

	.tcp-hero__inner {
		padding-top: 88px;
		padding-bottom: 48px;
	}
}

/* ==========================================================================
   7. Pillars
   ========================================================================== */

.tcp-pillars {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--tcp-line);
	background: var(--tcp-soft);
}

.tcp-pillars__ring {
	left: -260px;
	top: -220px;
	width: 620px;
	height: 620px;
}

.tcp-pillars__grid {
	position: relative;
	padding-top: 64px;
	padding-bottom: 64px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.tcp-pillar {
	border: 1px solid var(--tcp-line);
	border-radius: var(--r-card);
	padding: 22px 20px;
	background: var(--tcp-white);
	transition: all .22s ease;
}

.tcp-pillar:hover {
	border-color: var(--tcp-blue);
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(11, 46, 158, 0.13);
}

.tcp-pillar__num {
	font-family: var(--tcp-mono);
	font-size: 10px;
	color: var(--tcp-blue);
	letter-spacing: 0.12em;
	margin-bottom: 12px;
}

.tcp-pillar__title {
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-bottom: 7px;
}

.tcp-pillar__body {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcp-muted-2);
}

/* ==========================================================================
   8. Message types
   ========================================================================== */

.tcp-msgs {
	position: relative;
	padding-top: 88px;
	padding-bottom: 20px;
}

.tcp-msgs__ring {
	right: 40px;
	top: 80px;
	width: 240px;
	height: 240px;
	animation: tcpDriftRing 110s linear infinite reverse;
}

.tcp-msgs .tcp-sub {
	margin-bottom: 42px;
}

.tcp-tabs {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding: 0;
	list-style: none;
}

.tcp-tab {
	border: 1px solid var(--tcp-line-3);
	background: var(--tcp-white);
	color: var(--tcp-slate);
	border-radius: var(--r-control);
	padding: 10px 15px;
	font-size: 13.5px;
	cursor: pointer;
	transition: all .18s ease;
}

.tcp-tab:hover {
	border-color: var(--tcp-blue);
}

.tcp-tab.is-active {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint);
	color: var(--tcp-blue);
}

.tcp-msg-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.tcp-msg {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 22px;
	box-shadow: var(--tcp-shadow-card);
	transition: all .25s ease;
}

.tcp-msg:hover {
	transform: translateY(-4px);
	box-shadow: var(--tcp-shadow-hover);
}

.tcp-msg__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.tcp-msg__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.tcp-msg__label {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tcp-msg__channel {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	color: var(--tcp-muted-3);
	margin-left: auto;
}

.tcp-msg--tx .tcp-msg__dot { background: var(--tcp-blue); }
.tcp-msg--tx .tcp-msg__label { color: var(--tcp-blue); }
.tcp-msg--tx .tcp-avatar { background: var(--tcp-blue); }

.tcp-msg--otp .tcp-msg__dot { background: var(--tcp-cyan); }
.tcp-msg--otp .tcp-msg__label { color: var(--tcp-cyan-deep); }
.tcp-msg--otp .tcp-avatar { background: var(--tcp-cyan); }

.tcp-msg--promo .tcp-msg__dot { background: #5B7BE8; }
.tcp-msg--promo .tcp-msg__label { color: #4A63C8; }
.tcp-msg--promo .tcp-avatar { background: #5B7BE8; }

.tcp-phone {
	background: var(--tcp-soft);
	border: 1px solid var(--tcp-line);
	border-radius: var(--r-card);
	padding: 16px 14px 12px;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tcp-phone__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tcp-avatar {
	width: 24px;
	height: 24px;
	border-radius: var(--r-control);
	color: var(--tcp-white);
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.tcp-phone__sender {
	font-size: 12.5px;
	font-weight: 600;
}

.tcp-phone__time {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	color: var(--tcp-muted-3);
	margin-left: auto;
}

.tcp-bubble {
	background: var(--tcp-white);
	border: 1px solid var(--tcp-line);
	border-radius: var(--r-card) var(--r-card) var(--r-card) 4px;
	padding: 12px 13px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	animation: tcpBubble .5s ease both;
}

.tcp-bubble__subject {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--tcp-tint);
	padding-bottom: 7px;
}

.tcp-bubble__text {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tcp-ink);
}

.tcp-quick {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tcp-quick span {
	border: 1px solid var(--tcp-line-4);
	border-radius: var(--r-tag);
	padding: 5px 9px;
	font-size: 11px;
	color: var(--tcp-ink-soft);
	background: var(--tcp-white);
}

.tcp-phone__status {
	font-family: var(--tcp-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tcp-cyan-deep);
	margin-top: auto;
}

.tcp-msg__note {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcp-muted-2);
	margin-top: 16px;
}

/* ==========================================================================
   9. Marquee
   ========================================================================== */

.tcp-marquee {
	overflow: hidden;
	padding: 48px 0 12px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tcp-marquee__row {
	display: flex;
	gap: 11px;
	width: max-content;
	animation: tcpMarquee 34s linear infinite;
}

.tcp-marquee__row--rev {
	animation: tcpMarquee 46s linear infinite reverse;
}

.tcp-chip {
	font-family: var(--tcp-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	border: 1px solid var(--tcp-line);
	background: var(--tcp-soft);
	border-radius: var(--r-pill);
	padding: 9px 16px;
	color: var(--tcp-slate);
	white-space: nowrap;
}

.tcp-chip--dashed {
	border: 1px dashed var(--tcp-line-2);
	background: none;
	color: var(--tcp-muted-3);
}

/* ==========================================================================
   10. Layers
   ========================================================================== */

.tcp-layers {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--tcp-line);
	background: var(--tcp-soft);
}

.tcp-layers__ring {
	left: -200px;
	bottom: -300px;
	width: 700px;
	height: 700px;
}

.tcp-layers__inner {
	position: relative;
	padding-top: 88px;
	padding-bottom: 76px;
}

.tcp-layers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* Column, so the tag rows sit on one line across all four cards however long
   the body copy runs. Without this they start wherever the text happens to
   end and the row reads as broken. */
.tcp-layer {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 24px 22px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tcp-layer:hover {
	transform: translateY(-4px);
	box-shadow: var(--tcp-shadow-hover);
	border-color: var(--tcp-cyan);
}

.tcp-layer__ring {
	position: absolute;
	right: -40px;
	top: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(41, 169, 225, 0.16) 0 1px, transparent 1px 12px);
	pointer-events: none;
}

.tcp-layer > *:not(.tcp-layer__ring) {
	position: relative;
}

.tcp-layer__n {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--tcp-blue);
	margin-bottom: 12px;
}

.tcp-layer__t {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 9px;
}

.tcp-layer__b {
	flex: 1; /* Pushes .tcp-tags to the bottom so the tag rows align. */
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tcp-muted-2);
}

.tcp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 16px;
}

.tcp-tag {
	font-family: var(--tcp-mono);
	font-size: 10px;
	border: 1px solid var(--tcp-line);
	border-radius: var(--r-tag);
	padding: 5px 8px;
	color: var(--tcp-muted-3);
	background: var(--tcp-soft);
}

/* ==========================================================================
   11. Channel grid
   ========================================================================== */

.tcp-chgrid {
	padding-top: 88px;
}

.tcp-chgrid .tcp-sub {
	margin-bottom: 28px;
}

.tcp-chgrid__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcp-pill {
	border: 1px solid var(--tcp-line-2);
	background: var(--tcp-white);
	border-radius: var(--r-pill);
	padding: 10px 17px;
	font-size: 13.5px;
	color: var(--tcp-ink-soft);
	transition: all .18s ease;
}

.tcp-pill:hover {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint);
	transform: translateY(-2px);
}

/* ==========================================================================
   12. Code section
   ========================================================================== */

.tcp-codesec {
	padding-top: 88px;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 36px;
	align-items: center;
}

.tcp-codesec__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tcp-muted);
	max-width: 440px;
}

.tcp-codesec .tcp-btn {
	margin-top: 22px;
}

.tcp-code {
	border: 1px solid var(--tcp-dark-line);
	border-radius: var(--r-panel);
	background: var(--tcp-dark);
	padding: 20px 22px;
	overflow: hidden;
	box-shadow: 0 22px 54px rgba(11, 46, 158, 0.18);
}

.tcp-code__head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
}

.tcp-code__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.tcp-code__dot--1 { background: #F0813C; }
.tcp-code__dot--2 { background: var(--tcp-cyan); }
.tcp-code__dot--3 { background: #2B3B58; }

.tcp-code__path {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--tcp-muted-3);
	margin-left: 8px;
}

.tcp-code__body {
	font-family: var(--tcp-mono);
	font-size: 12px;
	line-height: 1.75;
	color: #C6D8F5;
	white-space: pre;
	overflow-x: auto;
	margin: 0;
}

.tcp-code__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	border-top: 1px solid var(--tcp-dark-line);
	padding-top: 13px;
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	color: #8FC9F0;
}

.tcp-code__foot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tcp-cyan);
	animation: tcpPulse 1.6s ease-in-out infinite;
}

/* ==========================================================================
   13. Flow
   ========================================================================== */

.tcp-flow {
	padding-top: 66px;
	padding-bottom: 76px;
}

.tcp-flow__head {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}

.tcp-flow__replay {
	font-family: var(--tcp-mono);
	font-size: 11.5px;
	border: 1px solid var(--tcp-line-4);
	border-radius: var(--r-control);
	padding: 9px 14px;
	cursor: pointer;
	color: var(--tcp-ink-soft);
	background: none;
	transition: all .18s ease;
}

.tcp-flow__replay:hover {
	border-color: var(--tcp-blue);
	color: var(--tcp-blue);
}

.tcp-flow__row {
	display: flex;
	align-items: stretch;
}

.tcp-flow__item {
	flex: 1;
	display: flex;
	align-items: stretch;
}

.tcp-node {
	flex: 1;
	border: 1px solid var(--tcp-line);
	background: var(--tcp-white);
	border-radius: var(--r-card);
	padding: 17px 15px;
	transition: all .35s ease;
}

.tcp-node__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9px;
}

.tcp-node__step {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	color: var(--tcp-muted-3);
}

.tcp-node__dot {
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tcp-line);
}

.tcp-node__title {
	font-size: 15px;
	font-weight: 600;
}

.tcp-node.is-on {
	border-color: #9CC3EA;
}

.tcp-node.is-on .tcp-node__step {
	color: var(--tcp-blue);
}

.tcp-node.is-on .tcp-node__dot {
	background: #9CC3EA;
}

.tcp-node.is-current {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint-2);
}

.tcp-node.is-current .tcp-node__step {
	color: var(--tcp-blue);
}

.tcp-node.is-current .tcp-node__dot {
	background: var(--tcp-blue);
}

.tcp-node.is-current .tcp-node__dot::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: var(--tcp-blue);
	animation: tcpRipple 1.7s ease-out infinite;
}

.tcp-arrow {
	width: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tcp-line-4);
	font-size: 15px;
	transition: color .35s ease;
}

.tcp-arrow.is-on {
	color: var(--tcp-blue);
}

.tcp-flow__note {
	margin-top: 14px;
	font-family: var(--tcp-mono);
	font-size: 11.5px;
	color: var(--tcp-muted-3);
}

/* ==========================================================================
   14. Partners
   ========================================================================== */

.tcp-partners {
	border-top: 1px solid var(--tcp-line);
	background: var(--tcp-soft);
}

.tcp-partners__inner {
	padding-top: 56px;
	padding-bottom: 56px;
}

.tcp-partners__label {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	margin-bottom: 20px;
}

.tcp-partners__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 18px;
	align-items: start;
}

.tcp-card {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 26px;
}

.tcp-card--shadow {
	box-shadow: var(--tcp-shadow-card);
}

.tcp-partner__head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.tcp-partner__logo {
	height: 40px;
	min-width: 120px;
	border: 1px dashed var(--tcp-line-3);
	border-radius: var(--r-control);
	background: var(--tcp-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	color: var(--tcp-muted-3);
}

.tcp-partner__logo img {
	max-height: 40px;
	width: auto;
}

.tcp-partner__logo--set {
	border: 0;
	background: none;
	min-width: 0;
}

.tcp-partner__badge {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcp-blue);
}

.tcp-partner__body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tcp-ink-soft);
	max-width: 620px;
}

.tcp-partner__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 20px;
}

.tcp-partner__tags span {
	font-family: var(--tcp-mono);
	font-size: 11px;
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-tag);
	padding: 6px 11px;
	color: var(--tcp-slate);
	background: var(--tcp-soft);
}

.tcp-partner__points {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 13px 0 0;
	padding: 0;
	list-style: none;
}

.tcp-partner__points li {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcp-slate);
}

.tcp-partner__points li::before {
	content: "—";
	color: var(--tcp-cyan);
}

.tcp-partners__note {
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	color: var(--tcp-muted-3);
	margin-top: 13px;
}

/* ==========================================================================
   15. CTA band
   ========================================================================== */

.tcp-band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(118deg, var(--tcp-blue-deep) 0%, var(--tcp-blue) 60%, var(--tcp-blue-mid) 100%);
	color: var(--tcp-white);
}

.tcp-band__ring {
	right: -220px;
	top: -300px;
	width: 760px;
	height: 760px;
}

.tcp-band__inner {
	position: relative;
	padding-top: 72px;
	padding-bottom: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.tcp-band--tight .tcp-band__inner {
	padding-top: 62px;
	padding-bottom: 62px;
}

.tcp-band__title {
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.035em;
	max-width: 600px;
	line-height: 1.14;
}

.tcp-band__sub {
	font-size: 16px;
	color: #C6D8F5;
	margin-top: 12px;
	max-width: 540px;
}

.tcp-band .tcp-btn {
	flex: none;
}

/* ==========================================================================
   16. Inner pages
   ========================================================================== */

.tcp-page {
	/* Clears the floating pill, which no longer reserves a band at the top. */
	padding-top: 100px;
	padding-bottom: 88px;
	animation: tcpUp .45s ease both;
}

.tcp-page__eyebrow {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tcp-blue);
	margin-bottom: 14px;
}

.tcp-page__h1 {
	margin: 0 0 14px;
	font-size: 46px;
	font-weight: 600;
	letter-spacing: -0.04em;
	max-width: 820px;
	line-height: 1.08;
}

.tcp-page__lead {
	margin: 0 0 42px;
	font-size: 17.5px;
	line-height: 1.55;
	color: var(--tcp-muted);
	max-width: 560px;
}

/* --- Solutions ----------------------------------------------------------- */

.tcp-sol {
	display: grid;
	grid-template-columns: 330px 1fr;
	gap: 26px;
	align-items: start;
}

.tcp-sol__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tcp-sol__group {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 16px;
}

.tcp-sol__grouplabel {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	padding: 0 14px 7px;
}

.tcp-sol__item {
	display: flex;
	gap: 11px;
	padding: 13px 14px;
	border-radius: var(--r-control);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-left: 2px solid var(--tcp-line);
	text-align: left;
	width: 100%;
	transition: all .2s ease;
}

.tcp-sol__item:hover {
	background: var(--tcp-tint);
	transform: translateX(3px);
}

.tcp-sol__item.is-active {
	background: var(--tcp-tint);
	border-left-color: var(--tcp-blue);
}

.tcp-sol__num {
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	color: var(--tcp-dim);
	padding-top: 3px;
	flex: none;
}

.tcp-sol__item.is-active .tcp-sol__num {
	color: var(--tcp-blue);
}

.tcp-sol__title {
	font-size: 15px;
	font-weight: 500;
	color: var(--tcp-slate-2);
}

.tcp-sol__item.is-active .tcp-sol__title {
	color: var(--tcp-ink);
}

.tcp-sol__panels {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 34px;
	min-height: 380px;
	box-shadow: var(--tcp-shadow-card);
}

.tcp-panel__num {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-blue);
	margin-bottom: 14px;
}

.tcp-panel__title {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.tcp-panel__body {
	margin: 0 0 28px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--tcp-slate-2);
	max-width: 540px;
}

.tcp-panel__get {
	border-top: 1px solid var(--tcp-line-2);
	padding-top: 20px;
}

.tcp-panel__get p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--tcp-ink-soft);
	max-width: 500px;
	margin: 9px 0 0;
}

.tcp-panel__tags {
	margin-top: 24px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.tcp-panel__tags span {
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	border: 1px solid var(--tcp-line-3);
	border-radius: var(--r-tag);
	padding: 6px 10px;
	color: var(--tcp-muted);
}

.tcp-panel__actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
}

/* --- Industries ---------------------------------------------------------- */

.tcp-ind__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 34px;
	padding: 0;
	list-style: none;
}

.tcp-chipbtn {
	border: 1px solid var(--tcp-line-3);
	background: transparent;
	color: var(--tcp-slate-2);
	border-radius: var(--r-pill);
	padding: 9px 17px;
	font-size: 13.5px;
	cursor: pointer;
	transition: all .18s ease;
}

.tcp-chipbtn:hover {
	border-color: var(--tcp-blue);
}

.tcp-chipbtn.is-active {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint-2);
	color: var(--tcp-blue);
}

.tcp-ind__panels {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 30px;
	box-shadow: var(--tcp-shadow-card);
}

.tcp-ind__name {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.tcp-ind__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.tcp-ind__card {
	border: 1px solid var(--tcp-line);
	border-radius: var(--r-card);
	padding: 20px;
	background: var(--tcp-soft);
}

.tcp-ind__channel {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	color: var(--tcp-blue);
	margin-bottom: 9px;
}

.tcp-ind__cardtitle {
	font-size: 15.5px;
	font-weight: 600;
}

.tcp-ind__cardbody {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcp-muted-2);
	margin-top: 7px;
}

.tcp-ind__mix {
	margin-top: 24px;
	border-top: 1px solid var(--tcp-line);
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.tcp-ind__mix .tcp-label {
	margin-right: 6px;
}

.tcp-ind__mix span.tcp-mixtag {
	font-family: var(--tcp-mono);
	font-size: 11px;
	border: 1px solid var(--tcp-line-3);
	border-radius: var(--r-tag);
	padding: 6px 10px;
	color: var(--tcp-ink-soft);
	background: var(--tcp-white);
}

.tcp-ind__cta {
	margin-top: 24px;
}

/* --- How we work --------------------------------------------------------- */

.tcp-steps {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 32px;
	padding: 0;
	list-style: none;
}

.tcp-steps__item {
	flex: 1;
	display: flex;
	align-items: center;
}

.tcp-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	flex: none;
	background: none;
	border: 0;
	padding: 0;
}

.tcp-step__badge {
	width: 44px;
	height: 44px;
	border-radius: var(--r-control);
	background: var(--tcp-white);
	border: 1px solid var(--tcp-line-3);
	color: var(--tcp-muted-3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tcp-mono);
	font-size: 15px;
	transition: all .25s ease;
}

.tcp-step__label {
	font-size: 12px;
	color: var(--tcp-muted-3);
	white-space: nowrap;
	transition: color .25s ease;
}

.tcp-step.is-done .tcp-step__badge {
	background: #DDE9F9;
	color: var(--tcp-slate-2);
}

.tcp-step.is-active .tcp-step__badge {
	background: var(--tcp-blue);
	border-color: var(--tcp-blue);
	color: var(--tcp-white);
}

.tcp-step.is-active .tcp-step__label {
	color: var(--tcp-blue);
}

.tcp-steps__line {
	flex: 1;
	height: 1px;
	background: var(--tcp-line);
	margin: 0 8px 23px;
	transition: background .25s ease;
}

.tcp-steps__line.is-done {
	background: var(--tcp-blue);
}

.tcp-how__card {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: var(--tcp-white);
	padding: 34px;
	box-shadow: var(--tcp-shadow-card);
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
}

.tcp-how__title {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.tcp-how__body {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--tcp-slate-2);
	max-width: 500px;
}

.tcp-how__deliverable {
	margin-top: 22px;
	border-top: 1px solid var(--tcp-line);
	padding-top: 18px;
}

.tcp-how__deliverable p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--tcp-ink-soft);
	max-width: 500px;
	margin: 9px 0 0;
}

.tcp-how__side {
	border-left: 1px solid var(--tcp-line-2);
	padding-left: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tcp-how__side p {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--tcp-ink-soft);
	margin: 6px 0 0;
}

/* --- Contact ------------------------------------------------------------- */

.tcp-contact {
	display: grid;
	grid-template-columns: 1fr 390px;
	gap: 44px;
	align-items: start;
}

.tcp-contact .tcp-page__lead {
	margin-bottom: 40px;
}

.tcp-qs {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.tcp-q__legend {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	margin-bottom: 11px;
	padding: 0;
}

.tcp-q fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.tcp-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.tcp-opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tcp-opt span {
	display: inline-block;
	border: 1px solid var(--tcp-line-3);
	background: transparent;
	color: var(--tcp-slate-2);
	border-radius: var(--r-control);
	padding: 10px 14px;
	font-size: 13.5px;
	cursor: pointer;
	transition: all .18s ease;
}

.tcp-opt:hover span {
	border-color: var(--tcp-blue);
}

.tcp-opt input:checked + span {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint-2);
	color: var(--tcp-blue);
}

.tcp-opt input:focus-visible + span {
	outline: 2px solid var(--tcp-cyan);
	outline-offset: 2px;
}

.tcp-nextsteps {
	margin-top: 40px;
	border-top: 1px solid var(--tcp-line);
	padding-top: 24px;
}

.tcp-nextsteps ol {
	display: flex;
	flex-direction: column;
	gap: 11px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	counter-reset: tcpns;
}

.tcp-nextsteps li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--tcp-ink-soft);
	counter-increment: tcpns;
}

.tcp-nextsteps li::before {
	content: counter(tcpns);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--tcp-cyan);
	color: var(--tcp-blue);
	font-family: var(--tcp-mono);
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-top: 2px;
}

.tcp-contact__meta {
	margin-top: 36px;
	border-top: 1px solid var(--tcp-line);
	padding-top: 24px;
	display: flex;
	gap: 44px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--tcp-muted);
}

.tcp-contact__meta .tcp-label {
	margin-bottom: 6px;
}

.tcp-aside {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: linear-gradient(180deg, var(--tcp-tint), var(--tcp-soft));
	padding: 30px;
	position: sticky;
	top: calc(var(--tcp-nav-top) + 84px);
}

.tcp-aside__title {
	font-family: var(--tcp-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-blue);
	margin-bottom: 18px;
}

.tcp-path {
	display: flex;
	flex-direction: column;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: tcppath;
}

.tcp-path li {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--tcp-line);
	font-size: 14.5px;
	font-weight: 500;
	counter-increment: tcppath;
}

.tcp-path li::before {
	content: counter(tcppath);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--tcp-blue);
	color: var(--tcp-blue);
	font-family: var(--tcp-mono);
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.tcp-field__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
}

.tcp-input {
	width: 100%;
	background: var(--tcp-soft);
	border: 1px solid var(--tcp-line-3);
	border-radius: var(--r-control);
	padding: 13px 14px;
	font-size: 14.5px;
	font-family: var(--tcp-sans);
	color: var(--tcp-ink);
	outline: none;
}

.tcp-input:focus {
	border-color: var(--tcp-blue);
}

.tcp-submit {
	position: relative;
	overflow: hidden;
	margin-top: 9px;
	width: 100%;
	background: var(--tcp-blue);
	color: var(--tcp-white);
	border: 0;
	font-size: 15px;
	font-weight: 600;
	padding: 14px;
	border-radius: var(--r-control);
	text-align: center;
	cursor: pointer;
	transition: all .18s ease;
}

.tcp-submit:hover:not(:disabled) {
	background: var(--tcp-cyan);
}

.tcp-submit:disabled {
	opacity: .7;
	cursor: default;
}

.tcp-formnote {
	font-size: 12.5px;
	color: var(--tcp-muted-3);
	margin-top: 12px;
	line-height: 1.5;
}

.tcp-formnote.is-error {
	color: var(--tcp-error);
}

.tcp-hp {
	position: absolute !important;
	left: -9999px;
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.tcp-footer {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--tcp-line);
	background: var(--tcp-soft);
}

.tcp-footer__ring {
	right: -180px;
	top: -200px;
	width: 560px;
	height: 560px;
	animation: tcpDriftRing 160s linear infinite;
}

.tcp-footer__grid {
	position: relative;
	padding-top: 56px;
	padding-bottom: 34px;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
}

.tcp-footer img {
	height: 26px;
	display: block;
	margin-bottom: 18px;
}

.tcp-footer__about {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tcp-muted-2);
	max-width: 280px;
}

.tcp-footer__label {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	margin-bottom: 14px;
}

.tcp-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcp-footer__links a {
	color: var(--tcp-ink-soft);
}

.tcp-footer__links a:hover {
	color: var(--tcp-blue);
}

.tcp-footer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tcp-footer__chips span {
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-tag);
	padding: 5px 8px;
	color: var(--tcp-slate);
	background: var(--tcp-white);
}

.tcp-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 13.5px;
}

.tcp-footer__legal {
	border-top: 1px solid var(--tcp-line-2);
}

.tcp-footer__legal .tcp-wrap {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	color: var(--tcp-muted-3);
}

.tcp-footer__legal-links {
	display: flex;
	gap: 20px;
	align-items: center;
}

.tcp-footer__domain {
	font-family: var(--tcp-mono);
}

.tcp-widget {
	margin-bottom: 22px;
}

.tcp-widget__title {
	font-family: var(--tcp-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	margin-bottom: 10px;
}

/* ==========================================================================
   18. Editorial pages (blog, single, 404)
   ========================================================================== */

.tcp-article {
	padding-top: 100px;
	padding-bottom: 88px;
	max-width: 760px;
}

.tcp-article h1 {
	font-size: 38px;
	line-height: 1.12;
	margin-bottom: 18px;
}

.tcp-article__meta {
	font-family: var(--tcp-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcp-muted-3);
	margin-bottom: 24px;
}

.tcp-prose {
	font-size: 16px;
	line-height: 1.7;
	color: var(--tcp-ink-soft);
}

.tcp-prose h2 { font-size: 26px; margin: 36px 0 11px; }
.tcp-prose h3 { font-size: 20px; margin: 28px 0 9px; }
.tcp-prose p, .tcp-prose ul, .tcp-prose ol { margin: 0 0 16px; }
.tcp-prose img { border-radius: var(--r-card); }

.tcp-prose blockquote {
	margin: 22px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--tcp-cyan);
	color: var(--tcp-muted);
}

.tcp-postlist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 34px;
}

.tcp-postcard {
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-card);
	background: var(--tcp-white);
	padding: 22px;
	transition: all .22s ease;
}

.tcp-postcard:hover {
	border-color: var(--tcp-blue);
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(11, 46, 158, 0.13);
}

.tcp-postcard h2 {
	font-size: 18px;
	margin-bottom: 9px;
}

.tcp-pagination {
	margin-top: 34px;
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.tcp-pagination .page-numbers {
	border: 1px solid var(--tcp-line-3);
	border-radius: var(--r-control);
	padding: 8px 13px;
	color: var(--tcp-slate);
}

.tcp-pagination .page-numbers.current {
	border-color: var(--tcp-blue);
	background: var(--tcp-tint);
	color: var(--tcp-blue);
}

/* ==========================================================================
   19. Reveal + panels
   ========================================================================== */

.tcp-js .tcp-panel:not(.is-active) {
	display: none;
}

/* Switching a tab swaps display, which restarts the animation on its own —
   so the incoming panel settles in instead of snapping. */
.tcp-js .tcp-panel.is-active {
	animation: tcpPanelIn .34s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes tcpPanelIn {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tcp-is-revealing {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.tcp-is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   20. Keyframes
   ========================================================================== */

@keyframes tcpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tcpUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tcpBubble { 0% { opacity: 0; transform: translateY(12px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes tcpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tcpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tcpDriftRing { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.07); } }
@keyframes tcpSheen { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes tcpRipple { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes tcpMenuIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcpMenuItem { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tcpProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tcpAuroraDrift { to { transform: translate3d(0, var(--tcp-drift, 120px), 0); } }
@keyframes tcpNavIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tcpAurora { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; } 50% { transform: translate3d(-40px, 26px, 0) scale(1.14); opacity: .85; } }

/* ==========================================================================
   21. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.tcp-hero h1 { font-size: 56px; }
	.tcp-pillars__grid,
	.tcp-layers__grid { grid-template-columns: 1fr 1fr; }
	.tcp-sol { grid-template-columns: 280px 1fr; }
	.tcp-contact { grid-template-columns: 1fr 330px; }
	.tcp-postlist { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.tcp-steps { flex-wrap: wrap; gap: 16px; }
	.tcp-steps__item { flex: none; }
	.tcp-steps__line { display: none; }
}

@media (max-width: 760px) {
	:root {
		--tcp-px: 20px;
		/* Less air than desktop — the pill is competing with the status bar
		   and the hero still has to fit one screen. */
		--tcp-nav-top: 16px;
	}

	/* Sections and the language toggle move into the menu. */
	.tcp-nav .tcp-nav__link,
	.tcp-nav .tcp-lang { display: none; }

	/* backdrop-filter and transform both make the pill a containing block for
	   position: fixed, which would trap the menu panel inside it. Neither is
	   worth keeping at this size, and a solid pill reads better over the
	   banner anyway. */
	.tcp-nav {
		padding: 6px 6px 6px 14px;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: none;
		/* An animation that targets transform keeps the element a containing
		   block even after it finishes, so the entrance drops here too. */
		animation: none;
	}

	.tcp-nav.is-scrolled {
		transform: none;
	}

	.tcp-menu { display: block; }

	/* The pill floats over the content, so both need to clear it. */
	.tcp-hero__inner { padding-top: 88px; padding-bottom: 44px; }
	.tcp-page,
	.tcp-article { padding-top: 88px; }
	.tcp-hero__logo { height: 34px; margin-bottom: 22px; }
	.tcp-hero__badges { margin-bottom: 24px; }
	.tcp-hero h1 { font-size: 34px; }
	.tcp-hero__lead { font-size: 16px; margin-top: 20px; }
	.tcp-hero .tcp-actions { margin-top: 28px; }

	.tcp-h2,
	.tcp-band__title { font-size: 24px; }
	.tcp-h3 { font-size: 21px; }
	.tcp-page__h1 { font-size: 30px; }

	.tcp-msgs,
	.tcp-layers__inner,
	.tcp-chgrid,
	.tcp-codesec { padding-top: 56px; }

	.tcp-pillars__grid,
	.tcp-layers__grid,
	.tcp-msg-grid,
	.tcp-ind__cards,
	.tcp-postlist { grid-template-columns: 1fr; }

	.tcp-codesec,
	.tcp-sol,
	.tcp-contact,
	.tcp-how__card,
	.tcp-partners__grid { grid-template-columns: 1fr; }

	.tcp-how__card { padding: 22px; }
	.tcp-how__side { border-left: 0; padding-left: 0; }

	.tcp-sol__panels { padding: 22px; min-height: 0; }
	.tcp-ind__panels { padding: 22px; }

	.tcp-footer__grid { grid-template-columns: 1fr 1fr; }

	.tcp-flow__row,
	.tcp-flow__item { flex-direction: column; }
	.tcp-arrow { width: 100%; height: 24px; transform: rotate(90deg); }

	.tcp-band__inner { flex-direction: column; align-items: flex-start; }

	.tcp-aside { position: static; }

	.tcp-article h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		/* Without this the staggered menu items stay at opacity 0 for the
		   length of their delay. */
		animation-delay: -1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
	}

	.tcp-is-revealing { opacity: 1; transform: none; }
}

/* ==========================================================================
   22. Cookie consent

   Rendered only when no choice is stored, so there is nothing to hide on a
   returning visit and no flash. Anchored bottom-left rather than as a
   full-width bar: it has to be noticed and answered, not to swallow the page.
   ========================================================================== */

.tcp-consent {
	position: fixed;
	/* Right, not left: the hero's copy and both call-to-action buttons are
	   left-aligned, and a banner on that side sits straight on top of them. */
	right: var(--tcp-px);
	bottom: var(--tcp-px);
	z-index: var(--z-menu);
	max-width: 460px;
	border: 1px solid var(--tcp-line-2);
	border-radius: var(--r-panel);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(18px);
	box-shadow: 0 24px 60px rgba(6, 27, 92, 0.24);
	animation: tcpConsentIn .5s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: .5s;
}

.tcp-consent.is-dismissed {
	display: none;
}

.tcp-consent__inner {
	padding: 22px 24px;
}

.tcp-consent__title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--tcp-ink);
}

.tcp-consent__body {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tcp-muted-2);
}

.tcp-consent__link {
	white-space: nowrap;
}

.tcp-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tcp-consent__actions .tcp-btn {
	flex: 1;
	min-width: 150px;
}

@keyframes tcpConsentIn {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 760px) {
	.tcp-consent {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}

	.tcp-consent__inner {
		padding: 18px 18px 20px;
	}
}