/* =========================================================
   ANJ DIGITAL HOMEPAGE
   ========================================================= */


/* SHARED
--------------------------------------------------------- */

.home-redesign {
	--anj-pink: #f2849e;
	--anj-blue: #7ecaf6;
	--anj-teal: #7bd0c1;
	--anj-magenta: #c75b9b;
	--anj-purple: #ae85ca;
	--anj-dark: #585858;
}

.home-section-label {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 1.4em;
}

.home-section-label > span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			var(--anj-pink),
			var(--anj-blue)
		);

	color: #ffffff;

	font-size: 0.62em;
	font-weight: 900;
}

.home-section-label p {
	margin: 0;
	font-size: 0.65em;
	font-weight: 900;
	letter-spacing: 0.2em;
}

.home-section-label--light p {
	color: rgba(255,255,255,0.72);
}

.home-eyebrow {
	display: block;
	margin-bottom: 1.3em;

	color: var(--anj-pink);

	font-size: 0.65em;
	font-weight: 900;
	letter-spacing: 0.22em;
}


/* HERO
--------------------------------------------------------- */

.home-hero {
	position: relative;

	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);

	gap: 5em;
	align-items: center;

	margin: 1em 0 7em;
	padding: 5em;

	border: 1px solid #e5e5e5;
	border-radius: 26px;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 96% 5%,
			rgba(126,202,246,0.19),
			transparent 29%
		),
		radial-gradient(
			circle at 5% 95%,
			rgba(242,132,158,0.17),
			transparent 34%
		),
		#ffffff;
}

.home-hero::before {
	content: '';

	position: absolute;

	right: -170px;
	top: -190px;

	width: 500px;
	height: 500px;

	border-radius: 50%;

	border: 1px solid rgba(126,202,246,0.22);

	box-shadow:
		0 0 0 50px rgba(126,202,246,0.035),
		0 0 0 100px rgba(242,132,158,0.025);
}

.home-hero > * {
	position: relative;
	z-index: 2;
}

.home-hero h1 {
	max-width: 900px;

	margin-bottom: 0.55em;

	font-size: clamp(3.6em, 6vw, 6em);

	line-height: 0.96;
	letter-spacing: -0.045em;
}

.home-hero h1 > span {
	display: block;

	margin-top: 0.12em;

	background:
		linear-gradient(
			90deg,
			var(--anj-pink),
			var(--anj-purple),
			var(--anj-blue)
		);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.home-hero__lead {
	max-width: 760px;

	margin-bottom: 0.8em;

	font-size: 1.18em;
	line-height: 1.7;
}

.home-hero__support {
	max-width: 760px;

	margin-bottom: 2em;

	line-height: 1.75;
}


/* HERO SYSTEM
--------------------------------------------------------- */

.home-hero__system {
	padding: 2em;

	border-radius: 22px;

	background: var(--anj-dark);

	color: #ffffff;

	box-shadow:
		0 28px 65px rgba(88,88,88,0.2);
}

.home-system__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 1.8em;
}

.home-system__top > span {
	font-size: 0.62em;
	font-weight: 900;
	letter-spacing: 0.2em;
}

.home-system__top strong {
	color: var(--anj-teal);

	font-size: 0.65em;
	letter-spacing: 0.1em;
}

.home-system__core {
	display: flex;
	justify-content: center;
	align-items: center;

	gap: 0.7em;

	margin-bottom: 1.4em;
	padding: 1.5em;

	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			rgba(242,132,158,0.12),
			rgba(174,133,202,0.1),
			rgba(126,202,246,0.12)
		);

	border: 1px solid rgba(255,255,255,0.12);

	font-size: 0.72em;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.home-system__core span:nth-of-type(1) {
	color: var(--anj-pink);
}

.home-system__core span:nth-of-type(2) {
	color: var(--anj-blue);
}

.home-system__core span:nth-of-type(3) {
	color: var(--anj-teal);
}

.home-system__services {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 0.8em;
}

.home-system__services > div {
	padding: 1.2em;

	border-radius: 12px;

	background: rgba(255,255,255,0.06);

	border: 1px solid rgba(255,255,255,0.1);
}

.home-system__services span {
	display: block;

	margin-bottom: 0.8em;

	color: var(--anj-pink);

	font-size: 0.62em;
	font-weight: 900;
}

.home-system__services > div:nth-child(2) span {
	color: var(--anj-blue);
}

.home-system__services > div:nth-child(3) span {
	color: var(--anj-teal);
}

.home-system__services > div:nth-child(4) span {
	color: var(--anj-purple);
}

.home-system__services strong {
	display: block;

	color: #ffffff;
}

.home-system__services p {
	margin: 0.2em 0 0;

	color: rgba(255,255,255,0.62);

	font-size: 0.75em;
}

.home-system__bottom {
	margin-top: 1.2em;
	padding-top: 1em;

	border-top: 1px solid rgba(255,255,255,0.13);
}

.home-system__bottom span {
	color: rgba(255,255,255,0.55);

	font-size: 0.6em;
	font-weight: 900;
	letter-spacing: 0.15em;
}


/* SERVICES INTRO
--------------------------------------------------------- */

.home-services-intro {
	margin-bottom: 6em;
}

.home-services-intro__grid {
	display: grid;

	grid-template-columns: 0.85fr 1.15fr;

	gap: 5em;
}

.home-services-intro h2 {
	margin: 0;

	font-size: 2.5em;
	line-height: 1.18;
}

.home-services-intro p {
	font-size: 1.05em;
	line-height: 1.8;
}


/* SEO
--------------------------------------------------------- */

.home-seo {
	margin-bottom: 7em;
	padding: 4.5em;

	border-radius: 24px;

	background: var(--anj-dark);

	color: #ffffff;
}

.home-seo h2,
.home-seo h3 {
	color: #ffffff;
}

.home-section-heading {
	max-width: 820px;

	margin-bottom: 3em;
}

.home-section-heading h2 {
	margin-bottom: 0.7em;

	font-size: 2.55em;
}

.home-section-heading p {
	line-height: 1.75;
}

.home-seo .home-section-heading p {
	color: rgba(255,255,255,0.75);
}

.home-seo__grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 1px;

	border: 1px solid rgba(255,255,255,0.13);

	border-radius: 18px;

	background: rgba(255,255,255,0.13);

	overflow: hidden;
}

.home-seo-card {
	display: flex;
	flex-direction: column;

	min-height: 370px;

	padding: 2.3em;

	border: 0;

	background: var(--anj-dark);
}

.home-seo-card:hover {
	background: #616161;
}

.home-seo-card__number {
	display: block;

	margin-bottom: 2em;

	color: var(--anj-pink);

	font-size: 0.68em;
	font-weight: 900;
}

.home-seo-card:nth-child(2) .home-seo-card__number {
	color: var(--anj-blue);
}

.home-seo-card:nth-child(3) .home-seo-card__number {
	color: var(--anj-teal);
}

.home-card-eyebrow {
	display: block;

	margin-bottom: 0.8em;

	color: rgba(255,255,255,0.5);

	font-size: 0.6em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.home-seo-card h3 {
	margin: 0 0 0.7em;

	font-size: 1.35em;
}

.home-seo-card p {
	color: rgba(255,255,255,0.7);
}

.home-seo-card > strong {
	margin-top: auto;

	color: #ffffff;

	font-size: 0.7em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* WEB DESIGN
--------------------------------------------------------- */

.home-webdesign {
	display: grid;

	grid-template-columns: 0.9fr 1.1fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 7em;

	padding: 4.5em;

	border-radius: 24px;

	background:
		linear-gradient(
			125deg,
			rgba(242,132,158,0.1),
			rgba(174,133,202,0.08),
			rgba(126,202,246,0.11)
		);

	border: 1px solid #e5e5e5;
}

.home-webdesign__copy h2 {
	margin-bottom: 0.7em;

	font-size: 2.6em;
	line-height: 1.12;
}

.home-webdesign__copy h2 span {
	display: block;

	color: var(--anj-pink);
}

.home-webdesign__copy p {
	line-height: 1.75;
}

.home-inline-link {
	display: inline-block;

	margin-top: 0.8em;

	border: 0;

	font-size: 0.75em;
	font-weight: 900;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.home-inline-link span {
	margin-left: 0.4em;

	color: var(--anj-pink);
}


/* CSS WEBSITE MOCKUP
--------------------------------------------------------- */

.home-site-window {
	border-radius: 20px;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid #dddddd;

	box-shadow: 0 26px 60px rgba(88,88,88,0.14);
}

.home-site-window__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0.9em 1.1em;

	background: var(--anj-dark);
}

.home-site-window__top > div {
	display: flex;
	gap: 0.4em;
}

.home-site-window__top > div span {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: rgba(255,255,255,0.34);
}

.home-site-window__top strong {
	color: rgba(255,255,255,0.65);

	font-size: 0.57em;
	letter-spacing: 0.12em;
}

.home-site-window__content {
	padding: 1.2em;
}

.home-site-window__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 0.9em;
}

.home-site-window__nav > i {
	width: 80px;
	height: 12px;

	border-radius: 100px;

	background: var(--anj-dark);
}

.home-site-window__nav > div {
	display: flex;

	gap: 0.4em;
}

.home-site-window__nav span {
	width: 38px;
	height: 6px;

	border-radius: 100px;

	background: #dedede;
}

.home-site-window__hero {
	min-height: 250px;

	padding: 2.2em;

	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			rgba(242,132,158,0.18),
			rgba(174,133,202,0.11),
			rgba(126,202,246,0.16)
		);
}

.home-site-window__hero > span {
	display: block;

	margin-bottom: 0.8em;

	color: var(--anj-pink);

	font-size: 0.56em;
	font-weight: 900;
	letter-spacing: 0.15em;
}

.home-site-window__hero h3 {
	max-width: 300px;

	margin-bottom: 1em;

	font-size: 1.6em;
	line-height: 1.15;
}

.home-site-window__hero i {
	display: block;

	width: 95px;
	height: 9px;

	border-radius: 100px;

	background: var(--anj-dark);
}

.home-site-window__cards {
	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 0.7em;

	margin-top: 0.8em;
}

.home-site-window__cards span {
	height: 70px;

	border-radius: 9px;

	background: #f4f4f4;
}


/* PAID ADVERTISING
--------------------------------------------------------- */

.home-paid {
	margin-bottom: 7em;
}

.home-paid__grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 1.3em;
}

.home-paid-card {
	display: flex;
	flex-direction: column;

	min-height: 330px;

	padding: 2.2em;

	border: 1px solid #e4e4e4;

	border-radius: 18px;

	background: #ffffff;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.home-paid-card:hover {
	transform: translateY(-5px);

	box-shadow: 0 22px 50px rgba(88,88,88,0.1);
}

.home-paid-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 2em;
}

.home-paid-card__top > span {
	color: var(--anj-pink);

	font-size: 0.68em;
	font-weight: 900;
}

.home-paid-card:nth-child(2) .home-paid-card__top > span {
	color: var(--anj-blue);
}

.home-paid-card:nth-child(3) .home-paid-card__top > span {
	color: var(--anj-teal);
}

.home-paid-card__top strong {
	color: #aaaaaa;

	font-size: 0.6em;
	letter-spacing: 0.12em;
}

.home-paid-card h3 {
	margin: 0 0 0.7em;

	font-size: 1.35em;
}

.home-paid-card p {
	margin-bottom: 1.5em;
}

.home-paid-card__link {
	margin-top: auto;

	color: var(--anj-dark);

	font-size: 0.7em;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* MEASUREMENT
--------------------------------------------------------- */

.home-measurement {
	margin-bottom: 7em;

	padding: 4.5em;

	border-radius: 24px;

	background: var(--anj-dark);

	color: #ffffff;
}

.home-measurement h2,
.home-measurement h3 {
	color: #ffffff;
}

.home-measurement__intro {
	max-width: 820px;

	margin-bottom: 3em;
}

.home-measurement__intro h2 {
	margin-bottom: 0.7em;

	font-size: 2.55em;
}

.home-measurement__intro p {
	color: rgba(255,255,255,0.74);
}

.home-measurement__cards {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 1.3em;
}

.home-measurement-card {
	display: grid;

	grid-template-columns: 0.75fr 1.25fr;

	gap: 2em;
	align-items: center;

	padding: 2em;

	border: 1px solid rgba(255,255,255,0.12);

	border-radius: 18px;

	background: rgba(255,255,255,0.055);
}

.home-measurement-card:hover {
	background: rgba(255,255,255,0.08);
}

.home-measurement-card__visual {
	padding: 1.2em;

	border-radius: 14px;

	background: rgba(255,255,255,0.06);
}

.home-mini-chart {
	display: flex;
	align-items: flex-end;

	gap: 0.45em;

	height: 150px;
}

.home-mini-chart i {
	flex: 1;

	border-radius: 5px 5px 2px 2px;

	background:
		linear-gradient(
			to top,
			var(--anj-pink),
			var(--anj-blue)
		);
}

.home-measurement-card__copy > span {
	display: block;

	margin-bottom: 0.9em;

	color: var(--anj-pink);

	font-size: 0.62em;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.home-measurement-card:nth-child(2) .home-measurement-card__copy > span {
	color: var(--anj-blue);
}

.home-measurement-card__copy h3 {
	margin-bottom: 0.65em;

	font-size: 1.35em;
}

.home-measurement-card__copy p {
	color: rgba(255,255,255,0.7);
}

.home-measurement-card__copy strong {
	color: #ffffff;

	font-size: 0.7em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-measurement-card__visual--ab {
	display: grid;

	grid-template-columns: 1fr auto 1fr;

	gap: 0.6em;
	align-items: center;
}

.home-measurement-card__visual--ab > strong {
	color: rgba(255,255,255,0.45);

	font-size: 0.65em;
}

.home-ab-box {
	padding: 1em;

	border-radius: 10px;

	background: rgba(255,255,255,0.07);
}

.home-ab-box span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	margin-bottom: 1em;

	border-radius: 50%;

	background: var(--anj-pink);

	color: #ffffff;

	font-size: 0.68em;
	font-weight: 900;
}

.home-ab-box--b span {
	background: var(--anj-blue);
}

.home-ab-box i {
	display: block;

	height: 7px;

	border-radius: 100px;

	background: rgba(255,255,255,0.16);
}


/* TOOLS
--------------------------------------------------------- */

.home-tools {
	display: grid;

	grid-template-columns: 1.15fr 0.85fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 7em;

	padding: 4.5em;

	border-radius: 24px;

	background:
		linear-gradient(
			125deg,
			var(--anj-pink),
			var(--anj-purple),
			var(--anj-blue)
		);

	color: #ffffff;
}

.home-tools h2 {
	margin-bottom: 0.7em;

	color: #ffffff;

	font-size: 2.5em;
}

.home-tools h2 span {
	display: block;
}

.home-tools__eyebrow {
	display: block;

	margin-bottom: 1em;

	font-size: 0.65em;
	font-weight: 900;
	letter-spacing: 0.2em;
}

.home-tools p {
	max-width: 760px;

	color: rgba(255,255,255,0.88);
}

.home-tools__button {
	margin-top: 0.8em;

	color: #ffffff !important;

	box-shadow:
		inset 0 0 0 2px #ffffff !important;
}

.home-tools__button:hover {
	background: #ffffff;

	color: var(--anj-dark) !important;
}

.home-tools__visual {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 0.8em;
}

.home-tool-chip {
	padding: 1.3em;

	border-radius: 14px;

	background: rgba(255,255,255,0.11);

	border: 1px solid rgba(255,255,255,0.2);
}

.home-tool-chip span {
	display: block;

	margin-bottom: 0.7em;

	color: rgba(255,255,255,0.7);

	font-size: 0.62em;
	font-weight: 900;
}

.home-tool-chip strong {
	color: #ffffff;
}


/* LOCAL
--------------------------------------------------------- */

.home-local {
	display: grid;

	grid-template-columns: 0.95fr 1.05fr;

	gap: 5em;
	align-items: center;

	margin-bottom: 7em;
}

.home-local__copy h2 {
	margin-bottom: 0.7em;

	font-size: 2.5em;
}

.home-local__copy h2 span {
	display: block;

	color: var(--anj-pink);
}

.home-local__copy p {
	line-height: 1.75;
}

.home-local__markets {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 1em;
}

.home-local__markets > div {
	min-height: 135px;

	padding: 1.5em;

	border: 1px solid #e4e4e4;

	border-radius: 16px;

	background: #ffffff;
}

.home-local__markets span {
	display: block;

	margin-bottom: 1em;

	color: var(--anj-pink);

	font-size: 0.65em;
	font-weight: 900;
}

.home-local__markets > div:nth-child(2) span {
	color: var(--anj-blue);
}

.home-local__markets > div:nth-child(3) span {
	color: var(--anj-teal);
}

.home-local__markets > div:nth-child(4) span {
	color: var(--anj-purple);
}

.home-local__markets strong {
	font-size: 1.1em;
}


/* FINAL CTA
--------------------------------------------------------- */

.home-final-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 4em;

	margin-bottom: 5em;

	padding: 4em;

	border-radius: 22px;

	background:
		linear-gradient(
			110deg,
			rgba(242,132,158,0.11),
			rgba(174,133,202,0.09),
			rgba(126,202,246,0.12)
		);

	border: 1px solid #e4e4e4;
}

.home-final-cta > div {
	max-width: 800px;
}

.home-final-cta > div > span {
	display: block;

	margin-bottom: 1em;

	color: var(--anj-pink);

	font-size: 0.65em;
	font-weight: 900;
	letter-spacing: 0.18em;
}

.home-final-cta h2 {
	margin-bottom: 0.55em;

	font-size: 2.45em;
}

.home-final-cta p {
	margin: 0;
}

.home-final-cta__button {
	flex: 0 0 auto;
}


/* TABLET
--------------------------------------------------------- */

@media screen and (max-width: 980px) {

	.home-hero,
	.home-services-intro__grid,
	.home-webdesign,
	.home-tools,
	.home-local {
		grid-template-columns: 1fr;

		gap: 2.5em;
	}

	.home-seo__grid,
	.home-paid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-measurement__cards {
		grid-template-columns: 1fr;
	}

	.home-measurement-card {
		grid-template-columns: 0.55fr 1.45fr;
	}

	.home-final-cta {
		flex-direction: column;
		align-items: flex-start;
	}

}


/* MOBILE
--------------------------------------------------------- */

@media screen and (max-width: 736px) {

	.home-hero {
		margin-bottom: 4em;
		padding: 2.2em 1.5em;

		border-radius: 16px;
	}

	.home-hero h1 {
		font-size: 2.8em;
	}

	.home-services-intro,
	.home-seo,
	.home-webdesign,
	.home-paid,
	.home-measurement,
	.home-tools,
	.home-local {
		margin-bottom: 4em;
	}

	.home-seo,
	.home-webdesign,
	.home-measurement,
	.home-tools,
	.home-final-cta {
		padding: 2em 1.5em;

		border-radius: 15px;
	}

	.home-seo__grid,
	.home-paid__grid,
	.home-local__markets,
	.home-tools__visual {
		grid-template-columns: 1fr;
	}

	.home-seo-card,
	.home-paid-card {
		min-height: auto;
	}

	.home-measurement-card {
		grid-template-columns: 1fr;
	}

	.home-section-heading h2,
	.home-webdesign__copy h2,
	.home-measurement__intro h2,
	.home-tools h2,
	.home-local__copy h2,
	.home-final-cta h2 {
		font-size: 1.85em;
	}

	.home-final-cta {
		margin-bottom: 4em;
	}

	.home-final-cta__button {
		width: 100%;
	}

}


/* SMALL MOBILE
--------------------------------------------------------- */

@media screen and (max-width: 480px) {

	.home-hero h1 {
		font-size: 2.4em;
	}

	.home-system__services {
		grid-template-columns: 1fr;
	}

	.home-measurement-card__visual--ab {
		grid-template-columns: 1fr;
	}

	.home-measurement-card__visual--ab > strong {
		text-align: center;
	}

}

/* =========================================================
   HOMEPAGE TYPOGRAPHY REFINEMENT
   ========================================================= */

/* Main homepage H1 */
.home-redesign h1 {
	font-size: clamp(2.9em, 4.4vw, 4.5em);
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-transform: none;
}


/* Main section headings */
.home-redesign h2 {
	font-size: clamp(1.85em, 2.8vw, 2.65em);
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-transform: none;
}


/* Card / subsection headings */
.home-redesign h3 {
	font-size: 1.2em;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
}


/* Keep the hero a little more prominent */
.home-hero h1 {
	font-size: clamp(3em, 4.7vw, 4.7em);
}


/* SEO section */
.home-seo .home-section-heading h2 {
	font-size: clamp(2em, 3vw, 2.7em);
}


/* Web Design section */
.home-webdesign__copy h2 {
	font-size: clamp(2em, 3vw, 2.7em);
}


/* Measurement */
.home-measurement__intro h2 {
	font-size: clamp(2em, 3vw, 2.7em);
}


/* Tools */
.home-tools h2 {
	font-size: clamp(2em, 3vw, 2.7em);
}


/* Local */
.home-local__copy h2 {
	font-size: clamp(2em, 3vw, 2.7em);
}


/* Final CTA */
.home-final-cta h2 {
	font-size: clamp(1.9em, 2.8vw, 2.5em);
}


/* Card headings */
.home-seo-card h3,
.home-paid-card h3,
.home-measurement-card__copy h3 {
	font-size: 1.2em;
}


/* Mobile refinement */
@media screen and (max-width: 736px) {

	.home-redesign h1 {
		font-size: 2.45em;
	}

	.home-redesign h2 {
		font-size: 1.75em;
	}

	.home-redesign h3 {
		font-size: 1.1em;
	}

}


/* Small mobile */
@media screen and (max-width: 480px) {

	.home-redesign h1 {
		font-size: 2.15em;
	}

	.home-redesign h2 {
		font-size: 1.6em;
	}

}