@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700&display=swap');

:root {
	--color-theme-01: #07080F;
	--color-theme-02: #061327;
	/*--color-theme-02: rgb(0 163 240);*/
	--color-theme-blue: rgb(0 163 240);
	font-size: 1.05rem;
}

* {
	font-family: 'Urbanist', sans-serif!important;
}

html, body {
	background-color: var(--color-theme-01);
	color: #F5F5F5;
	height: 100%;
}

.nowrap {
	white-space: nowrap;
}


.fs-090 {
	font-size: .9rem;
}

.fs-095 {
	font-size: .95rem;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.bg-soft-blue {
	background-color: #0E81F3;
}

.img-points {
	object-fit: cover;
	width: 25%;
	min-width: 150px;
	position: absolute;
	top: 10px;
	left: 25%;
	transform: translateX(-50%);
}

.wrapper-headline {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index: 1;
	position: relative;
}

.wrapper-headline h1 {
	max-width: 700px;
	font-size: 2.25em;
}

.wrapper-headline p {
	color: #BBB;
	max-width: 520px;
	font-size: 0.95em;
	margin: 0;
}

.wrapper-headline .responsive-mockup {
	max-width: max(calc(100vw / 2.3), 300px + calc(100vw / 4), 400px);
}

.shadow-theme-blue {
	box-shadow: 0 60px 140px rgb(0 163 240 / 60%), 
		0 40px 56px rgb(0 163 240 / 40%),
		0 20px 24px rgb(0 163 240 / 30%),
		0 10px 12px rgb(0 163 240 / 25%),
		0 0 4px rgb(0 163 240 / 20%);
}

.shadow-theme-success {
	box-shadow: 0 60px 140px rgb(40 167 69 / 30%),
		0 40px 56px rgb(40 167 69 / 20%),
		0 20px 24px rgb(40 167 69 / 15%),
		0 10px 12px rgb(40 167 69 / 15%),
		0 0 4px rgb(40 167 69 / 10%);
}

.shadow-theme-danger {
	box-shadow: 0 60px 140px rgb(220 53 69 / 30%),
		0 40px 56px rgb(220 53 69 / 20%),
		0 20px 24px rgb(220 53 69 / 15%),
		0 10px 12px rgb(220 53 69 / 15%),
		0 0 4px rgb(220 53 69 / 10%);
}

.btn-theme-text {
	color: #FFF;
	transition: color .4s;
	transition-delay: .1s;
}

.btn-theme-blue {
	font-weight: 500;
	padding: 1rem 2rem;
	transition: background-color .4s;
	background-color: var(--color-theme-blue);
	border: 1px solid var(--color-theme-blue);
}

.btn-theme-blue:hover {
	background-color: #17171A;
}

.btn-theme-blue:hover .btn-theme-text {
	color: var(--color-theme-blue);
}

.button-cta-glow {

}

.app-container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1100px;
}

.modulo {
	border-radius: 45px 0 45px 0;
	background-color:  rgb(7 8 15 / 90%);
}

.circle {
 	min-width: 28px;
 	min-height: 28px;
 	border-radius: 100%;
 	background-color: var(--color-theme-02);
 	display: flex;
}

.circle:before {
	content: '';
	display: block;
	margin: auto;
	border-radius: 100%;
	background-color: var(--color-theme-blue);
	width: 14px;
	height: 14px;
}

.img-dashboards {
	position: absolute;
	max-width: calc(100vw - 40px);
	top: 50%;
	left: 0;
	transform: translate(-40%, -55%);
}
.img-dashboards-01 {
	width: 100%;
}

.img-integration {
	width: 70px;
	object-fit: cover;
	margin-bottom: 8px;
}

.step-circle {
	min-width: 16px;
	min-height: 16px;
	border-radius: 100%;
	background-color: var(--primary);
	box-shadow: 0px 0px 10px rgb(0 163 240 / 40%);
}

.step-line {
	width: 100%;
	height: 1px;
	background-color: var(--primary);
}

.step-line-vertical {
	height: 100%;
	width: 1px;
	background-color: var(--primary);
}

.block-title, .block-text {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}


.block-text.first {
	background-color: #071123;
	clip-path: polygon(0 6%, 100% 0%, 100% 98%, 0 96%);
}

.block-text.second {
	background-color: #051A32;
	clip-path: polygon(0 5%, 100% 27%, 100% 84%, 0 100%);
}


.block-title.first {
	background-color: rgb(12 18 33 / 57%);
	clip-path: polygon(0 5%, 100% 38%, 100% 84%, 0 96%);
}

.block-title.second {
	background-color: rgb(13 20 46 / 40%);
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 61%);
}

.text-theme {
	color: #889BAB;
}

.text-theme-blue {
	color: var(--color-theme-blue)!important;
}

.step-text {
	color: #889BAB;
	font-size: .9rem;
}

.plan {
	border: 1px solid var(--primary);
	width: 100%;
	text-align: center;
	max-width: min(500px, calc(100vh - 30px));
	background-image: linear-gradient(180deg, rgb(124 128 254 / 7%), rgb(0 55 255 / 15%));
	border-radius: 10px;
}

.plan p {
	color: #9AAABA;
	font-size: .9rem;
}

.answer {
	border: 1px solid #DDD;
	background-color: #04071E;
	border-radius: 8px;
	font-size: 0.9rem;
	height: 100%;
	overflow: hidden;
}

.answer p {
	color: #8d939b
}

.answers-container {
	background-color: #060B2C;
}

.giant-text {
	position: absolute;
	top: 0;
	left: 50%;
	font-weight: 700;
	color: #0A1032;
	font-size: min(12rem, calc(100vw / 5.5)); 
	letter-spacing: .1em;
	transform: translate(-50%, calc(-50% + 70px));
}


[data-transition]:not(.transition-disabled) {
	opacity: 1;
	transition: all 1.2s;
}

[data-transition]:not(.transition-dispatched) {
	opacity: 0;
}

[data-transition="slide-up"]:not(.transition-dispatched) {
	transform: translateY(-60px);
}

[data-transition="slide-down"]:not(.transition-dispatched) {
	transform: translateY(60px);
}

[data-transition="slide-left"]:not(.transition-dispatched) {
	transform: translateX(-60px);
}

[data-transition="slide-right"]:not(.transition-dispatched) {
	transform: translateX(60px);
}

.glass, .glass > * {
	position: relative;
	z-index: 9;
}

.glass::before {
	content: "";
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: polygon(100% 100%, 100% 0, 0% 0%, 100% 100%);
	background-color: rgb(0 0 0 / 65%);
}

@media(max-width: 552px) {
	.img-dashboards {
		left: 50%;
		transform: translate(-50%, 0);
	}

	.wrapper-headline .responsive-mockup {
		max-width: calc(100vw / 1.1);
	}
}

@media(min-width: 992px) {
	.img-dashboards-01 {
		position: absolute;
	    width: calc(100vw / 1.5);
	    top: 50%;
	    left: 0;
	    transform: translate(-5%, -55%);
	}
}

@media(min-width: 1400px) {

	.img-dashboards-01 {
		width: min(955px, calc(100vw / 1.8));
	}

	.wrapper-position-container-right {
		transform: translateX(calc(-1 * 100vw/14));
	}
	.wrapper-position-container-left {
		transform: translateX(calc(100vw/10));
	}
	.wrapper-headline .responsive-mockup {
		max-width: max(calc(100vw / 1.6), 800px);
	}
}