/*
Theme Name: TransPay Global Marketing
Theme URI: https://transpayglobals.com/
Author: TransPay Global
Description: Public marketing website theme for TransPay Global.
Version: 1.10.1
Text Domain: transpay-global
*/

:root {
	--tpg-ink: #ffffff;
	--tpg-muted: #8d949e;
	--tpg-blue: #5a0010;
	--tpg-cyan: #800018;
	--tpg-gold: #c5cad1;
	--tpg-bg: #050505;
	--tpg-panel: #0d0d0f;
	--tpg-line: #242428;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--tpg-bg);
	color: var(--tpg-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

img,
svg {
	display: block;
	max-width: 100%;
}

::selection {
	background: rgba(90, 0, 16, .35);
	color: #fff;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-shell {
	overflow: hidden;
}

.container {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}

.section {
	padding-block: 100px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #c5cad1;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.eyebrow::before {
	width: 18px;
	height: 1px;
	background: var(--tpg-cyan);
	content: "";
}

.section-heading {
	max-width: 700px;
	margin: 0 auto 44px;
	text-align: center;
}

.section-heading h2 {
	margin: 14px 0 12px;
	font-size: clamp(32px, 4vw, 48px);
	letter-spacing: -.045em;
	line-height: 1.1;
}

.section-heading p {
	max-width: 580px;
	margin: 0 auto;
	color: var(--tpg-muted);
}

.gradient-text {
	background: linear-gradient(100deg, #c5cad1 15%, #ffffff 78%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
