/*
 * CreditRefPro — public landing page styles
 * Built on top of app.min.css + mystyle.css so the palette stays identical
 * to the signed-in application (primary #29badd, dark #196c7f, ink #313a46).
 */

:root {
	--crp-primary: #29badd;
	--crp-primary-dark: #196c7f;
	--crp-ink: #313a46;
	--crp-muted: #6c757d;
	--crp-soft: #98a6ad;
	--crp-light: #f5f7fa;
	--crp-line: #eef2f7;
}

body.landing-body {
	font-family: Nunito, sans-serif;
	color: var(--crp-muted);
	background-color: #fff;
	overflow-x: hidden;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body h4,
.landing-body h5 {
	color: var(--crp-ink);
	font-weight: 700;
}

.landing-body a {
	text-decoration: none;
}

/* ---------------------------------------------------------- Top navigation */

.crp-navbar {
	background-color: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 1px 0 0 var(--crp-line);
	padding: .65rem 0;
	transition: box-shadow .2s ease;
	z-index: 1030;
}

.crp-navbar.is-stuck {
	box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15));
}

.crp-navbar .navbar-brand img {
	height: 42px;
}

.crp-navbar .nav-link {
	color: var(--crp-ink);
	font-weight: 600;
	font-size: .9rem;
	padding: .5rem .9rem;
	position: relative;
}

.crp-navbar .nav-link:hover,
.crp-navbar .nav-link:focus {
	color: var(--crp-primary);
}

.crp-navbar .navbar-toggler {
	border: 1px solid var(--crp-line);
	color: var(--crp-ink);
	font-size: 1.35rem;
	line-height: 1;
	padding: .25rem .5rem;
}

.crp-navbar .navbar-toggler:focus {
	box-shadow: none;
}

.crp-avatar {
	height: 32px;
	width: 32px;
	object-fit: cover;
}

/* -------------------------------------------------------------------- Hero */

.crp-hero {
	position: relative;
	background: linear-gradient(135deg, #313a46 0%, var(--crp-primary-dark) 55%, var(--crp-primary) 100%);
	color: rgba(255, 255, 255, .85);
	padding: 5rem 0 8rem;
	overflow: hidden;
}

.crp-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 90px;
	background: url('../images/waves.png') repeat-x bottom center;
	background-size: 1000px 90px;
	opacity: .25;
	pointer-events: none;
}

.crp-hero h1 {
	color: #fff;
	font-size: calc(1.9rem + 1.1vw);
	line-height: 1.18;
	letter-spacing: -.02em;
}

.crp-hero .lead {
	color: rgba(255, 255, 255, .82);
	font-size: 1.05rem;
	max-width: 34rem;
}

.crp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background-color: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	border-radius: 50rem;
	padding: .3rem .85rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.crp-hero-points {
	list-style: none;
	padding: 0;
	margin: 0;
}

.crp-hero-points li {
	color: rgba(255, 255, 255, .82);
	font-size: .92rem;
	margin-bottom: .4rem;
}

.crp-hero-points i {
	color: #fff;
	margin-right: .4rem;
}

.crp-hero-art {
	position: relative;
	z-index: 2;
}

/* A stylised mock of the real dashboard, drawn with theme colours only. */
.crp-mock {
	background-color: #fff;
	border-radius: .5rem;
	box-shadow: 0 24px 60px -12px rgba(19, 32, 42, .45);
	overflow: hidden;
}

.crp-mock-bar {
	background-color: var(--crp-ink);
	padding: .55rem .8rem;
	display: flex;
	align-items: center;
	gap: .35rem;
}

.crp-mock-bar span {
	height: 9px;
	width: 9px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .25);
}

.crp-mock-bar span:first-child {
	background-color: var(--crp-primary);
}

.crp-mock-body {
	display: flex;
	min-height: 250px;
}

.crp-mock-side {
	background-color: var(--crp-ink);
	width: 34%;
	padding: .9rem .8rem;
}

.crp-mock-side i {
	color: rgba(255, 255, 255, .75);
	font-size: .8rem;
	margin-right: .4rem;
}

.crp-mock-side .crp-mock-row {
	display: flex;
	align-items: center;
	margin-bottom: .7rem;
}

.crp-mock-side .crp-mock-line {
	height: 6px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .22);
	flex: 1;
}

.crp-mock-side .crp-mock-row.is-active .crp-mock-line {
	background-color: var(--crp-primary);
}

.crp-mock-main {
	flex: 1;
	padding: .9rem;
	background-color: var(--crp-light);
}

.crp-mock-tile {
	background-color: #fff;
	border-radius: .3rem;
	padding: .6rem;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	height: 100%;
}

.crp-mock-tile i {
	color: var(--crp-primary);
	font-size: 1rem;
}

.crp-mock-tile strong {
	display: block;
	color: var(--crp-ink);
	font-size: 1.15rem;
	line-height: 1.2;
}

.crp-mock-tile small {
	color: var(--crp-soft);
	font-size: .62rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.crp-mock-chart {
	display: flex;
	align-items: flex-end;
	gap: .3rem;
	height: 62px;
	margin-top: .7rem;
}

.crp-mock-chart span {
	flex: 1;
	border-radius: 2px 2px 0 0;
	background-color: rgba(41, 186, 221, .35);
}

.crp-mock-chart span:nth-child(2n) {
	background-color: var(--crp-primary);
}

/* --------------------------------------------------------------- Stat strip */

.crp-stats {
	margin-top: -4.5rem;
	position: relative;
	z-index: 5;
}

.crp-stats .card {
	border: 0;
	box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15));
}

.crp-stat-value {
	color: var(--crp-primary-dark);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
}

.crp-stat-label {
	color: var(--crp-soft);
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------------------------------------------------------------- Sections */

.crp-section {
	padding: 4.5rem 0;
}

/* The stat card already overhangs the hero, so the next section starts tighter */
.crp-stats + .crp-section {
	padding-top: 3rem;
}

.crp-section-alt {
	background-color: var(--crp-light);
}

.crp-section-title {
	font-size: calc(1.35rem + .35vw);
	margin-bottom: .75rem;
}

.crp-section-sub {
	color: var(--crp-muted);
	max-width: 40rem;
	margin: 0 auto;
}

.crp-kicker {
	color: var(--crp-primary);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}

/*
 * The bundled theme illustrations ship in violet. Rotating the hue brings them
 * onto the CreditRefPro cyan without having to redraw the artwork.
 */
.crp-illustration {
	filter: hue-rotate(-72deg) saturate(.92);
}

/* ------------------------------------------------------------- Role cards */

.crp-role {
	border: 1px solid var(--crp-line);
	border-radius: .35rem;
	background-color: #fff;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.crp-role:hover {
	transform: translateY(-4px);
	border-color: rgba(41, 186, 221, .45);
	box-shadow: 0 18px 40px -18px rgba(25, 108, 127, .35);
}

.crp-role-icon {
	height: 46px;
	width: 46px;
	border-radius: .35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	color: var(--crp-primary);
	background-color: rgba(41, 186, 221, .14);
}

.crp-role ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.crp-role ul li {
	position: relative;
	padding-left: 1.35rem;
	margin-bottom: .4rem;
	font-size: .9rem;
}

.crp-role ul li::before {
	content: "\F012C";
	font-family: "Material Design Icons";
	position: absolute;
	left: 0;
	top: -1px;
	color: var(--crp-primary);
}

/* ---------------------------------------------------------- Feature cards */

.crp-feature {
	background-color: #fff;
	border: 1px solid var(--crp-line);
	border-radius: .35rem;
	padding: 1.35rem;
	height: 100%;
	transition: box-shadow .2s ease, transform .2s ease;
}

.crp-feature:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px -16px rgba(25, 108, 127, .3);
}

.crp-feature-icon {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(41, 186, 221, .14);
	color: var(--crp-primary-dark);
	font-size: 1.15rem;
	margin-bottom: .85rem;
}

.crp-feature h5 {
	font-size: 1rem;
	margin-bottom: .35rem;
}

.crp-feature p {
	font-size: .88rem;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- Steps */

.crp-steps {
	position: relative;
}

.crp-step {
	position: relative;
	padding-left: 3.5rem;
	padding-bottom: 2rem;
}

.crp-step:last-child {
	padding-bottom: 0;
}

.crp-step::before {
	content: "";
	position: absolute;
	left: 1.09rem;
	top: 2.4rem;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, rgba(41, 186, 221, .5), rgba(41, 186, 221, 0));
}

.crp-step:last-child::before {
	display: none;
}

.crp-step-num {
	position: absolute;
	left: 0;
	top: 0;
	height: 2.25rem;
	width: 2.25rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--crp-primary) 0%, var(--crp-primary-dark) 100%);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px -4px rgba(41, 186, 221, .8);
}

.crp-step h5 {
	margin-bottom: .3rem;
	font-size: 1.02rem;
}

.crp-step p {
	font-size: .9rem;
	margin-bottom: 0;
}

/* -------------------------------------------------------------- Trust list */

.crp-trust {
	display: flex;
	gap: .85rem;
	margin-bottom: 1.35rem;
}

.crp-trust:last-child {
	margin-bottom: 0;
}

.crp-trust i {
	flex-shrink: 0;
	height: 38px;
	width: 38px;
	border-radius: .35rem;
	background-color: rgba(41, 186, 221, .14);
	color: var(--crp-primary-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.crp-trust h5 {
	font-size: .98rem;
	margin-bottom: .2rem;
}

.crp-trust p {
	font-size: .88rem;
	margin-bottom: 0;
}

/* --------------------------------------------------------------- CTA band */

.crp-cta {
	background: linear-gradient(135deg, var(--crp-primary) 0%, var(--crp-primary-dark) 65%);
	color: #fff;
	border-radius: .5rem;
	padding: 2.5rem;
}

.crp-cta h2 {
	color: #fff;
	font-size: calc(1.25rem + .35vw);
}

.crp-cta p {
	color: rgba(255, 255, 255, .85);
	margin-bottom: 0;
}

.crp-cta .btn-light {
	color: var(--crp-primary-dark);
	font-weight: 700;
}

.crp-cta .btn-outline-light:hover {
	color: var(--crp-primary-dark);
}

/* ---------------------------------------------------------------- Footer */

.crp-footer {
	background-color: var(--crp-ink);
	color: rgba(255, 255, 255, .6);
	padding: 3rem 0 1.5rem;
	font-size: .88rem;
}

.crp-footer img {
	height: 46px;
	margin-bottom: 1rem;
}

.crp-footer h6 {
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .9rem;
}

.crp-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.crp-footer ul li {
	margin-bottom: .45rem;
}

.crp-footer a {
	color: rgba(255, 255, 255, .6);
}

.crp-footer a:hover {
	color: var(--crp-primary);
}

.crp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 2rem;
	padding-top: 1.25rem;
	font-size: .82rem;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 991.98px) {
	.crp-navbar .navbar-collapse {
		background-color: #fff;
		border-top: 1px solid var(--crp-line);
		margin-top: .65rem;
		padding: .75rem 0 .25rem;
	}

	.crp-hero {
		padding: 3.5rem 0 7rem;
		text-align: center;
	}

	.crp-hero .lead,
	.crp-hero .crp-hero-points {
		margin-left: auto;
		margin-right: auto;
	}

	.crp-hero-points {
		display: inline-block;
		text-align: left;
	}

	.crp-cta {
		padding: 1.75rem;
		text-align: center;
	}
}