/* ----------------  */
/* Custom Properties */
/* ----------------  */

:root {
	--clr-neutral-900: 0 0% 0%;
	--clr-neutral-400: 0 0% 75%;
	--clr-neutral-0: 0 100% 100%;

	--clr-navy-950: 216 53% 9%;
	--clr-navy-900: 218 28% 13%;
	--clr-navy-850: 217 28% 15%;
	--clr-navy-800: 219 30% 18%;
	--clr-navy-50: 222 36% 91%;

	--clr-blue-300: 177 67% 63%;
	--clr-blue-250: 186 61% 72%;

	--clr-red-500: 0 100% 63%;

	--gradient: linear-gradient(
		90deg,
		hsl(175 68% 64%) 0%,
		hsl(198 60% 50%) 100%
	);

	--fs-600: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
	--fs-500: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
	--fs-400: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
	--fs-300: 0.875rem;
	--fs-200: 0.75rem;
	--fs-100: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem);
	--fs-50: 0.4375rem;

	--ff-sans-accent: 'Raleway', sans-serif;
	--ff-sans-normal: 'Open Sans', sans-serif;

	--fw-700: 700;
	--fw-400: 400;

	/* Text Presets as CSS Variables */
	--text-preset-1: var(--fw-700) var(--fs-600)/1.2 var(--ff-sans-accent);
	--text-preset-2: var(--fw-700) var(--fs-500)/1.2 var(--ff-sans-accent);
	--text-preset-3: var(--fw-700) var(--fs-400)/1.2 var(--ff-sans-accent);
	--text-preset-4: var(--fw-700) var(--fs-300)/1.2 var(--ff-sans-accent);
	--text-preset-5: var(--fw-700) var(--fs-200)/1.2 var(--ff-sans-accent);
	--text-preset-6: var(--fw-400) var(--fs-500)/1.5 var(--ff-sans-normal);
	--text-preset-7: var(--fw-400) var(--fs-400)/1.5 var(--ff-sans-normal);
	--text-preset-8: var(--fw-400) var(--fs-300)/1.5 var(--ff-sans-normal);
	--text-preset-9: var(--fw-400) var(--fs-100)/1.8 var(--ff-sans-normal);
	--text-preset-10: var(--fw-400) var(--fs-50)/1.5 var(--ff-sans-normal);

	--spacing-1400: 7rem;
	--spacing-1300: 6.5rem;
	--spacing-1200: 6rem;
	--spacing-1100: 5.5rem;
	--spacing-1000: 5rem;
	--spacing-900: 4.5rem;
	--spacing-800: 4rem;
	--spacing-700: 3.5rem;
	--spacing-600: 3rem;
	--spacing-500: 2.5rem;
	--spacing-400: 2rem;
	--spacing-300: 1.5rem;
	--spacing-200: 1rem;
	--spacing-150: 0.625rem;
	--spacing-100: 0.5rem;
	--spacing-0: 0rem;

	--radius-full: 999px;
	--radius-28: 28px;
	--radius-24: 24px;
	--radius-20: 20px;
	--radius-16: 16px;
	--radius-12: 12px;
	--radius-10: 10px;
	--radius-8: 8px;
	--radius-6: 6px;
	--radius-4: 4px;
	--radius-0: 0px;
}

/* ----------------  */
/* Reset             */
/* ----------------  */

*,
*::before,
*::after {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

* {
	padding: 0;
	margin: 0;
}

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	block-size: 100%;
}

img,
iframe,
audio,
video,
canvas {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

svg {
	max-inline-size: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

textarea {
	resize: vertical;
}

fieldset,
iframe {
	border: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
	font-variant-numeric: proportional-nums;
	font-weight: var(--fw-400);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-variant-numeric: lining-nums;
	font-weight: var(--fw-400);
}

input,
label,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.1;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
	margin: 0;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

body {
	font: var(--text-preset-8);
	background-color: hsl(var(--clr-navy-800));
	color: hsl(var(--clr-neutral-0));
	padding-block-start: var(--spacing-500);
	display: grid;
	align-items: center;
	margin: 0;
	min-block-size: 100%;
}

main {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------  */
/* Utility Classes    */
/* -----------------  */

/* General */
.flow > *:where(:not(:first-child)) {
	margin-inline-start: var(--flow-space, 1rem);
}

.flow--space-small {
	--flow-space: 0.75rem;
}

.center-grid {
	display: grid;
	place-items: center;
}

.wrapper {
	padding-inline: 2em;
	margin-inline: auto;
	max-width: 80rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Colors */
.clr-navy-800 {
	background-color: hsl(var(--clr-navy-800));
}
.clr-navy-850 {
	background-color: hsl(var(--clr-navy-850));
}
.clr-navy-900 {
	background-color: hsl(var(--clr-navy-900));
}
.clr-navy-950 {
	background-color: hsl(var(--clr-navy-950));
}

/* Typography */

.fw-700 {
	font-weight: var(--fw-700);
}

.fw-400 {
	font-weight: var(--fw-400);
}

h1 {
	font: var(--text-preset-1);
}

h2 {
	font: var(--text-preset-2);
}

/* ----------------  */
/* Components        */
/* ----------------  */

/* Navbar */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

header .logo {
	width: 80px;
}

nav ul {
	display: flex;
	gap: var(--spacing-500);
}

nav li a {
	color: hsl(var(--clr-neutral-0));
	font: var(--text-preset-5);
}

nav li a:hover {
	font-weight: var(--fw-700);
}

@media (max-width: 23em) {
	nav ul {
		gap: var(--spacing-300);
	}
}

@media (min-width: 40em) {
	header .logo {
		width: 137px;
	}

	nav ul {
		gap: var(--spacing-700);
	}

	nav li a {
		font: var(--text-preset-3);
		font-weight: var(--fw-400);
	}
}

@media (min-width: 60em) {
	header .logo {
		width: auto;
	}
}

/* Button */
.primary {
	--btn-color: hsl(var(--clr-neutral-0));
}

.button {
	background: hsl(var(--clr-blue-250));
	border: none;
	border-radius: var(--radius-28);
	color: var(--btn-color);
	cursor: pointer;
	font: var(--text-preset-3);
	text-transform: capitalize;
	padding: var(--spacing-200);
	z-index: 1;
	position: relative;
}

.button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient);
	border-radius: var(--radius-28);
	z-index: -1;
	transition: opacity 0.3s ease;
}

.button:hover::before,
.button:focus::before,
.button:focus-visible::before {
	opacity: 0;
}

.button:focus-visible {
	outline: 2px solid hsl(var(--clr-blue-300));
	outline-offset: 3px;
}

/* Testimony Card */

.testimony-card {
	background-color: hsl(var(--clr-navy-800));
	padding: var(--spacing-400) var(--spacing-300);
	position: relative;
	font: var(--text-preset-9);
}

.testimony-card:first-of-type::before {
	content: '';
	background-image: url('./images/bg-quotes.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 32px;
	height: 50px;
	top: -20px;
	left: 10px;
	position: absolute;
	z-index: -1;
}

@media (min-width: 40em) {
	.testimony-card {
		padding: var(--spacing-500);
	}

	.testimony-card:first-of-type::before {
		width: 55px;
		height: 45px;
		top: -35px;
		left: -15px;
		z-index: 1;
	}
}

.testimony-writer {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: var(--spacing-100);
}

.testimony-img {
	border-radius: var(--radius-full);
	width: 1.5rem;
}

.testimony-writer-name {
	font: var(--text-preset-9);
}

.testimony-writer-name strong {
	font-weight: var(--fw-700);
}

.testimony-writer-description {
	font: var(--text-preset-10);
}

/* CTA */

.cta-link {
	display: inline-flex;
	align-items: center;
	color: hsl(var(--clr-blue-300));
	gap: var(--spacing-100);
	border-bottom: 1px solid currentColor;
	padding-block-end: 2px;
	transition: border-color 0.3s ease;
	width: max-content;
}

.cta-link:hover,
.cta-link:focus-visible {
	border-bottom-color: hsl(var(--clr-neutral-0));
	color: hsl(var(--clr-neutral-0));
	outline: 2px solid hsl(var(--clr-blue-300));
	outline-offset: 3px;
}

.cta-link:hover svg path,
.cta-link:hover svg use {
	fill: white;
}

.cta-link span {
	display: flex;
	align-items: center;
}

/* Footer */

address {
	font: var(--text-preset-7);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-100);
}

.footer-location,
.footer-phone,
.contact-link {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--spacing-400);
}

.contact-link {
	color: hsl(var(--clr-neutral-0));
}

.contact-link:hover {
	text-decoration: underline;
}

address span {
	height: 24px;
}

.svg-container svg {
	width: 24px;
}

.footer-logo {
	width: 108px;
}

/* ----------------  */
/* Page Specific     */
/* ----------------  */

/* ----------------  */
/* Layout            */
/* ----------------  */

.hero {
	margin-block-start: var(--spacing-600);
	max-width: 735px;
	margin-inline: auto;
}

.hero-text {
	margin-block-start: var(--spacing-900);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-300);
	text-align: center;
}

.hero-title {
	max-width: 35ch;
	margin-inline: auto;
}

.hero-paragraph {
	font: var(--text-preset-6);
	max-width: 45ch;
	margin-inline: auto;
}

.hero button {
	margin-inline: auto;
	width: 80%;
	max-width: 280px;
}

.hero-wrapper {
	background-image: url('./images/bg-curvy-mobile.svg');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
}

@media (min-width: 40em) {
	.hero-wrapper {
		background-image: url('./images/bg-curvy-desktop.svg');
	}
}

.features {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--spacing-1000);
	padding-block-start: 160px;
	margin-block-end: 10rem;
}

.feature-img {
	margin-inline: auto;
	height: 80px;
}

.feature-paragraph {
	max-width: 40ch;
	margin-inline: auto;
}

.feature h2 {
	margin-block: var(--spacing-500) var(--spacing-100);
}

.testimony-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--spacing-500);
	margin-inline: auto;
}

@media (40em <= width < 60em) {
	.testimony-cards {
		max-width: 450px;
	}
}

.cta {
	display: flex;
	flex-direction: column;
	max-width: 41.25em;
	margin-inline: auto;
	gap: var(--spacing-600);
	margin-block-end: 10rem;
}

.cta-img {
	margin-inline: auto;
}

.cta-text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-300);
	font: var(--text-preset-7);
}

.cta-title {
	font: var(--text-preset-1);
}

@media (min-width: 60em) {
	.cta {
		max-width: unset;
		flex-direction: row;
		gap: var(--spacing-700);
		width: 100%;
	}

	.cta-text {
		flex: 0 1 auto;
		max-width: 80%;
		align-self: center;
	}

	.cta-title {
		max-width: 20ch;
	}

	.cta-img {
		flex: 1;
		width: auto;
		max-width: 100%;
	}

	.cta-img img {
		width: 100%;
		height: auto;
	}
}

.colour-wrapper {
	padding-block-end: 326px;
}

@media (min-width: 40em) {
	.colour-wrapper {
		padding-block-end: 260px;
	}
}

.signup {
	--signup-height: 367px;
	background-color: hsl(var(--clr-navy-850));
	padding: var(--spacing-500) var(--spacing-300);
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	min-width: 240px;
	width: calc(100% - 4em);
	bottom: calc(var(--signup-height) / -2);
}

.signup h2 {
	margin-block-end: var(--spacing-100);
}

.signup p {
	font: var(--text-preset-8);
}

.signup form {
	margin-block-start: var(--spacing-400);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-100);
}

.signup form input {
	text-align: center;
	background: hsl(var(--clr-neutral-0));
	color: hsl(var(--clr-neutral-400));
	border: none;
	border-radius: var(--radius-28);
	font: var(--text-preset-8);
	padding: var(--spacing-200);
}

.signup form input:focus {
	outline: 2px solid hsl(var(--clr-blue-300));
	outline-offset: 2px;
}

.signup-error {
	color: hsl(var(--clr-red-500));
	font: var(--text-preset-9);
	font-weight: var(--fw-700);
	display: block;
	min-height: 1.5em;
}

.signup form input[aria-invalid='true'] {
	outline: 2px solid hsl(var(--clr-red-500));
	outline-offset: 2px;
}

@media (min-width: 40em) {
	.signup {
		--signup-height: 357px;
		padding: var(--spacing-600) var(--spacing-500);
		max-width: 450px;
	}

	.signup h2 {
		font: var(--text-preset-1);
	}
}

@media (min-width: 60em) {
	.signup {
		--signup-height: 271px;
		padding: var(--spacing-600) var(--spacing-1000);
		max-width: 860px;
	}

	.signup form {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'input  button'
			'error  .';
		gap: var(--spacing-300);
		row-gap: var(--spacing-100);
		align-items: center;
	}

	.signup-error {
		grid-area: error;
		text-align: left;
	}

	.signup form input {
		grid-area: input;
		flex: 0 0 60%;
	}

	.signup form button {
		grid-area: button;
		flex: 0 0 40%;
	}

	.signup form input,
	.signup form button {
		padding-block: var(--spacing-200);
		line-height: 1.5;
	}
}

/* Footer */

footer {
	background-color: hsl(var(--clr-navy-950));
	padding-block-start: 260px;
	padding-block-end: var(--spacing-500);
}

.footer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-500);
	margin-block-start: var(--spacing-1000);
}

.footer-logo {
	width: 108px;
}

.footer-nav {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-500);
}

.footer-nav ul {
	display: block;
}

.footer-nav li {
	margin-block-end: var(--spacing-100);
}

.footer-socials {
	display: flex;
	gap: var(--spacing-100);
	margin-inline: auto;
}

.footer-socials li {
	border: 1px solid hsl(var(--clr-neutral-0));
	border-radius: var(--radius-full);
	aspect-ratio: 1/1;
	width: 32px;
	height: 32px;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.footer-socials li a {
	width: 100%;
	height: 100%;
}

.icon-tabler {
	stroke: hsl(var(--clr-neutral-0));
	width: auto;
	height: 20px;
	transition: stroke 0.3s ease;
}

.footer-socials li:hover,
.footer-socials li:has(a:focus-visible) {
	border-color: hsl(var(--clr-blue-300));
}

.footer-socials li:hover .icon-tabler,
.footer-socials li:has(a:focus-visible) .icon-tabler {
	stroke: hsl(var(--clr-blue-300));
}

.footer-socials a:focus-visible {
	outline: none;
	border-radius: var(--radius-full);
}

@media (min-width: 40em) {
	.footer {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--spacing-1400);
	}

	.footer-logo {
		grid-column: span 2;
	}

	.footer-address {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--spacing-1400);
		grid-column: span 2;
	}

	.footer-location {
		grid-row: span 2;
	}

	.footer-nav {
		flex-direction: row;
		gap: var(--spacing-1000);
	}

	.footer-nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-200);
	}

	.footer-nav li {
		margin-block-end: unset;
	}

	.footer-socials {
		margin-inline: unset;
	}
}

@media (min-width: 68em) {
	footer {
		padding-block-start: 162px;
	}

	.footer {
		grid-template-columns: repeat(4, auto);
	}

	.footer-logo {
		grid-column: span 3;
	}

	.footer-address {
		column-gap: var(--spacing-500);
	}
}