:root {
	--teal: #3a8088;
	--ink: #252525;
	--blue: #141827;
	--purple: #5050ac
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	background: #fff;
	font-family: "Trebuchet MS", Arial, sans-serif;
	line-height: 1.55
}

.header {
	height: 90px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 max(7vw, calc((100vw - 1200px)/2));
	position: relative;
	z-index: 5
}

.brand img {
	width: 200px;
	display: block;
	filter: invert(1) grayscale(1) brightness(3)
}

.header nav {
	display: flex;
	gap: 41px
}

.header a {
	color: #f6f6f6;
	text-decoration: none;
	font-size: 14px
}

.menu {
	display: none;
	color: #fff;
	background: transparent;
	border: 0;
	font: inherit
}

main {
	padding-top: 90px
}

.hero {
	min-height: 690px;
	background: linear-gradient(110deg, #5d5ab7, #1d2840 58%, #111827);
	color: #fff;
	display: grid;
	grid-template-columns: 1.04fr .96fr;
	overflow: hidden;
	padding: 76px max(8vw, calc((100vw - 1220px)/2));
	position: relative
}

.hero-copy {
	align-self: center;
	z-index: 1
}

.hero h1 {
	font-size: clamp(47px, 5vw, 76px);
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 1.08;
	max-width: 610px;
	margin: 0 0 24px
}

.lead {
	font-size: 21px;
	margin: 0
}

.badges {
	display: flex;
	gap: 17px;
	margin-top: 37px
}

.badges img {
	height: 42px;
	width: auto;
	display: block
}

.hero-art {
	position: relative;
	min-height: 510px
}

.hero-game {
	position: absolute;
	width: 52%;
	right: 6%;
	top: 2%;
	filter: drop-shadow(0 18px 14px #0006);
	transform: rotate(-3deg)
}

.hero-phone {
	position: absolute;
	bottom: -10%;
	left: 4%;
	width: 49%;
	border-radius: 26px;
	box-shadow: 0 24px 32px #0007;
	transform: rotate(7deg)
}

.section-label,
.eyebrow {
	color: var(--teal);
	font-size: 20px;
	margin: 0 0 22px
}

h1,
h2,
h3 {
	font-weight: 400;
	line-height: 1.13;
	margin: 0 0 24px
}

h2 {
	font-size: clamp(36px, 4vw, 54px);
	letter-spacing: -.035em
}

.intro {
	padding: 135px max(12vw, calc((100vw - 1120px)/2));
	min-height: 670px;
	background: #fff
}

.intro h2 {
	max-width: 745px
}

.intro p {
	max-width: 715px;
	font-size: 16px;
	margin: 18px 0
}

.text-link {
	display: inline-block;
	color: #111;
	border: 1px solid #222;
	padding: 10px 26px;
	margin-top: 24px;
	text-decoration: none;
	font-size: 14px
}

.game {
	padding: 105px max(12vw, calc((100vw - 1080px)/2));
	background: #b8c5d5;
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 13%;
	align-items: center
}

.game-phone {
	width: 90%;
	max-height: 570px;
	object-fit: contain;
	justify-self: center;
	filter: drop-shadow(0 20px 20px #0004)
}

.game p {
	font-size: 17px;
	max-width: 475px
}

.features {
	padding: 115px max(12vw, calc((100vw - 1080px)/2));
	min-height: 700px;
	background: #f9f9f9;
	display: grid;
	grid-template-columns: 1fr .9fr;
	gap: 10%;
	align-items: center
}

.features p {
	font-size: 19px;
	max-width: 460px
}

.features img {
	width: 100%;
	box-shadow: 0 18px 28px #0003
}

.values {
	padding: 130px max(12vw, calc((100vw - 1080px)/2));
	background: #fff
}

.values>h2 {
	max-width: 850px
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 65px;
	margin-top: 75px
}

.value-grid b {
	display: block;
	color: var(--teal);
	font-size: 18px;
	margin-bottom: 19px
}

.value-grid h3 {
	font-size: 24px
}

.cooperation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: #ececec
}

.cooperation>img {
	width: 100%;
	height: 790px;
	object-fit: cover
}

.cooperation>div {
	/* padding: 112px 15% */
}

.cooperation p {
	font-size: 16px
}

.number {
	color: var(--teal);
	font-size: 19px !important;
	margin-top: 33px
}

.team {
	padding: 130px 15%;
	background: #fff;
	text-align: center
}

.team p {
	max-width: 760px;
	margin: 0 auto;
	font-size: 18px
}

.partners {
	padding: 130px max(12vw, calc((100vw - 1080px)/2));
	background: #e7eded
}

.quotes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 75px
}

.quotes blockquote {
	font-size: 23px;
	line-height: 1.5;
	margin: 40px 0 0
}

.quotes cite {
	display: block;
	font-size: 15px;
	font-style: normal;
	margin-top: 21px;
	color: var(--teal)
}

.contact {
	background: linear-gradient(105deg, #5052aa, #121827 66%);
	color: #fff;
	min-height: 610px;
	padding: 112px max(9vw, calc((100vw - 1200px)/2));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12%;
	align-items: start
}

.contact .eyebrow {
	color: #fff
}

.contact h2 {
	font-size: clamp(42px, 4vw, 61px);
	max-width: 470px
}

.contact a {
	color: #fff
}

form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 36px;
	padding-top: 55px
}

label {
	font-size: 14px;
	color: #eee
}

.message {
	grid-column: 1/-1
}

input,
textarea {
	display: block;
	border: 0;
	border-bottom: 1px solid #ddd;
	width: 100%;
	background: transparent;
	color: #fff;
	padding: 10px 0;
	font: inherit;
	outline: 0
}

textarea {
	height: 105px;
	resize: vertical
}

.button {
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	padding: 11px 34px;
	font: inherit;
	cursor: pointer;
	width: max-content
}

.form-status {
	grid-column: 1/-1;
	color: #fff;
	margin: 0
}

footer {
	padding: 62px max(7vw, calc((100vw - 1260px)/2));
	min-height: 390px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	font-size: 14px
}

footer img {
	display: block;
	width: 175px;
	margin-bottom: 34px
}

footer a {
	color: #333
}

.footer-right {
	text-align: right
}