:root {
	--navy: #0B1D2D;
	--navy-deep: #081422;
	--navy-soft: #132638;
	--beige: #D6C2AC;
	--beige-light: #E9DDCF;
	--white-marble: #F6F6F6;
	--slate: #233445;
	--stone: #F2F2F2;
	--text: #0B1726;
	--muted: #697585;
	--line: rgba(11,29,45,.10);
	--shadow: 0 18px 55px rgba(8,20,34,.12);
	--shadow-strong: 0 30px 80px rgba(8,20,34,.20);
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
	color: var(--text);
	background: #fff;
	line-height: 1.55
}

a {
	text-decoration: none
}

img {
	max-width: 100%;
	display: block
}

.section-space {
	padding: 100px 0
}

.shadow-xl {
	box-shadow: var(--shadow-strong)
}

.mic-navbar {
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(11,29,45,.05);
	padding: 12px 0;
	transition: .25s ease
}

	.mic-navbar.scrolled {
		box-shadow: 0 12px 32px rgba(8,20,34,.08)
	}

.brand-logo {
	/* width: 175px;*/
	height: 50px;
	object-fit: contain;
	object-position: left center
}

.navbar .nav-link {
	color: var(--navy);
	font-size: .9rem;
	font-weight: 700;
	padding: .7rem .75rem !important
}

	.navbar .nav-link:hover {
		color: #A99075
	}

.btn-beige {
	background: var(--beige);
	border-color: var(--beige);
	color: var(--navy);
	font-weight: 700
}

	.btn-beige:hover {
		background: #cbb397;
		border-color: #cbb397;
		color: var(--navy)
	}

.btn-outline-navy {
	border: 1px solid rgba(11,29,45,.3);
	color: var(--navy);
	font-weight: 700
}

	.btn-outline-navy:hover {
		background: var(--navy);
		color: #fff
	}

.section-kicker, .eyebrow {
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #B59573;
	font-weight: 700
}

	.section-kicker span {
		display: inline-block;
		width: 28px;
		height: 1px;
		background: #B59573;
		margin-right: .6rem;
		vertical-align: middle
	}

	.eyebrow.light {
		color: #DABF9D
	}

.section-heading {
	max-width: 850px
}

	.section-heading h2 {
		font-size: clamp(2rem,4vw,3rem);
		line-height: 1.12;
		font-weight: 700;
		margin: 1rem 0
	}

	.section-heading p {
		color: var(--muted);
		font-size: 1.05rem
	}

.hero-section {
	padding: 165px 0 110px;
	background: radial-gradient(circle at 88% 10%,rgba(35,52,69,.18),transparent 30%),radial-gradient(circle at 15% 90%,rgba(214,194,172,.18),transparent 35%),linear-gradient(180deg,#FBFAF7 0%,#F5F2ED 100%);
	min-height: 920px;
	display: flex;
	align-items: center;
	overflow: hidden
}

	.hero-section h1 {
		font-size: clamp(3rem,5vw,5.2rem);
		line-height: .98;
		letter-spacing: -.055em;
		font-weight: 700;
		color: #0C1728;
		margin-bottom: 1.6rem
	}

		.hero-section h1 em {
			font-style: italic;
			font-size: .72em;
			color: #1B2D43
		}

.hero-lead {
	font-size: 1.08rem;
	color: #667487;
	max-width: 620px
}

.hero-points {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(11,29,45,.12)
}

	.hero-points strong, .hero-points span {
		display: block
	}

	.hero-points strong {
		font-size: .95rem
	}

	.hero-points span {
		font-size: .88rem;
		color: var(--muted);
		margin-top: .25rem
	}

.hero-product-stage {
	position: relative;
	min-height: 580px
}

.browser-hero {
	position: absolute;
	width: 92%;
	right: 6%;
	top: 90px;
	background: #F0F3F7;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(11,29,45,.08)
}

.browser-bar, .large-browser-top {
	height: 45px;
	background: #F7F8FA;
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-bottom: 1px solid rgba(11,29,45,.06)
}

.traffic {
	display: flex;
	gap: 5px
}

	.traffic span {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #E9A38E
	}

		.traffic span:nth-child(2) {
			background: #E7C675
		}

		.traffic span:nth-child(3) {
			background: #80B98B
		}

.browser-address {
	margin: auto;
	background: #fff;
	border-radius: 999px;
	padding: .45rem 3rem;
	color: #96A0AE;
	font-size: .7rem
}

.browser-content {
	display: grid;
	grid-template-columns: 55px 1fr;
	min-height: 370px
}

.browser-sidebar, .large-sidebar {
	background: #0B1728;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 14px 0
}

.sidebar-mark img {
	width: 28px;
	height: 28px;
	object-fit: contain
}

.browser-sidebar i, .large-sidebar i {
	font-size: 1rem;
	color: #98A7BA;
	padding: 9px;
	border-radius: 9px
}

	.browser-sidebar i.active, .large-sidebar i.active {
		background: var(--beige);
		color: var(--navy)
	}

.browser-main {
	padding: 24px;
	background: #EEF2F6
}

.browser-heading, .web-panel-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem
}

	.browser-heading small, .web-panel-heading small {
		letter-spacing: .12em;
		color: #9AA5B2;
		font-size: .65rem
	}

	.browser-heading h3, .web-panel-heading h3 {
		font-size: 1rem;
		margin: .15rem 0 0
	}

	.browser-heading button, .primary-small {
		border: 0;
		background: #112846;
		color: #fff;
		padding: .55rem .9rem;
		border-radius: 8px;
		font-size: .72rem;
		font-weight: 700
	}

.browser-kpis, .web-kpis {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
	margin: 18px 0
}

	.browser-kpis > div, .web-kpis > div {
		background: #fff;
		border: 1px solid rgba(11,29,45,.06);
		border-radius: 12px;
		padding: 13px
	}

	.browser-kpis span, .web-kpis span, .browser-kpis small, .web-kpis small {
		display: block;
		color: #98A4B2;
		font-size: .62rem
	}

	.browser-kpis strong, .web-kpis strong {
		display: block;
		font-size: 1.2rem;
		margin: .2rem 0
	}

.browser-table {
	background: #fff;
	border-radius: 12px;
	overflow: hidden
}

.row-head, .row-line {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 8px;
	padding: 11px 14px;
	align-items: center
}

.row-head {
	font-size: .58rem;
	text-transform: uppercase;
	color: #9AA5B2;
	background: #F7F8FA
}

.row-line {
	font-size: .66rem;
	border-top: 1px solid #EDF0F3
}

	.row-line > span:first-child {
		display: flex;
		align-items: center;
		gap: 7px
	}

.stone-mini {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	flex: 0 0 18px
}

.status {
	position: relative;
	padding-left: 10px
}

	.status:before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		transform: translateY(-50%)
	}

	.status.green:before {
		background: #65BE82
	}

	.status.beige:before {
		background: #D0A75F
	}

.phone-hero {
	position: absolute;
	width: 180px;
	height: 370px;
	right: -2%;
	bottom: 0;
	/* border: 7px solid #111; */
	/* border-radius: 34px; */
	/* background: #FCFBF7; */
	/* padding: 20px 8px 8px; */
	z-index: 3;
}

.phone-notch, .device-notch {
	position: absolute;
	top: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 65px;
	height: 18px;
	border-radius: 12px;
	background: #000
}

.phone-appbar, .device-appbar {
	text-align: center;
	color: #8F7E6B;
	font-weight: 700;
	font-size: .75rem;
	padding: .7rem 0
}

.phone-catalog-grid, .device-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 6px
}

	.phone-stone, .device-grid > div {
		height: 68px;
		border-radius: 3px;
		position: relative;
		overflow: hidden
	}

		.phone-stone span {
			position: absolute;
			bottom: 2px;
			right: 2px;
			font-size: .38rem;
			background: #F4D45E;
			color: #111;
			padding: 2px 3px
		}

.floating-logo {
	position: absolute;
	right: 0;
	top: 10px;
	width: 170px;
	background: rgba(255,255,255,.75);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(11,29,45,.08);
	border-radius: 20px;
	padding: 12px;
	z-index: 4
}

	.floating-logo img {
		height: 90px;
		object-fit: contain
	}

.floating-note {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 14px;
	padding: 12px 15px;
	box-shadow: var(--shadow);
	z-index: 5
}

	.floating-note i {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		display: grid;
		place-items: center;
		background: #F3F0EA;
		color: #8C7C68
	}

	.floating-note small, .floating-note strong {
		display: block
	}

	.floating-note small {
		font-size: .55rem;
		letter-spacing: .1em;
		color: #96A0AD
	}

	.floating-note strong {
		font-size: .72rem
	}

.note-top {
	right: 0%;
	top: 55px
}

.note-bottom {
	left: 2%;
	bottom: 70px
}

.process-section {
	background: #F7F4EF
}

.process-line {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7,1fr);
	gap: 12px;
	margin-top: 70px
}

	.process-line:before {
		content: "";
		position: absolute;
		left: 7%;
		right: 7%;
		top: 54px;
		height: 1px;
		background: #C8CDD3
	}

.process-step {
	text-align: center;
	position: relative
}

	.process-step .number {
		display: block;
		color: #B59573;
		font-size: .68rem;
		letter-spacing: .12em;
		margin-bottom: 14px
	}

	.process-step .icon {
		width: 62px;
		height: 62px;
		border-radius: 18px;
		background: #fff;
		border: 1px solid #DCE1E6;
		margin: 0 auto 20px;
		display: grid;
		place-items: center;
		position: relative;
		z-index: 2;
		box-shadow: 0 8px 20px rgba(8,20,34,.04)
	}

	.process-step.active .icon {
		background: var(--beige);
		border-color: var(--beige)
	}

	.process-step h3 {
		font-size: 1rem;
		font-weight: 700
	}

	.process-step p {
		font-size: .88rem;
		color: var(--muted);
		max-width: 145px;
		margin: 0 auto
	}

.webapp-section {
	background: #081422;
	color: #fff
}

	.webapp-section h2 {
		font-size: clamp(2rem,4vw,3rem);
		letter-spacing: -.03em
	}

.section-copy-light {
	color: #A9B5C4;
	max-width: 550px;
	margin-left: auto
}

.webapp-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap
}

.web-tab {
	background: #172333;
	color: #BAC5D2;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	padding: .7rem 1.1rem;
	font-size: .82rem
}

	.web-tab i {
		margin-right: .5rem
	}

	.web-tab.active {
		background: var(--beige);
		color: var(--navy);
		border-color: var(--beige)
	}

.large-browser {
	background: #EEF2F6;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.1)
}

.large-browser-top {
	justify-content: space-between
}

.browser-center-pill {
	background: #fff;
	border-radius: 999px;
	padding: .45rem 6rem;
	color: #A0A9B3;
	font-size: .72rem
}

.large-browser-body {
	display: grid;
	grid-template-columns: 64px 1fr;
	min-height: 540px
}

.large-sidebar {
	gap: 24px;
	padding-top: 18px
}

.web-panel {
	display: none;
	padding: 28px;
	background: #EEF2F6;
	color: var(--text)
}

	.web-panel.active {
		display: block
	}

.web-kpis {
	grid-template-columns: repeat(4,1fr);
	gap: 16px
}

	.web-kpis > div {
		padding: 18px;
		border-radius: 14px
	}

	.web-kpis strong {
		font-size: 1.5rem
	}

.ghost-btn {
	background: #fff;
	border: 1px solid #DCE1E6;
	padding: .6rem .85rem;
	border-radius: 8px;
	font-size: .75rem;
	margin-right: .5rem
}

.web-table {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #E3E7EB
}

.web-row {
	display: grid;
	grid-template-columns: .8fr 1.5fr 1fr .8fr 1fr 1fr;
	gap: 8px;
	padding: 14px 16px;
	border-top: 1px solid #EDF0F3;
	font-size: .77rem;
	align-items: center
}

	.web-row.head {
		background: #F7F8FA;
		color: #919BA8;
		text-transform: uppercase;
		font-size: .61rem;
		border-top: 0
	}

	.web-row > span:nth-child(2) {
		display: flex;
		align-items: center;
		gap: 8px
	}

.catalog-showcase {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 16px
}

	.catalog-showcase article, .price-cards article {
		background: #fff;
		border-radius: 16px;
		padding: 14px;
		border: 1px solid #E2E6EA
	}

.material-big {
	height: 260px;
	border-radius: 10px
}

.catalog-showcase h4 {
	font-size: 1rem;
	margin: .9rem 0 .2rem
}

.catalog-showcase span {
	font-size: .82rem;
	color: var(--muted)
}

.price-cards {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 16px
}

	.price-cards small {
		color: #9A7E61;
		letter-spacing: .12em
	}

	.price-cards h4 {
		margin: .4rem 0 1rem
	}

	.price-cards p {
		display: flex;
		justify-content: space-between;
		color: var(--muted);
		font-size: .85rem
	}

	.price-cards strong {
		color: var(--navy)
	}

.slab-card {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 18px
}

.slab-photo {
	min-height: 380px;
	border-radius: 16px
}

.slab-data {
	background: #fff;
	border-radius: 16px;
	padding: 20px
}

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

	.data-grid > div {
		background: #F5F7F9;
		border-radius: 12px;
		padding: 14px
	}

	.data-grid span, .data-grid strong {
		display: block
	}

	.data-grid span {
		color: #94A0AD;
		font-size: .72rem
	}

.note-box {
	margin-top: 16px;
	padding: 16px;
	border-radius: 12px;
	background: #F5F7F9
}

	.note-box p {
		color: var(--muted);
		font-size: .88rem;
		margin: .4rem 0 0
	}

.cloud-section {
	background: radial-gradient(circle at 50% 55%,rgba(214,194,172,.28),transparent 33%),#fff
}

.cloud-map {
	height: 520px;
	max-width: 1040px;
	margin: 55px auto 0;
	position: relative
}

.cloud-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0
}

	.cloud-lines line {
		stroke: #E3D6C7;
		stroke-width: 2
	}

.cloud-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 310px;
	background: #142A3D;
	color: #fff;
	border-radius: 32px;
	padding: 28px;
	text-align: center;
	z-index: 2;
	box-shadow: var(--shadow-strong)
}

.cloud-icon {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	background: rgba(255,255,255,.1);
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
	color: #E3C8A7;
	font-size: 1.5rem
}

.cloud-center h3 {
	font-size: 1.1rem
}

.cloud-center p {
	color: #D2DAE3;
	font-size: .9rem
}

.cloud-center > span {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	background: rgba(255,255,255,.12);
	padding: .55rem .8rem;
	border-radius: 999px;
	color: #E4C7A3;
	font-size: .8rem
}

.cloud-node {
	position: absolute;
	width: 230px;
	background: #fff;
	border: 1px solid #E3E6E9;
	border-radius: 24px;
	padding: 20px;
	z-index: 2;
	box-shadow: var(--shadow)
}

	.cloud-node strong, .cloud-node span {
		display: block
	}

	.cloud-node strong {
		font-size: 1rem;
		margin: .5rem 0
	}

	.cloud-node span {
		color: var(--muted);
		font-size: .86rem
	}

.node-icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: #F5F1EB;
	display: grid;
	place-items: center;
	color: var(--navy)
}

.node-office {
	left: 0;
	top: 25px
}

.node-warehouse {
	right: 0;
	top: 25px
}

.node-showroom {
	left: 0;
	bottom: 25px
}

.node-agent {
	right: 0;
	bottom: 25px
}

.ai-section {
	background: #fff
}

.ai-image-wrap {
	position: relative;
	border-radius: 28px;
	overflow: hidden
}

	.ai-image-wrap img {
		height: 470px;
		width: 100%;
		object-fit: cover
	}

.module-badge {
	position: absolute;
	left: 24px;
	top: 24px;
	background: #173247;
	color: #fff;
	border-radius: 999px;
	padding: .75rem 1rem;
	font-weight: 700
}

.ai-section h2 {
	font-size: clamp(2rem,4vw,3rem);
	color: var(--slate)
}

.ai-section > p {
	color: var(--muted)
}

.ai-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 24px
}

	.ai-list article {
		display: grid;
		grid-template-columns: 55px 1fr;
		gap: 16px;
		align-items: start;
		background: #F7F8FA;
		border: 1px solid #DFE3E7;
		border-radius: 20px;
		padding: 18px
	}

	.ai-list i {
		font-size: 1.4rem;
		color: #D0AA7C
	}

	.ai-list h3 {
		font-size: 1rem
	}

	.ai-list p {
		color: var(--muted);
		font-size: .92rem;
		margin: 0
	}

.mobile-section {
	background: #F7F4EF
}

	.mobile-section h2 {
		font-size: clamp(2rem,4vw,3rem)
	}

	.mobile-section p {
		color: var(--muted);
		font-size: 1.02rem
	}

.mobile-benefits {
	margin-top: 28px
}

	.mobile-benefits article {
		display: grid;
		grid-template-columns: 50px 1fr;
		gap: 14px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid rgba(11,29,45,.1)
	}

	.mobile-benefits i {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: #fff;
		display: grid;
		place-items: center;
		color: #15324D;
		box-shadow: var(--shadow)
	}

	.mobile-benefits strong, .mobile-benefits span {
		display: block
	}

	.mobile-benefits span {
		color: var(--muted);
		font-size: .85rem
	}

.phones-showcase {
	height: 600px;
	position: relative
}

.phone-device {
	position: absolute;
	width: 270px;
	/*height: 620px;*/
	/* background: #FCFBF8; */
	/* border: 7px solid #1A1A1A; */
	/* border-radius: 38px; */
	/* padding: 35px 12px 14px; */
	/* box-shadow: var(--shadow-strong); */
	overflow: hidden;
}

.left-phone {
	left: 0;
	/* top: 90px;*/
	transform: rotate(-10deg)
}

.center-phone {
	left: 50%;
	top: -30px;
	transform: translateX(-50%);
	z-index: 3;
	width: 300px;
}

.right-phone {
	right: 0;
	/* top: 90px;*/
	transform: rotate(10deg)
}

.device-notch {
	top: 7px;
	width: 80px;
	height: 21px
}

.phone-login-logo img {
	height: 150px;
	margin: 0 auto;
	object-fit: contain
}

.login-field {
	background: #fff;
	border: 1px solid #DDD6CD;
	border-radius: 12px;
	padding: 14px;
	color: #A19A91;
	margin-bottom: 12px
}

.left-phone button {
	width: 100%;
	border: 0;
	background: #9F8E77;
	color: #fff;
	padding: 12px;
	border-radius: 8px;
	font-weight: 700
}

.device-grid > div {
	height: 115px;
	border-radius: 4px
}

.mobile-list-card {
	display: grid;
	grid-template-columns: 45px 1fr;
	gap: 10px;
	align-items: center;
	background: #fff;
	border: 1px solid #E3DDD5;
	border-radius: 14px;
	padding: 10px;
	margin-bottom: 10px
}

	.mobile-list-card .stone-mini {
		width: 40px;
		height: 40px;
		border-radius: 5px
	}

	.mobile-list-card strong, .mobile-list-card span {
		display: block
	}

	.mobile-list-card strong {
		font-size: .69rem;
		color: #8A755F
	}

	.mobile-list-card span {
		font-size: .6rem;
		color: #8B9098
	}

.custom-section {
	background: #fff
}

.custom-panel {
	background: linear-gradient(120deg,#091525 0%,#0B1728 60%,#2D3139 100%);
	border-radius: 34px;
	padding: 70px;
	color: #fff
}

	.custom-panel h2 {
		font-size: clamp(2rem,4vw,3rem)
	}

	.custom-panel p {
		color: #AAB6C5;
		max-width: 620px
	}

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

	.custom-grid article {
		background: rgba(255,255,255,.05);
		border: 1px solid rgba(255,255,255,.12);
		border-radius: 18px;
		padding: 22px
	}

	.custom-grid i {
		color: #E1C39F;
		font-size: 1.25rem
	}

	.custom-grid h3 {
		font-size: 1rem;
		margin: .8rem 0 .4rem
	}

	.custom-grid p {
		font-size: .85rem;
		margin: 0
	}

.contact-section {
	background: #101F31
}

	.contact-section h2 {
		font-size: clamp(2rem,4vw,3rem)
	}

	.contact-section p {
		color: #9CA9B9
	}

.contact-benefits {
	margin-top: 28px
}

	.contact-benefits article {
		display: grid;
		grid-template-columns: 48px 1fr;
		gap: 12px;
		align-items: center;
		margin-bottom: 18px
	}

	.contact-benefits i {
		width: 46px;
		height: 46px;
		border-radius: 14px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(255,255,255,.14);
		color: #E0C19C
	}

	.contact-benefits strong, .contact-benefits span {
		display: block
	}

	.contact-benefits span {
		font-size: .8rem;
		color: #8F9BAC
	}

.contact-form-card {
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 28px;
	padding: 38px
}

	.contact-form-card label {
		display: block;
		color: #fff;
		font-size: .76rem;
		margin-bottom: .55rem
	}

	.contact-form-card input, .contact-form-card textarea {
		width: 100%;
		background: rgba(255,255,255,.07);
		border: 1px solid rgba(255,255,255,.14);
		border-radius: 12px;
		padding: 15px;
		color: #fff;
		font-family: inherit
	}

	.contact-form-card textarea {
		resize: vertical
	}

		.contact-form-card input:focus, .contact-form-card textarea:focus {
			outline: none;
			border-color: var(--beige);
			box-shadow: 0 0 0 3px rgba(214,194,172,.12)
		}

.privacy-row {
	display: flex !important;
	align-items: center;
	gap: 9px;
	color: #A9B3C1 !important
}

	.privacy-row input {
		width: 17px !important;
		height: 17px
	}

.contact-form-card #formMessage {
	color: #8592A2;
	font-size: .8rem
}

.footer {
	background: #081422;
	color: #8E9AA8
}

	.footer a {
		color: #D7C2A8
	}

.calacatta {
	background: linear-gradient(135deg,rgba(255,255,255,.94),rgba(237,237,237,.94)),repeating-linear-gradient(60deg,transparent 0 24px,rgba(92,92,92,.24) 24px 26px,transparent 26px 54px),repeating-linear-gradient(118deg,transparent 0 39px,rgba(92,92,92,.18) 39px 41px,transparent 41px 82px)
}

.travertino {
	background: linear-gradient(135deg,#E9D8C5,#CFB596),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 5px,rgba(144,112,76,.12) 5px 10px)
}

.marquina {
	background: linear-gradient(135deg,#192C40,#071523),repeating-linear-gradient(120deg,transparent 0 19px,rgba(255,255,255,.28) 19px 21px,transparent 21px 48px)
}

.brown {
	background: linear-gradient(135deg,#593C2C,#2D1A13),repeating-linear-gradient(55deg,transparent 0 22px,rgba(255,224,185,.25) 22px 24px,transparent 24px 49px)
}

.green-stone {
	background: linear-gradient(135deg,#153D34,#071F1A),repeating-linear-gradient(125deg,transparent 0 19px,rgba(255,255,255,.24) 19px 21px,transparent 21px 52px)
}

.arabescato {
	background: linear-gradient(135deg,#F2F2F0,#DADBD8),repeating-linear-gradient(130deg,transparent 0 18px,rgba(74,88,88,.24) 18px 20px,transparent 20px 48px)
}

@media(max-width:1199px) {
	.process-line {
		grid-template-columns: repeat(4,1fr);
		row-gap: 35px
	}

		.process-line:before {
			display: none
		}

	.catalog-showcase {
		grid-template-columns: repeat(2,1fr)
	}

	.web-kpis {
		grid-template-columns: repeat(2,1fr)
	}

	.phones-showcase {
		transform: scale(.9);
		transform-origin: center top
	}

	.cloud-map {
		transform: scale(.9);
		transform-origin: center top;
		margin-bottom: -45px
	}
}

@media(max-width:991px) {
	.section-space {
		padding: 80px 0
	}

	.hero-section {
		min-height: auto
	}

	.hero-product-stage {
		margin-top: 30px
	}

	.hero-points {
		grid-template-columns: 1fr
	}

	.browser-hero {
		position: relative;
		width: 90%;
		right: auto;
		top: auto
	}

	.phone-hero {
		right: 0
	}

	.floating-logo {
		right: 2%
	}

	.note-top {
		top: -20px
	}

	.note-bottom {
		bottom: 15px
	}

	/*    .process-line {
        grid-template-columns: repeat(2,1fr)
    }*/

	.large-browser-body {
		grid-template-columns: 50px 1fr
	}

	.web-row {
		grid-template-columns: 1fr 1.4fr 1fr 1fr
	}

		.web-row > span:nth-child(4), .web-row > span:nth-child(5) {
			display: none
		}

	.slab-card {
		grid-template-columns: 1fr
	}

	.cloud-map {
		height: auto;
		transform: none;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 20px;
		margin-top: 40px
	}

	.cloud-lines {
		display: none
	}

	.cloud-center, .cloud-node {
		position: relative;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none
	}

	.cloud-center {
		grid-column: 1/-1;
		margin: 0 auto;
		order: -1
	}

	.phones-showcase {
		height: 1120px;
		transform: none
	}

	.phone-device {
		width: 260px
	}

	.left-phone {
		left: 10%;
		top: 570px
	}

	.center-phone {
		left: 50%;
		top: 0
	}

	.right-phone {
		right: 10%;
		top: 570px
	}

	.custom-panel {
		padding: 45px 28px
	}

	.custom-grid {
		margin-top: 20px
	}
}

@media(max-width:767px) {
	.brand-logo {
		width: 250px
	}

	.hero-section {
		padding-top: 135px
	}

		.hero-section h1 {
			font-size: 3rem
		}

	.hero-product-stage {
		min-height: 580px
	}

	.browser-hero {
		width: 100%
	}

	.phone-hero {
		width: 145px;
		height: 315px
	}

	.floating-logo {
		display: none
	}

	.floating-note {
		padding: 10px
	}

	.note-top {
		right: 5%;
		top: 15px
	}

	.note-bottom {
		left: 4%;
		bottom: 0
	}

	.browser-kpis > div:nth-child(3) {
		display: none
	}

	/*.process-line {
        grid-template-columns: 1fr
    }*/

	.section-heading h2, .webapp-section h2, .mobile-section h2, .custom-panel h2, .contact-section h2 {
		font-size: 2rem
	}

	.browser-center-pill {
		padding: .4rem 1rem
	}

	.large-browser-body {
		grid-template-columns: 1fr
	}

	.large-sidebar {
		display: none
	}

	.web-panel {
		padding: 16px
	}

	.web-kpis {
		grid-template-columns: 1fr 1fr
	}

	.web-table {
		overflow-x: auto
	}

	.web-row {
		min-width: 660px
	}

	.catalog-showcase, .price-cards {
		grid-template-columns: 1fr
	}

	.cloud-map {
		grid-template-columns: 1fr
	}

	.cloud-center {
		grid-column: auto;
		width: 100%
	}

	.ai-image-wrap img {
		height: 340px
	}

	.phones-showcase {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 25px
	}

	.phone-device {
		position: relative;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		transform: none !important
	}

	.custom-grid {
		grid-template-columns: 1fr
	}

	.contact-form-card {
		padding: 25px 18px
	}
}


.overview-section {
	background: #f5f6f8;
}

.overview-topband {
	background: linear-gradient(180deg, #041325 0%, #081d33 100%);
}

.overview-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.overview-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 1rem;
	align-items: center;
	padding: 2rem 2.2rem;
	border-left: 1px solid rgba(255,255,255,.10);
}

	.overview-step:first-child {
		border-left: 0;
	}

	.overview-step h3 {
		color: #fff;
		font-size: 1.65rem;
		margin: 0 0 .2rem;
	}

	.overview-step p {
		color: rgba(255,255,255,.78);
		margin: 0;
		font-size: 1.02rem;
	}

.step-no {
	font-size: 2.15rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--beige);
}

.overview-intro h2 {
	font-size: clamp(2rem, 3.2vw, 3.45rem);
	line-height: 1.08;
	color: var(--navy);
	margin-bottom: 0;
}

.overview-intro p {
	color: var(--muted);
	font-size: 1.18rem;
	line-height: 1.65;
	max-width: 590px;
	margin-top: .9rem;
}

.overview-cards {
	margin-top: 2.7rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
}

.overview-card {
	background: #fff;
	border: 1px solid rgba(11, 29, 45, .10);
	border-radius: 28px;
	padding: 2rem 1.9rem 1.8rem;
	min-height: 300px;
	box-shadow: 0 18px 45px rgba(12, 20, 30, .05);
}

.overview-icon {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: #f4f1ec;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--navy);
	font-size: 1.5rem;
	margin-bottom: 1.55rem;
}

.overview-card h3 {
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--navy);
	margin-bottom: 1rem;
}

.overview-card p {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 1199.98px) {
	.overview-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991.98px) {
	.overview-steps {
		grid-template-columns: 1fr;
	}

	.overview-step {
		border-left: 0;
		border-top: 1px solid rgba(255,255,255,.10);
	}

		.overview-step:first-child {
			border-top: 0;
		}

	.overview-card {
		min-height: auto;
		padding: 20px;
	}

	.cloud-node {
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	.overview-cards {
		grid-template-columns: 1fr;
	}

	.overview-step {
		padding: 1.4rem 1rem;
		grid-template-columns: 52px 1fr;
	}

	.step-no {
		font-size: 1.8rem;
	}
}


.cloud-benefit-card {
	background: #fff;
	border-radius: 24px;
	padding: 20px;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	height: 100%;
}

	.cloud-benefit-card i {
		font-size: 1.8rem;
		color: var(--beige);
		display: inline-flex;
		margin-bottom: 1rem;
	}

.cloud-benefits-section {
	background: linear-gradient(180deg, #fafbfc 0%, #f3f5f8 100%)
}

.footer-logo {
	background: #f6f6f6;
	width: 250px;
	padding: 10px;
	border-radius: 5px
}


section {
    overflow-x: hidden;
}