/* Vati AI brand — overrides the Porto skin's primary color scale (originally #F04C23)
   with #004AAD, keeping the same token structure so every var(--primary...) usage
   across theme.css / theme-elements.css picks it up automatically. */
:root {
	--primary: #004AAD;
	--primary-100: #003D8F;
	--primary-200: #003070;
	--primary-300: #002352;
	--primary--100: #0060E0;
	--primary--200: #0A73FF;
	--primary--300: #338AFF;
	--primary-rgba-0: rgba(0, 74, 173, 0);
	--primary-rgba-10: rgba(0, 74, 173, 0.1);
	--primary-rgba-20: rgba(0, 74, 173, 0.2);
	--primary-rgba-30: rgba(0, 74, 173, 0.3);
	--primary-rgba-40: rgba(0, 74, 173, 0.4);
	--primary-rgba-50: rgba(0, 74, 173, 0.5);
	--primary-rgba-60: rgba(0, 74, 173, 0.6);
	--primary-rgba-70: rgba(0, 74, 173, 0.7);
	--primary-rgba-80: rgba(0, 74, 173, 0.8);
	--primary-rgba-90: rgba(0, 74, 173, 0.9);

	/* secondary/tertiary/quaternary aren't used anywhere in the migrated pages,
	   but are aliased into the same blue scale so nothing falls back to the old
	   orange if a vendor component references them. */
	--secondary: var(--primary--200);
	--secondary-100: var(--primary--100);
	--secondary-200: var(--primary);
	--secondary-300: var(--primary-100);
	--secondary--100: var(--primary--300);
	--secondary--200: var(--primary--300);
	--secondary--300: var(--primary--300);
	--secondary-rgba-0: var(--primary-rgba-0);
	--secondary-rgba-10: var(--primary-rgba-10);
	--secondary-rgba-20: var(--primary-rgba-20);
	--secondary-rgba-30: var(--primary-rgba-30);
	--secondary-rgba-40: var(--primary-rgba-40);
	--secondary-rgba-50: var(--primary-rgba-50);
	--secondary-rgba-60: var(--primary-rgba-60);
	--secondary-rgba-70: var(--primary-rgba-70);
	--secondary-rgba-80: var(--primary-rgba-80);
	--secondary-rgba-90: var(--primary-rgba-90);

	--tertiary: var(--primary-200);
	--tertiary-100: var(--primary-300);
	--tertiary-200: var(--primary-300);
	--tertiary-300: var(--primary-300);
	--tertiary--100: var(--primary-100);
	--tertiary--200: var(--primary);
	--tertiary--300: var(--primary--100);
	--tertiary-rgba-0: var(--primary-rgba-0);
	--tertiary-rgba-10: var(--primary-rgba-10);
	--tertiary-rgba-20: var(--primary-rgba-20);
	--tertiary-rgba-30: var(--primary-rgba-30);
	--tertiary-rgba-40: var(--primary-rgba-40);
	--tertiary-rgba-50: var(--primary-rgba-50);
	--tertiary-rgba-60: var(--primary-rgba-60);
	--tertiary-rgba-70: var(--primary-rgba-70);
	--tertiary-rgba-80: var(--primary-rgba-80);
	--tertiary-rgba-90: var(--primary-rgba-90);

	--quaternary: var(--primary-300);
	--quaternary-100: var(--primary-300);
	--quaternary-200: var(--primary-300);
	--quaternary-300: var(--primary-300);
	--quaternary--100: var(--primary-200);
	--quaternary--200: var(--primary-100);
	--quaternary--300: var(--primary);
	--quaternary-rgba-0: var(--primary-rgba-0);
	--quaternary-rgba-10: var(--primary-rgba-10);
	--quaternary-rgba-20: var(--primary-rgba-20);
	--quaternary-rgba-30: var(--primary-rgba-30);
	--quaternary-rgba-40: var(--primary-rgba-40);
	--quaternary-rgba-50: var(--primary-rgba-50);
	--quaternary-rgba-60: var(--primary-rgba-60);
	--quaternary-rgba-70: var(--primary-rgba-70);
	--quaternary-rgba-80: var(--primary-rgba-80);
	--quaternary-rgba-90: var(--primary-rgba-90);
}

/* Logo marquee — continuous smooth-scrolling strip (used by Partners.tsx) */
.logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: logo-marquee-scroll 30s linear infinite;
}

.logo-marquee:hover .logo-marquee-track {
	animation-play-state: paused;
}

.logo-marquee-item {
	flex: 0 0 auto;
	padding: 0 45px;
}

@keyframes logo-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Footer columns — fixed gap between sections instead of stretching to fill the row */
.footer-columns {
	gap: 24px;
}

@media (min-width: 992px) {
	.footer-columns {
		gap: 100px;
	}
}

/* Team card social icons — solid grey circle, used on the Team page bio cards */
.social-icons.social-icons-team li a {
	background: #9aa0a8 !important;
}

.social-icons.social-icons-team li a i {
	color: #fff !important;
}

.social-icons.social-icons-team li:hover a {
	background: #151719 !important;
}

/* Hero highlight underline — brand-blue underline is invisible on the hero's blue background */
.hero-highlight:before {
	border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* Hero title fit — Porto's .custom-big-font-size-1 jumps to 8.5rem at 1600px, sized for the
   demo's original "STRATEGY EXECUTION" string. Porto's .container is capped at a flat 1140px
   from 1200px up (theme.css), so from 1600px there isn't enough side margin to bleed the wider
   "Build Smart, Grow Faster" past the column before html{overflow-x:hidden} clips it — the
   heading runs off screen. Only the ≥1600px step is recalibrated so it always fits inside the
   1140px column; the ≥1200px step (6.9rem) is left untouched. */
@media (min-width: 1600px) {
	h1.hero-title-fit {
		font-size: 7.3rem !important;
	}
}