/* ==========================================================================
   TruBlink Widgets — shared styles
   Brand: #2563EB blue · #22C55E green · #1F2937 navy · #374151 gray
   ========================================================================== */

/* ------- Shared button ------- */
.tb-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
	will-change: transform;
}
.tb-btn svg { width: 18px; height: 18px; transition: transform .3s ease; }
.tb-btn:hover svg { transform: translateX(4px); }
/* Doubled classes: beat the Elementor kit's global `a { color }` rule. */
.tb-btn.tb-btn--primary { background: #2563EB; color: #fff; }
.tb-btn.tb-btn--primary:hover,
.tb-btn.tb-btn--primary:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 99, 235, .35); }
.tb-btn.tb-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.35); }
.tb-btn.tb-btn--ghost:hover,
.tb-btn.tb-btn--ghost:focus { color: #fff; border-color: #22C55E; transform: translateY(-2px); }

/* ==========================================================================
   TB HERO
   ========================================================================== */
.tb-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 120px 24px 100px;
	min-height: 560px;
}
.tb-hero--full { min-height: 100vh; }
.tb-hero__inner {
	position: relative;
	z-index: 3;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.tb-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
	background-size: 34px 34px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}
.tb-hero__blob {
	position: absolute;
	z-index: 2;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	filter: blur(120px);
	opacity: .35;
	pointer-events: none;
}
.tb-hero__blob--1 { top: -140px; left: -120px; background: #2563EB; }
.tb-hero__blob--2 { bottom: -160px; right: -120px; background: #22C55E; opacity: .22; width: 420px; height: 420px; }

.tb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #22C55E;
	margin-bottom: 22px;
}
.tb-hero__eyebrow-line { width: 34px; height: 2px; background: currentColor; display: inline-block; }

.tb-hero__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
}
.tb-hero__title {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(2.1rem, 5.5vw, 4rem);
	line-height: 1.12;
}
.tb-hero__title .tb-word { display: inline-block; }
.tb-hero__title .tb-hl { color: #22C55E; position: relative; }
.tb-hero__check {
	flex: 0 0 auto;
	width: clamp(34px, 5vw, 56px);
	height: clamp(34px, 5vw, 56px);
	margin-top: 6px;
}
.tb-hero__check-path {
	stroke-dasharray: 80;
	stroke-dashoffset: 80;
}
.tb-hero__subtitle {
	max-width: 640px;
	margin: 0 auto 36px;
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.6;
	color: rgba(255,255,255,.78);
}
.tb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.tb-hero__scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 3;
}
.tb-hero__mouse {
	display: block;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255,255,255,.4);
	border-radius: 14px;
	position: relative;
}
.tb-hero__wheel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #22C55E;
	animation: tb-wheel 1.8s ease-in-out infinite;
}
@keyframes tb-wheel {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60%      { transform: translateY(12px); opacity: 0; }
	61%      { transform: translateY(0); opacity: 0; }
}

/* Pre-animation states (JS removes/animates). Only applied when JS is running. */
.tb-anim-ready .tb-hero__title .tb-word,
.tb-anim-ready .tb-hero__eyebrow,
.tb-anim-ready .tb-hero__subtitle,
.tb-anim-ready .tb-hero__actions .tb-btn { opacity: 0; }

/* ==========================================================================
   TB SERVICES GRID
   ========================================================================== */
.tb-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.tb-service {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 36px 30px 32px;
	box-shadow: 0 6px 24px rgba(17, 24, 39, .06);
	border: 1px solid rgba(17, 24, 39, .05);
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease;
	--tb-accent: #2563EB;
}
.tb-service::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--tb-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s ease;
}
.elementor-widget.tb-lift-yes .tb-service:hover { transform: translateY(-8px); box-shadow: 0 18px 44px rgba(17, 24, 39, .12); }
.tb-service:hover::before { transform: scaleX(1); }
.tb-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	font-size: 26px;
	color: #2563EB;
	background: rgba(37, 99, 235, .08);
	margin-bottom: 22px;
	transition: transform .35s ease;
}
.tb-service__icon svg { width: 28px; height: 28px; fill: currentColor; }
.tb-service:hover .tb-service__icon { transform: scale(1.1) rotate(-6deg); }
.tb-service__title { margin: 0 0 10px; font-size: 1.25rem; }
.tb-service__desc { margin: 0 0 18px; line-height: 1.6; }
.tb-service__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--tb-accent);
	text-decoration: none;
}
.tb-service__link svg { width: 16px; height: 16px; transition: transform .3s ease; }
.tb-service__link:hover svg { transform: translateX(4px); }

.tb-anim-ready .tb-service { opacity: 0; }

/* ==========================================================================
   TB PROCESS TIMELINE
   ========================================================================== */
.tb-timeline { position: relative; padding: 20px 0; }
.tb-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	border-radius: 2px;
	overflow: hidden;
}
.tb-timeline__track { position: absolute; inset: 0; background: #E5E7EB; }
.tb-timeline__progress {
	position: absolute;
	inset: 0;
	background: #22C55E;
	transform: scaleY(0);
	transform-origin: top;
}
.tb-timeline__item {
	position: relative;
	width: 50%;
	padding: 24px 48px;
}
.tb-timeline__item--left { left: 0; text-align: right; }
.tb-timeline__item--right { left: 50%; }
.tb-timeline__dot {
	position: absolute;
	top: 44px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #2563EB;
	box-shadow: 0 0 0 6px rgba(37, 99, 235, .15);
	z-index: 2;
}
.tb-timeline__item--left .tb-timeline__dot { right: -8px; }
.tb-timeline__item--right .tb-timeline__dot { left: -8px; }
.tb-timeline__card {
	background: #fff;
	border-radius: 16px;
	padding: 28px 30px;
	box-shadow: 0 6px 24px rgba(17, 24, 39, .07);
	border: 1px solid rgba(17, 24, 39, .05);
}
.tb-timeline__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.tb-timeline__item--left .tb-timeline__head { justify-content: flex-end; }
.tb-timeline__num {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: #2563EB;
	opacity: .25;
}
.tb-timeline__icon { font-size: 22px; color: #22C55E; }
.tb-timeline__icon svg { width: 24px; height: 24px; fill: currentColor; }
.tb-timeline__title { margin: 0 0 8px; font-size: 1.2rem; }
.tb-timeline__desc { margin: 0; line-height: 1.6; }

.tb-anim-ready .tb-timeline__item { opacity: 0; }

@media (max-width: 767px) {
	.tb-timeline__line { left: 10px; }
	.tb-timeline__item,
	.tb-timeline__item--right { width: 100%; left: 0; padding: 16px 0 16px 42px; text-align: left; }
	.tb-timeline__item--left { text-align: left; }
	.tb-timeline__item--left .tb-timeline__head { justify-content: flex-start; }
	.tb-timeline__item--left .tb-timeline__dot,
	.tb-timeline__item--right .tb-timeline__dot { left: 3px; right: auto; }
}

/* ==========================================================================
   TB STATS COUNTERS
   ========================================================================== */
.tb-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.tb-stat { padding: 20px 12px; position: relative; }
.elementor-widget[class*="tb-stats-divided-yes"] .tb-stat:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(148, 163, 184, .35); /* visible on light and dark bands */
}
.tb-stat__number {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
	color: #2563EB;
	margin-bottom: 8px;
}
.tb-stat__label { font-size: 1rem; }

.tb-anim-ready .tb-stat { opacity: 0; }

@media (max-width: 767px) {
	.elementor-widget[class*="tb-stats-divided-yes"] .tb-stat:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   TB PORTFOLIO SHOWCASE
   ========================================================================== */
.tb-portfolio__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 36px;
}
/* .tb-portfolio prefix: beat the Elementor kit's global `button` styles. */
.tb-portfolio .tb-portfolio__filter {
	appearance: none;
	background: transparent;
	border: 1.5px solid rgba(17, 24, 39, .15);
	color: #374151;
	border-radius: 999px;
	padding: 9px 22px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	min-height: 0;
	box-shadow: none;
	cursor: pointer;
	transition: all .3s ease;
}
.tb-portfolio .tb-portfolio__filter:hover { background: transparent; border-color: #2563EB; color: #2563EB; }
.tb-portfolio .tb-portfolio__filter.is-active { background: #2563EB; border-color: #2563EB; color: #fff !important; }

.tb-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.tb-project {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	transform: translateZ(0);
}
.tb-project.is-hidden { display: none; }
.tb-project__media { height: 280px; }
.tb-project__media img,
.tb-project__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tb-project:hover .tb-project__img { transform: scale(1.07); }
.tb-project__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 24, 39, 0) 30%, rgba(17, 24, 39, .92) 68%);
	opacity: .92;
	transition: opacity .4s ease;
}
.tb-project:hover .tb-project__overlay { opacity: 1; }
.tb-project__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	transform: translateY(12px);
	transition: transform .45s ease;
}
.tb-project:hover .tb-project__info { transform: translateY(0); }
/* Doubled selectors + !important on colors: the kit's global h3/text colors
   otherwise paint this text dark navy over the dark overlay. */
.tb-project .tb-project__cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #22C55E !important;
	margin-bottom: 6px;
}
.tb-project .tb-project__title { margin: 0 0 6px; color: #fff !important; font-size: 1.3rem; }
.tb-project .tb-project__desc {
	margin: 0;
	color: rgba(255,255,255,.85) !important;
	font-size: .95rem;
	opacity: 0;
	transition: opacity .45s ease .05s;
}
.tb-project .tb-project__title a { color: #fff !important; }
.tb-project:hover .tb-project__desc { opacity: 1; }
.tb-project__link { position: absolute; inset: 0; z-index: 3; }

.tb-anim-ready .tb-project { opacity: 0; }

/* ==========================================================================
   TB TESTIMONIALS
   ========================================================================== */
.tb-testimonials { max-width: 760px; margin: 0 auto; text-align: center; }
.tb-testimonials__viewport { position: relative; min-height: 240px; }
.tb-testimonial {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 10px;
}
.tb-testimonial.is-active { opacity: 1; visibility: visible; }
.tb-testimonial__stars { font-size: 20px; letter-spacing: 4px; color: #22C55E; }
.tb-testimonial__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 600;
	line-height: 1.5;
	color: #1F2937;
}
.tb-testimonial__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}
.tb-testimonial__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #22C55E;
}
.tb-testimonial__name { font-weight: 700; }
.tb-testimonial__role { font-size: .9rem; }
.tb-testimonials__dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 28px;
}
/* .tb-testimonials prefix: beat the Elementor kit's global `button` styles. */
.tb-testimonials .tb-testimonials__dot {
	appearance: none;
	border: 0;
	width: 10px;
	height: 10px;
	min-width: 0;
	min-height: 0;
	font-size: 0;
	line-height: 0;
	border-radius: 999px;
	background: rgba(17, 24, 39, .18);
	box-shadow: none;
	cursor: pointer;
	padding: 0;
	transition: all .3s ease;
}
.tb-testimonials .tb-testimonials__dot:hover { background: rgba(17, 24, 39, .35); }
.tb-testimonials .tb-testimonials__dot.is-active { width: 28px; background: #2563EB; }

/* ==========================================================================
   TB LOGO MARQUEE
   ========================================================================== */
.tb-marquee { overflow: hidden; position: relative; }
.elementor-widget[class*="tb-marquee-fade-yes"] .tb-marquee {
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tb-marquee__inner { display: flex; width: max-content; }
.tb-marquee__track {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
	animation: tb-marquee-scroll var(--tb-marquee-speed, 28s) linear infinite;
}
.tb-marquee--reverse .tb-marquee__track { animation-direction: reverse; }
.elementor-widget[class*="tb-marquee-pause-yes"] .tb-marquee:hover .tb-marquee__track { animation-play-state: paused; }
@keyframes tb-marquee-scroll {
	to { transform: translateX(-100%); }
}
.tb-marquee__logo { display: inline-flex; align-items: center; text-decoration: none; }
.tb-marquee__logo img { display: block; height: 44px; width: auto; transition: filter .3s ease, opacity .3s ease; }
.elementor-widget[class*="tb-marquee-gray-yes"] .tb-marquee__logo img { filter: grayscale(1); opacity: .6; }
.elementor-widget[class*="tb-marquee-gray-yes"] .tb-marquee__logo:hover img { filter: grayscale(0); opacity: 1; }
.tb-marquee__text { font-weight: 700; font-size: 1.2rem; color: #9CA3AF; white-space: nowrap; }

/* ==========================================================================
   TB CTA BANNER
   ========================================================================== */
.tb-cta {
	position: relative;
	overflow: hidden;
	background: #1F2937;
	border-radius: 24px;
	padding: 72px 40px;
	text-align: center;
}
.tb-cta__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.tb-cta__shape--1 { width: 220px; height: 220px; top: -90px; left: -60px; background: rgba(37, 99, 235, .25); filter: blur(60px); }
.tb-cta__shape--2 { width: 180px; height: 180px; bottom: -70px; right: -40px; background: rgba(34, 197, 94, .2); filter: blur(50px); }
.tb-cta__shape--3 { width: 14px; height: 14px; top: 26%; right: 14%; background: #22C55E; filter: none; opacity: .8; }
.tb-cta__content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.tb-cta__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	line-height: 1.2;
}
.tb-cta__blink { color: #22C55E; display: inline-block; }
.tb-cta__subtitle {
	margin: 0 0 30px;
	color: rgba(255,255,255,.75);
	font-size: 1.05rem;
	line-height: 1.6;
}
.tb-cta .tb-btn { background: #22C55E; }
.tb-cta .tb-btn:hover { background: #2563EB; }

.tb-anim-ready .tb-cta__content > * { opacity: 0; }

/* ==========================================================================
   Reduced motion: kill everything animated
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.tb-anim-ready .tb-hero__title .tb-word,
	.tb-anim-ready .tb-hero__eyebrow,
	.tb-anim-ready .tb-hero__subtitle,
	.tb-anim-ready .tb-hero__actions .tb-btn,
	.tb-anim-ready .tb-service,
	.tb-anim-ready .tb-timeline__item,
	.tb-anim-ready .tb-stat,
	.tb-anim-ready .tb-project,
	.tb-anim-ready .tb-cta__content > * { opacity: 1 !important; }

	.tb-hero__wheel,
	.tb-marquee__track { animation: none !important; }
	.tb-hero__check-path { stroke-dashoffset: 0 !important; }
	.tb-btn, .tb-service, .tb-project__img, .tb-project__info { transition: none !important; }
}