/*
 * The Composa hero at the top of the home page, and the Integration Wizards
 * services row under it. Kept apart from the site's own stylesheets so they
 * are untouched. The orange is the site's own (#e67e22).
 */

.cmp-hero {
	position: relative;
	min-height: 640px;
	padding: 70px 0 40px;
	color: #fff;
	background: #0e121a url("../images/composa/composa-hero.jpg") 60% 30% / cover no-repeat;
	overflow: hidden;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
/* Dark behind the words, clearing towards the people on the right. */
.cmp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(14, 18, 26, 0.94) 0%,
		rgba(14, 18, 26, 0.86) 32%,
		rgba(14, 18, 26, 0.55) 50%,
		rgba(14, 18, 26, 0.12) 72%,
		rgba(14, 18, 26, 0.05) 100%);
}
.cmp-hero .container { position: relative; }
.cmp-hero-copy { max-width: 580px; position: relative; z-index: 1; }

.cmp-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}
.cmp-eyebrow .cmp-brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 32px;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	font-weight: 500;
}
.cmp-eyebrow .cmp-brand img { height: 34px; width: auto; }

.cmp-hero h1 {
	margin: 0 0 20px;
	font-size: 56px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}
.cmp-hero h1 span { display: block; color: #e67e22; }

.cmp-lead {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 26px;
}

.cmp-points { list-style: none; margin: 0 0 30px; padding: 0; }
.cmp-points li { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.cmp-points .cmp-icon {
	flex: 0 0 52px;
	height: 52px;
	border-radius: 50%;
	background: #e67e22;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
}
.cmp-points b { display: block; font-size: 17px; font-weight: 600; color: #fff; }
.cmp-points small { display: block; font-size: 15px; color: rgba(255, 255, 255, 0.78); }

.cmp-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 34px; }
.cmp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.cmp-btn-primary { background: #e67e22; color: #fff; border: 1px solid #e67e22; }
.cmp-btn-primary:hover, .cmp-btn-primary:focus { background: #cf6d16; border-color: #cf6d16; color: #fff; text-decoration: none; }
.cmp-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.85); }
.cmp-btn-ghost:hover, .cmp-btn-ghost:focus { border-color: #e67e22; color: #fff; text-decoration: none; }

.cmp-powered {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 18px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

/* The card on the right: what goes in, Composa, what comes out, and a request. */
.cmp-card-wrap { position: absolute; right: 15px; bottom: 30px; width: 410px; z-index: 1; }
.cmp-note {
	font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: 17px;
	color: #fff;
	text-align: right;
	transform: rotate(-6deg);
	margin: 0 20px 18px 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cmp-card {
	background: rgba(30, 36, 46, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 16px;
	padding: 18px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.cmp-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cmp-flow-side { display: flex; flex-direction: column; gap: 10px; }
.cmp-chip {
	width: 112px;
	padding: 8px 6px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.94);
	color: #2b3340;
	font-size: 13px;
	text-align: center;
	line-height: 1.25;
}
.cmp-chip i { display: block; font-size: 18px; color: #e67e22; margin-bottom: 3px; }
.cmp-arrow { color: rgba(255, 255, 255, 0.8); font-size: 18px; }
.cmp-hub {
	width: 82px;
	height: 82px;
	border-radius: 14px;
	background: #fff;
	border: 3px solid #e67e22;
	box-shadow: 0 0 22px rgba(230, 126, 34, 0.55);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #2b3340;
}
.cmp-hub img { height: 32px; width: auto; margin-bottom: 4px; }
.cmp-ask {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 10px;
	padding: 11px 12px;
	color: #2b3340;
	font-size: 14px;
	line-height: 1.35;
}
.cmp-ask > i { color: #e67e22; font-size: 18px; }
.cmp-ask .cmp-send {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 6px;
	background: #e67e22;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* The services row under the hero. The points are the page's own paragraphs
   in two Bootstrap rows of three, so each row starts level whatever the length
   of the points above it. The heading is the page's section-title, in capitals. */
.cmp-services { background: #f5f5f5; padding: 30px 0 14px; }
.cmp-services .section-title { margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.12em; }
.cmp-services .cmp-service { display: flex; gap: 10px; align-items: flex-start; }
.cmp-services .cmp-service i { color: #e67e22; font-size: 16px; line-height: 22px; }

/* Smaller screens: no card, the words over a darker photograph. */
@media (max-width: 991px) {
	.cmp-hero { min-height: 0; padding: 50px 0 30px; background-position: 65% center; }
	.cmp-hero::before { background: rgba(14, 18, 26, 0.82); }
	.cmp-card-wrap { display: none; }
	.cmp-hero h1 { font-size: 40px; }
}
@media (max-width: 480px) {
	.cmp-hero h1 { font-size: 32px; }
	.cmp-eyebrow .cmp-brand { font-size: 26px; }
	.cmp-lead { font-size: 17px; }
	.cmp-btn { width: 100%; justify-content: center; }
}