@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root
{
	--ink: #0a1726;
	--navy: #061522;
	--red: #ff2538;
	--yellow: #ffd21a;
	--aurum: #2d5ea1;
	--zenda: #f97316;
	--max: 1240px
}

*
{
	box-sizing: border-box
}

html
{
	scroll-behavior: smooth
}

body
{
	margin: 0;
	font-family: "Montserrat", Arial, sans-serif;
	color: var(--ink);
	background: #fff
}

a
{
	color: inherit;
	text-decoration: none
}

.container
{
	width: min(var(--max), calc(100% - 80px));
	margin: auto
}

/* Shared section eyebrow ------------------------------------------------- */
.eyebrow
{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding-left: 18px;
	color: #7a8792;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 3.6px;
	text-transform: uppercase;
}

.eyebrow::before
{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 3px;
	height: 18px;
	background: var(--red);
	transform: translateY(-50%);
}

.eyebrow.light
{
	color: rgba(255, 255, 255, .78);
}

.site_header
{
	position: absolute;
	z-index: 20;
	inset: 0 0 auto;
	height: 82px;
	color: #fff
}

.header_inner
{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.site_footer img
{
	width: 168px
}

.hero
{
	position: relative;
	height: 560px;
	overflow: hidden;
	color: #fff;
	background: #050f18;
}

#hero_network
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero_shade
{
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(3, 10, 16, .99) 0%, rgba(3, 10, 16, .96) 24%, rgba(3, 10, 16, .69) 38%, rgba(3, 10, 16, .12) 57%, rgba(3, 10, 16, .08) 82%, rgba(3, 10, 16, .28) 100%),
		radial-gradient(circle at 73% 47%, rgba(25, 58, 79, .18), transparent 52%);
}

.hero_inner
{
	position: relative;
	z-index: 2;
	height: 100%;
}

.hero_copy
{
	position: absolute;
	top: 50%;
	left: 0;
	width: 520px;
	transform: translateY(-43%);
}

.hero_kicker
{
	display: block;
	margin-bottom: 19px;
	color: rgba(255, 255, 255, .82);
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 10px;
	font-weight: 600;
}

.hero h1
{
	margin: 0 0 27px;
	color: #f5f6f7;
	font-size: 58px;
	line-height: .99;
	letter-spacing: -3px;
	font-weight: 400;
}

.hero h1 strong
{
	color: transparent;
	font-weight: 800;
	background: linear-gradient(90deg, #f7d313 0%, #ff9a2b 50%, #ff4a3d 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero_copy>p
{
	max-width: 490px;
	margin: 0;
	color: rgba(255, 255, 255, .84);
	font-size: 14px;
	line-height: 1.7;
}

.solutions
{
	background: #fff
}

.solutions_intro
{
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 70px;
	align-items: center;
	padding-top: 55px;
	padding-bottom: 48px
}

.solutions_intro h2,
.about h2,
.web_design h2
{
	font-size: 36px;
	line-height: 1.13;
	letter-spacing: -1.7px;
	margin: 0 0 14px
}

.solutions_intro p,
.about p,
.web_copy p
{
	font-size: 14px;
	line-height: 1.65;
	color: #53606d;
	margin: 0;
	max-width: 520px
}

.product_split
{
	height: 390px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden
}

.product
{
	position: relative;
	color: #fff
}

.product:after
{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 48%, rgba(255, 255, 255, .08))
}

.aurum
{
	background: linear-gradient(135deg, #1d4f8e, #2d5ea1 52%, #1979cc)
}

.zenda
{
	background: linear-gradient(135deg, #e95c08, #f97316 55%, #ff982d)
}

.zenda:before
{
	content: "";
	position: absolute;
	left: -72px;
	top: 0;
	width: 145px;
	height: 100%;
	background: #fff;
	transform: skewX(-16deg);
	transform-origin: top;
	z-index: 5
}

.product_inner
{
	width: min(650px, 100%);
	height: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 2
}

.aurum .product_inner
{
	margin-left: auto;
	padding: 30px 20px 16px 40px
}

.zenda .product_inner
{
	margin-right: auto;
	padding: 30px 20px 16px 72px
}

.product_copy
{
	width: 46%;
	z-index: 2
}

.product h3
{
	font-size: 14px;
	margin: 11px 0 18px
}

.product p
{
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .93)
}

.button,
.outline_button
{
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 12px 21px;
	border-radius: 25px;
	font-size: 12px;
	font-weight: 800
}

.button
{
	background: #fff;
	color: #111c26
}

.product_visual
{
	width: 58%;
	align-self: flex-end;
	margin-bottom: -8px;
	filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .18))
}

.web_design,
.closing
{
	color: #fff;
	background-color: #071724;
	/* background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px), radial-gradient(circle at 20% 0, rgba(47, 103, 150, .18), transparent 35%); */
	background-image: url("../img/bg.jpg");
}

.about
{
	background: #fff
}

.about_grid
{
	display: grid;
	grid-template-columns: 40% 40% 20%;
	min-height: 430px
}

.about_copy
{
	padding: 58px 58px 45px 0
}

.about_copy p
{
	margin-bottom: 14px
}

.office_image
{
	overflow: hidden
}

.office_image img
{
	width: 100%;
	height: 100%;
	object-fit: cover
}

.web_design
{
	padding: 48px 0 42px
}

.web_grid
{
	display: grid;
	grid-template-columns: 35% 45% 20%;
	align-items: center;
	min-height: 300px
}

.web_copy h2
{
	color: #fff
}

.web_copy p
{
	color: #d8e0e6
}

.outline_button
{
	border: 1px solid #fff;
	margin-top: 22px
}

.web_visual
{
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden
}

.web_visual img
{
	width: 112%;
	max-width: none;
	display: block;
	mix-blend-mode: screen
}

.web_points
{
	list-style: none;
	margin: 0;
	padding: 0 0 0 30px
}

.web_points li
{
	font-size: 12px;
	padding: 12px 0 12px 31px;
	position: relative
}

.web_points li:before
{
	content: "✓";
	position: absolute;
	left: 0;
	top: 9px;
	width: 20px;
	height: 20px;
	border: 1px solid #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px
}

.closing
{
	border-top: 1px solid rgba(255, 255, 255, .18);
	padding: 35px 0
}

.closing_inner
{
	display: flex;
	align-items: center;
	justify-content: space-between
}

.closing h2
{
	font-size: 46px;
	letter-spacing: -2px;
	margin: 8px 0 0
}

.closing h2:after
{
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--red);
	margin-top: 14px
}

.contact
{
	display: grid;
	grid-template-columns: auto auto;
	gap: 8px 24px
}

.contact strong
{
	grid-column: 1/-1;
	font-size: 19px
}

.contact a
{
	font-size: 12px
}

.site_footer
{
	background: #03101a;
	color: #dce2e6;
	padding: 26px 0
}

/* Solutions -------------------------------------------------------------- */
.solutions
{
	position: relative;
	overflow: hidden;
	background: #fff;
}

.solutions_intro
{
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 100px;
	align-items: end;
	padding-top: 72px;
	padding-bottom: 64px;
}

.solutions_intro h2
{
	max-width: 600px;
	margin: 0;
	color: #0a1726;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -2.2px;
}

.solutions_lead
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	padding-bottom: 3px;
}

.solutions_lead p
{
	margin: 0;
	color: #687580;
	font-size: 13px;
	line-height: 1.75;
}

.solutions_lead p+p
{
	position: relative;
	padding-left: 34px;
}

.solutions_lead p+p:before
{
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 1px;
	background: #d8dde1;
}

.product_split
{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 470px;
	overflow: hidden;
	background: #173f73;
}

.product
{
	position: relative;
	min-width: 0;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

.product:after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.product.aurum
{
	background:
		radial-gradient(circle at 80% 20%, rgba(82, 177, 238, .34), transparent 32%),
		linear-gradient(128deg, #173f73 0%, #2d5ea1 55%, #2478ba 100%);
}

.product.aurum:after
{
	background:
		linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, .08) 45.2%, transparent 45.6%),
		radial-gradient(circle at 22% 105%, rgba(5, 31, 67, .38), transparent 48%);
}

.product.zenda
{
	margin-left: -64px;
	padding-left: 64px;
	clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%);
	background:
		radial-gradient(circle at 76% 15%, rgba(255, 191, 89, .34), transparent 31%),
		linear-gradient(128deg, #dd590c 0%, #f97316 57%, #ff9a2f 100%);
}

.product.zenda:before
{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 63px;
	z-index: 4;
	width: 1px;
	background: rgba(255, 255, 255, .38);
	transform: skewX(-7.8deg);
	transform-origin: top;
}

.product.zenda:after
{
	background:
		linear-gradient(115deg, transparent 50%, rgba(255, 255, 255, .08) 50.2%, transparent 50.6%),
		radial-gradient(circle at 25% 110%, rgba(145, 52, 0, .22), transparent 46%);
}

.product_inner
{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(230px, .82fr) minmax(290px, 1.18fr);
	align-items: center;
	gap: 10px;
	width: min(650px, 100%);
	height: 100%;
}

.aurum .product_inner
{
	margin-left: 0;
	padding: 42px 0 35px 40px;
}

.zenda .product_inner
{
	margin-right: auto;
	padding: 42px 18px 35px 82px;
}

.product_copy
{
	position: relative;
	z-index: 3;
	width: auto;
}

.product_label
{
	display: block;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, .68);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2.7px;
	text-transform: uppercase;
}

.product h3
{
	margin: 0 0 17px;
	color: #fff;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -1.3px;
}

.product p
{
	max-width: 285px;
	margin: 0 0 25px;
	color: rgba(255, 255, 255, .83);
	font-size: 12px;
	line-height: 1.7;
}

.product .button
{
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 11px 18px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 24px;
	background: rgba(255, 255, 255, .96);
	color: #13202b;
	font-size: 11px;
	font-weight: 800;
	transition: transform .2s ease, background .2s ease;
}

.product .button:hover
{
	transform: translateX(3px);
	background: #fff;
}

.product .button span
{
	font-size: 17px;
	line-height: 1;
}

.product_device
{
	position: relative;
	align-self: stretch;
	min-width: 0;
}

.product_device:before
{
	content: "";
	position: absolute;
	right: -5%;
	bottom: 38px;
	width: 85%;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .20);
	filter: blur(14px);
}

.product_visual
{
	position: absolute;
	right: -16%;
	bottom: 18px;
	width: 126%;
	max-width: none;
	margin: 0;
	filter: drop-shadow(0 25px 24px rgba(0, 0, 0, .19));
}

.zenda .product_visual
{
	right: -22%;
	width: 132%;
}

/* Solutions refinements -------------------------------------------------- */
.solutions
{
	/* Horizontal distance between the top and bottom ends of the divider.
	   The divider midpoint always remains exactly at 50%. */
	--solutions-diagonal: 180px;
	background: #f7f7f7;
}

.solutions_intro
{
	padding-top: 54px;
	padding-bottom: 48px;
}

/* Both products keep the same effective area. The diagonal crosses the
   exact 50% point: +half at the top and -half at the bottom. */
.product.aurum
{
	z-index: 1;
	margin-right: calc(var(--solutions-diagonal) * -.5);
}

.product.zenda
{
	z-index: 2;
	width: calc(100% + (var(--solutions-diagonal) * .5));
	margin-left: calc(var(--solutions-diagonal) * -.5);
	padding-left: calc(var(--solutions-diagonal) * .5);
	clip-path: polygon(var(--solutions-diagonal) 0, 100% 0, 100% 100%, 0 100%);
}

/* The old separator pseudo-element is not needed: clip-path itself is the
   only boundary, avoiding the thin vertical seam at the grid midpoint. */
.product.zenda:before
{
	display: none;
}

.product_logo
{
	display: block;
	width: 185px;
	height: 45px;
	object-fit: contain;
	object-position: left center;
	margin: 0 0 22px;
}

.product_logo_zenda
{
	height: 35px;
}

.product_device
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.product_visual
{
	right: -10%;
	bottom: 34px;
	width: 120%;
}

.zenda .product_visual
{
	right: -14%;
	width: 125%;
}

/* Technology bridge */
.technology_bridge
{
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 58px 0 62px;
	color: #fff;
	background: linear-gradient(180deg, #11181e 0%, #0d141a 55%, #0b1116 100%);
}

.technology_bridge::before
{
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background: url("../img/home/bridge-planes.svg") center / cover no-repeat;
	opacity: 1;
	pointer-events: none;
}

.technology_bridge::after
{
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, .025), transparent 44%),
		linear-gradient(90deg, rgba(3, 9, 14, .16) 0%, rgba(3, 9, 14, .02) 28%, rgba(3, 9, 14, .02) 72%, rgba(3, 9, 14, .16) 100%),
		linear-gradient(180deg, rgba(2, 8, 12, .02), rgba(2, 8, 12, .18));
	pointer-events: none;
}

.technology_bridge_inner
{
	position: relative;
	z-index: 1;
	text-align: center;
}

.technology_bridge h2
{
	margin: 0;
	color: #fff;
	font-size: 36px;
	line-height: 1.08;
	letter-spacing: -1.6px;
}

.technology_bridge p
{
	max-width: 650px;
	margin: 18px auto 0;
	color: #b8c2c9;
	font-size: 15px;
	line-height: 1.7;
}

.technology_areas
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 30px;
}

.technology_areas span
{
	color: #e9eef1;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
}

.technology_areas i
{
	width: 38px;
	height: 1px;
	background: rgba(159, 177, 189, .32);
}

/* About refinements ------------------------------------------------------ */
.about_grid
{
	grid-template-columns: 1fr 1fr;
	min-height: 430px;
}

.about_copy
{
	padding: 58px 64px 48px 0;
}

.about .office_image
{
	min-height: 430px;
}

.about .office_image img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Web design — animated connected globe */
.web_design
{
	position: relative;
	min-height: 500px;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
	background: #03111c;
	background-image:
		radial-gradient(circle at 63% 48%, rgba(23, 101, 151, .18), transparent 31%),
		radial-gradient(circle at 86% 60%, rgba(209, 26, 38, .055), transparent 20%),
		linear-gradient(90deg, #061521 0%, #061521 28%, #03111c 58%, #020c14 100%);
}

.web_map_art
{
	position: absolute;
	left: 42%;
	right: 13%;
	top: 7%;
	bottom: 5%;
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 0 10px rgba(48, 176, 245, .22));
	transform: translateX(-50px);
}

.web_map_art img,
.web_map_art canvas
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.web_map_art img
{
	object-fit: contain;
	opacity: .92;
}

.web_map_art canvas
{
	z-index: 2;
}

.web_design .web_grid
{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 38% 44% 18%;
	align-items: center;
	min-height: 500px;
}

.web_design .web_copy
{
	align-self: center;
	padding: 62px 0 58px;
}

.web_design .web_copy h2
{
	max-width: 510px;
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(35px, 3vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -2px;
}

.web_design .web_copy p
{
	max-width: 540px;
	margin: 0;
	color: rgba(226, 234, 240, .82);
	font-size: 14px;
	line-height: 1.7;
}

.web_design .outline_button
{
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	margin-top: 30px;
	padding: 11px 18px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 24px;
	color: #13202b;
	background: rgba(255, 255, 255, .96);
	transition: transform .2s ease, background .2s ease;
}

.web_design .outline_button:hover
{
	color: #13202b;
	background: #fff;
	transform: translateX(3px);
}

.web_design .outline_button span
{
	margin-left: auto;
	font-size: 20px;
}

.web_design .web_visual
{
	height: 100%;
	min-height: 500px;
}

.web_design .web_points
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 5px 0 5px 30px;
	border-left: 1px solid rgba(255, 255, 255, .48);
	color: rgba(255, 255, 255, .88);
}

.web_design .web_points::after
{
	content: "";
	position: absolute;
	left: 30px;
	bottom: -31px;
	width: 25px;
	height: 2px;
	background: #e31b2b;
}

.web_design .web_points span
{
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 3.4px;
	text-transform: uppercase;
}

/* Closing / Footer ------------------------------------------------------- */
.closing
{
	position: relative;
	overflow: hidden;
	padding: 92px 0 88px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	background: #020b12;
}

.closing::before
{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: rgba(255, 255, 255, .08);
	opacity: 1;
}

.closing_glow
{
	position: absolute;
	width: 650px;
	height: 650px;
	right: -170px;
	top: -285px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(227, 27, 43, .10) 0%, rgba(227, 27, 43, .025) 35%, transparent 68%);
}

.closing_inner
{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 110px;
	align-items: end;
}

.closing h2
{
	margin: 0;
	color: #fff;
	font-size: clamp(44px, 4vw, 56px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -2.5px;
}

.closing h2::after
{
	display: none;
}

.closing_copy p
{
	max-width: 580px;
	margin: 28px 0 0;
	color: rgba(221, 230, 236, .7);
	font-size: 14px;
	line-height: 1.75;
}

.closing_action
{
	padding: 0 0 5px;
}

.closing_action>span
{
	display: block;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, .48);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2.8px;
	text-transform: uppercase;
}

.closing_action>a
{
	display: flex;
	align-items: center;
	gap: 25px;
	padding: 16px 0 17px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	transition: border-color .2s ease;
}

.closing_action>a:hover
{
	border-color: #e31b2b;
}

.closing_action strong
{
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 500;
	letter-spacing: -.7px;
}

.closing_action i
{
	margin-left: auto;
	font-size: 27px;
	font-style: normal;
	transition: transform .2s ease;
}

.closing_action>a:hover i
{
	transform: translateX(5px);
}

.site_footer
{
	padding: 0;
	color: rgba(224, 231, 236, .7);
	background: #020b12;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer_top
{
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	gap: 64px;
	align-items: start;
	padding-top: 42px;
	padding-bottom: 40px;
}

.footer_brand img
{
	display: block;
	width: 145px;
}

.footer_brand p
{
	margin: 14px 0 0;
	color: rgba(224, 231, 236, .48);
	font-size: 11px;
}

.footer_nav,
.footer_products,
.footer_social
{
	display: grid;
	gap: 9px;
	min-width: 120px;
}

.footer_nav a,
.footer_products a,
.footer_social a
{
	color: rgba(224, 231, 236, .72);
	font-size: 11px;
	transition: color .2s ease;
}

.footer_nav a:hover,
.footer_products a:hover,
.footer_social a:hover
{
	color: #fff;
}

.footer_products>span,
.footer_social>span
{
	margin-bottom: 2px;
	color: rgba(255, 255, 255, .35);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 2.3px;
	text-transform: uppercase;
}

.footer_social a
{
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.footer_social a i
{
	font-size: 15px;
}

.footer_bottom
{
	display: flex;
	justify-content: space-between;
	padding-top: 17px;
	padding-bottom: 19px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: rgba(224, 231, 236, .38);
	font-size: 9px;
	letter-spacing: .3px;
}

/* Shared site chrome */
img
{
	max-width: 100%;
}

.site_header
{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	height: 78px;
	background: rgba(5, 10, 14, 0.88);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.header_inner
{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header_brand
{
	display: flex;
	align-items: center;
	height: 100%;
}

.header_brand img
{
	display: block;
	width: auto;
	height: 60px;
}

.header_navigation
{
	display: flex;
	align-self: stretch;
	gap: 15px;
}

.header_navigation a
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	padding: 3px 0 0;
	color: rgba(255, 255, 255, .58);
	font-size: 13px;
	font-weight: 500;
	transition: color 180ms ease;
}

.header_navigation a::before
{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.header_navigation a:hover,
.header_navigation a.active
{
	color: #fff;
}

.header_navigation a:hover::before,
.header_navigation a.active::before
{
	transform: scaleX(1);
}

.header_toggle
{
	display: none;
	width: 42px;
	height: 42px;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.header_toggle span
{
	display: block;
	width: 100%;
	height: 2px;
	margin: 5px 0;
	background: #fff;
	transition: transform 180ms ease, opacity 180ms ease;
}

/* Shared product hero actions -------------------------------------------- */
.hero_actions
{
	display: flex;
	gap: 14px;
	margin-top: 30px;
}

.hero_actions a
{
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 12px;
	height: 54px;
	justify-content: center;
	min-width: 190px;
	padding: 0 28px;
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hero_actions a:hover
{
	transform: translateY(-2px);
}

.hero_primary
{
	color: #ffffff;
}

.hero_primary span
{
	font-size: 22px;
	font-weight: 400;
}

.hero_secondary
{
	background: rgba(2, 21, 37, .2);
	border: 1px solid rgba(205, 230, 250, .78);
	color: #ffffff;
}

.hero_secondary i
{
	color: currentColor;
	font-size: 13px;
}

/* Shared product components */

/* Property icon geometry. Brand color, border and background stay product-specific. */
.aurum_capabilities .feature_icon,
.zenda_capability>i
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	font-size: 25px;
}

/* Pricing -------------------------------------------------------------- */
#pricing
{
	position: relative;
}

.aurum_pricing,
.zenda_pricing
{
	position: relative;
	padding: 96px 0 112px;
	overflow: hidden;
	background: #f7f9fb;
}

.aurum_pricing .container,
.zenda_pricing .container
{
	position: relative;
	z-index: 2;
}

.pricing_intro,
.zenda_pricing_intro
{
	max-width: 760px;
	margin-bottom: 48px;
}

.pricing_content,
.pricing_content
{
	position: relative;
}

.pricing_scroll
{
	width: 100%;
	margin-top: -8px;
	padding-top: 66px;
	overflow-x: auto;
}

.pricing_table
{
	width: 100%;
	min-width: 900px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(21, 34, 50, .10);
}

.pricing_table th,
.pricing_table td,
.pricing_table th,
.pricing_table td
{
	width: 15%;
	padding: 15px 10px;
	border-right: 1px solid #e7ebef;
	border-bottom: 1px solid #e7ebef;
	text-align: center;
	vertical-align: middle;
}

.pricing_table th:first-child,
.pricing_table td:first-child,
.pricing_table th:first-child,
.pricing_table td:first-child
{
	width: 25%;
	text-align: left;
}

.pricing_table th:last-child,
.pricing_table td:last-child,
.pricing_table th:last-child,
.pricing_table td:last-child
{
	border-right: 0;
}

.pricing_table thead th
{
	position: relative;
	height: 108px;
	padding-top: 34px;
	background: #13263c;
	color: #fff;
	font-weight: 600;
}

.pricing_table thead th:first-child
{
	border-radius: 8px 0 0;
}

.pricing_table thead th:last-child
{
	border-radius: 0 8px 0 0;
}

.pricing_table .price
{
	position: absolute;
	top: -49px;
	left: 50%;
	display: flex;
	width: 98px;
	height: 98px;
	align-items: center;
	justify-content: center;
	border: 6px solid #fff;
	border-radius: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.05;
	box-shadow: 0 8px 22px rgba(20, 34, 50, .18);
}

.pricing_table tbody td
{
	height: 58px;
	color: #536274;
	font-size: 11px;
}

.pricing_table tbody tr:nth-child(even) td
{
	background: #fafbfc;
}

.pricing_table tbody tr:last-child td
{
	border-bottom: 0;
}

.pricing_table tbody tr:last-child td:first-child
{
	border-radius: 0 0 0 8px;
}

.pricing_table tbody tr:last-child td:last-child
{
	border-radius: 0 0 8px;
}

.pricing_table tbody td:first-child
{
	padding-left: 22px;
	color: #26384b;
	font-weight: 500;
}

.pricing_yes
{
	color: #28a745;
}

.pricing_no
{
	color: #dc3545;
}

.pricing_notes
{
	margin-top: 24px;
	color: #697786;
	font-size: 13px;
	line-height: 1.65;
}

.pricing_notes p
{
	margin: 0 0 7px;
}

/* Shared pricing table presentation (Aurum and Zenda). */

/* Shared pricing table rules. Product-specific differences remain in aurum.css and zenda.css. */

/* Shared pricing table presentation. Product variants remain in their stylesheets. */
.pricing_table tbody tr:last-child td:last-child
{
	border-radius: 0 0 10px 0;
}

.pricing_table thead th:first-child
{
	width: 25%;
	padding: 18px;
	border-radius: 10px 0 0 0;
	text-align: left;
}

.pricing_table
{
	margin: 0;
	color: #536172;
	text-align: center;
	font-size: 12px;
	filter: drop-shadow(0 18px 28px rgba(16, 48, 79, .07));
	border: 1px solid rgba(45, 94, 161, .14);
}

.pricing_table thead th
{
	position: relative;
	width: 15%;
	height: 126px;
	padding: 58px 10px 18px;
	border-bottom: 0;
	background: linear-gradient(180deg, #173b5d 0%, #102f4c 100%);
	vertical-align: middle;
}

.pricing_table tbody td
{
	height: 31px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, .9);
	line-height: 1.25;
}

.pricing_table tbody tr:nth-child(even) td
{
	background: rgba(240, 244, 248, .82);
}

.pricing_table th,
.pricing_table td
{
	border-right: 1px solid #d8e2ec;
}

.pricing_table tbody td:first-child
{
	padding-left: 18px;
	color: #566679;
	text-align: left;
	font-weight: 500;
}

.pricing_table thead th:last-child
{
	border-radius: 0 10px 0 0;
}

.pricing_table th:last-child,
.pricing_table td:last-child
{
	border-right: 0;
}

.pricing_table .plan_name
{
	margin: 0;
	font-size: 18px;
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: .2px;
}

.pricing_table tbody tr:last-child td:first-child
{
	border-radius: 0 0 0 10px;
}

/* Product demo --------------------------------------------------------- */
.aurum_demo,
.zenda_demo
{
	position: relative;
	padding: 26px 0 30px;
	background: #fff;
}

.aurum_demo_panel,
.zenda_demo_panel
{
	position: relative;
	min-height: 520px;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(410px, 44%) minmax(0, 56%);
	align-items: center;
	border-radius: 12px;
	color: #fff;
}

.aurum_demo_panel::before,
.zenda_demo_panel::before
{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.aurum_demo_content,
.zenda_demo_content
{
	position: relative;
	z-index: 4;
	padding: 58px 34px 48px 70px;
}

.aurum_demo h2,
.zenda_demo h2
{
	margin: 0 0 24px;
	color: #fff;
	font-size: clamp(50px, 4.5vw, 68px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -3px;
}

.aurum_demo_lead,
.zenda_demo_lead
{
	max-width: 540px;
	margin: 0 0 26px;
	color: rgba(255, 255, 255, .88);
	font-size: 18px;
	line-height: 1.5;
}

.aurum_demo_actions,
.zenda_demo_actions
{
	max-width: 560px;
}

.aurum_demo_button,
.zenda_demo_button
{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	min-width: 190px;
	padding: 14px 22px;
	border-radius: 28px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease;
}

.aurum_demo_button:hover,
.zenda_demo_button:hover
{
	color: #fff;
	transform: translateY(-2px);
}

.aurum_demo_button span,
.zenda_demo_button span
{
	font-size: 21px;
	line-height: 1;
}

.aurum_demo_actions p,
.zenda_demo_actions p
{
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
}

.aurum_demo_actions p a,
.zenda_demo_actions p a
{
	margin-left: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.aurum_demo_points,
.zenda_demo_points
{
	display: flex;
	align-items: center;
	margin-top: 32px;
}

.aurum_demo_points>div,
.zenda_demo_points>div
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 0 24px;
	border-left: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .88);
	font-size: 12px;
	white-space: nowrap;
}

.aurum_demo_points>div:first-child,
.zenda_demo_points>div:first-child
{
	padding-left: 0;
	border-left: 0;
}

.aurum_demo_visual,
.zenda_demo_visual
{
	position: relative;
	z-index: 2;
	min-height: 440px;
	margin-left: 34px;
	align-self: stretch;
}

/* Horizontal scrolling hint for pricing comparisons (Aurum and Zenda). */
.pricing_scroll_hint
{
	display: flex;
	visibility: hidden;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	min-height: 18px;
	margin: 0 0 10px;
	padding: 0 3px;
	color: #65707d;
	font-size: 12px;
	font-weight: 500;
}

.pricing_scroll_hint.is_visible
{
	visibility: visible;
}

/* Keep the hint hidden until WOW reveals its parent section. */
.pricing_content.wow:not(.animated) .pricing_scroll_hint
{
	visibility: hidden;
}

.pricing_scroll_hint i
{
	font-size: 15px;
	animation: pricing_hint_slide 1.8s ease-in-out 3;
}



@keyframes pricing_hint_slide
{

	0%,
	100%
	{
		transform: translateX(0);
	}

	50%
	{
		transform: translateX(5px);
	}
}

@media (prefers-reduced-motion: reduce)
{
	.pricing_scroll_hint i
	{
		animation: none;
	}
}