* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

section {
	display: block;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	margin-bottom: 200px;
}

.section-heading {
	font-size: var(--rem-4xl);
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.link-arrow {
	width: 14px;
	height: 14px;
	background-image: url(/img/arrow-right-icon.svg);
	background-repeat: no-repeat;
	background-size: contain;
	translate: 0 1px;
}


#hero {

	.hero-block {
		width: 100%;
		background-color: #F7F0D6;
		border-radius: 8px;
		margin-bottom: var(--rem-2xl);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 0;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
		overflow: hidden;
	}

	.text-wrap {
		display: flex;
		flex-direction: column;
		width: 50%;
		padding: 64px 80px;
		padding-right: 0;
	}

	h1 {
		font-size: var(--rem-5xl);
		margin-bottom: var(--rem-base);
	}

	p {
		font-size: var(--rem-base);
		max-width: 600px;
		margin: 0 auto;
		line-height: 1.6;
	}

	.image-wrap {
		width: 50%;
		height: 500px;
		background-image: url(/img/edge-hero-image.webp);
		background-repeat: no-repeat;
		background-position: right;
		background-size: contain;
	}

	.image-wrap img {
		max-width: 100%;
		height: 100%;
		object-fit: cover;
	}

}



#intro {
	position: relative;
	background-color: #FDF5D2;
	border: 1px solid #F7F3E7;
	border-radius: 8px;
	padding: 64px;

	.intro-block {
		margin: 0 auto;
		width: 100%;
		max-width: 800px;

		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.intro-block::after {
		content: " ";
		position: absolute;
		right: 32px;
		top: 32px;
		width: 32px;
		height: 32px;
		border-radius: 4px;
		border: 8px solid #F3EBC7;
		border-bottom: 0;
		border-left: 0;
	}

	h2 {
		text-align: left;
	}

	p {
		text-align: left;
		font-size: var(--rem-l);
		line-height: 1.6;
	}
}


#products {

	.products-block {
		width: 100%;
	}

	.products-block .header {
		display: flex;
		flex-direction: column;
		gap: var(--rem-base);
		margin-bottom: var(--rem-base);
	}

	.products-row {
		display: flex;
		gap: var(--rem-2xl);
		justify-content: space-between;
		margin: 2rem 0;
	}
	.product {
		position: relative;
		background: #FBF6E6;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.07);
		padding: var(--rem-3xl);
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 24px;
		position: relative;
	}

	.product::after {
		content: " ";
		position: absolute;
		right: 32px;
		top: 32px;
		width: 32px;
		height: 32px;
		border-radius: 4px;
		border: 8px solid #F3ECD3;
		border-bottom: 0;
		border-left: 0;
	}

	.product h3 {
		margin-top: 0;
	}

	.product-logo {
		width: 150px;
		height: 60px;
		object-fit: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.product-logo.mathleaks {
		background-image: url(/img/mathleaks-logo.svg);
	}

	.product-logo.knowgaps {
		background-image: url(/img/knowgaps-logo.svg);
	}

	.product-logo.modus {
		background-image: url(/img/modus-logo.svg);
		width: 120px;
	}

	.product ul {
		text-align: left;
		flex-grow: 1;
		font-family: Poppins, sans-serif;
		font-size: var(--rem-base);
		margin-left: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.product .visit-link {
		height: 16px;
		display: flex;
		gap: 12px;
	}

	.product a,
	.product button {
		color: var(--text-color);
		text-decoration: none;
		font-family: bryant;
		text-align: left;
		font-size: var(--rem-base);
		background-color: transparent;
		border: 0;
		cursor: pointer;
	}
}


#mathvizy {

	.mathvizy-block {
		display: flex;
		flex-direction: row;
		gap: 64px;
	}

	.mathvizy-block .image-wrap {
		width: 50%;
		object-fit: cover;
		border-radius: 8px;
	}

	.mathvizy-block .text-wrap {
		width: 50%;
		gap: 16px;
		display: flex;
		flex-direction: column;
	}
}

#about {

	.about-image {
		width: 400px;
		height: 400px;
		background-image: url(/img/jesper.webp);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		margin: 0 auto;
		margin-bottom: 64px;
		border-radius: 8px;
	}

	.about-block {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.quotation-mark {
		opacity: 0.2;
		width: 64px;
		height: 64px;
		color: var(--text-color);
		position: absolute;
		left: -80px;
		top: -40px;
	}

	.quotation-mark.right {
		left: unset;
		top: unset;
		right: -60px;
		bottom: -40px;
	}


	.about-block p {
		position: relative;
		max-width: 800px;
		margin: 0 auto;
		font-size: 1.35rem;
	}

	.about-block .author {
		font-size: var(--rem-base);
	}
}



#facts {
	.facts-row {
		width: 100%;
		background-color: #FDF5D2;
		border: 1px solid #F7F3E7;
		border-radius: 8px;
		padding: 64px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: var(--rem-2xl);
		font-family: Poppins, sans-serif;
	}

	.fact-wrap {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.fact-icon {
		width: 42px;
		height: 42px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.fact1 .fact-icon {
		background-image: url(/img/founder-icon.svg);
	}

	.fact2 .fact-icon {
		background-image: url(/img/team-icon.svg);
	}

	.fact3 .fact-icon {
		background-image: url(/img/education-icon.svg);
	}
}


#buy {
	position: relative;
	width: 100%;
	background-color: transparent;
	display: flex;
	flex-direction: row;
		
	.bg-shapes {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: 100%;
		z-index: -1;
	}
	
	.image-wrap {
		height: 600px;
		border-radius: 8px;
	}

	.text-wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding-left: 64px;
		gap: 24px;
	}

	.text-wrap h2 {
		font-size: var(--rem-4xl);
	}

	.text-wrap .visit-link {
		display: flex;
		gap: 16px;
	}

	.link-arrow {
		translate: 0 3px;
	}

	.text-wrap .visit-link button {
		font-family: bryant;
		text-decoration: none;
		color: var(--text-color);
		background-color: transparent;
		border: 0;
		font-size: var(--rem-l);
		cursor: pointer;
	}
}


#friends {

	.friends-block {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		padding: 64px;
		margin-bottom: 100px;
		gap: 32px;
	}

	.friends-logos {
		display: flex;
		gap: var(--rem-2xl);
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.friend-logo {
		width: 270px;
		height: 120px;
		object-fit: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		opacity: 0.7;
		transition: opacity 0.3s ease;
	}

	.friend-logo.skolon {
		background-image: url(/img/skolon-logo.webp);
	}

	.friend-logo.swedish-edtech-industry {
		background-image: url(/img/swedish-edtech-industry-logo.webp);
	}

	.friend-logo.liber {
		background-image: url(/img/liber-logo.webp);
	}
}

#news {

	* {
		text-decoration: none;
	}

	.news-image {
		width: 100%;
		max-width: 300px;
		height: auto;
		object-fit: cover;
	}

	img {
        max-height: 200px;
        border-radius: 8px;
	}

	.news-block h2 {
		font-family: bryant;
		font-size: var(--rem-4xl);
	}

	h3 {
		font-family: bryant;
		font-size: var(--rem-l);
	}

	p, a {
		font-family: Poppins;
		font-size: var(--rem-base);
	}

	.news-block {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 100px;
		gap: 32px;
	}

	.news-grid {
		display: flex;
		flex-direction: row;
		gap: var(--rem-2xl);
		justify-content: center;
		max-width: 800px;
        margin: 0 auto;
	}

	article {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}

	article a {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	article .news-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.news-link {
		margin: 0 auto;
	}
}

#work {
	.work-block {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	a.email-link {
		color: #333333;
	}
}

#newsletter {
	width: 100%;
	display: flex;
	flex-direction: row;
	background: transparent;
	padding: 64px 0;
	margin: 0 auto;
	gap: 64px;
	border-top: 1px solid #D6D3C9;
	border-bottom: 1px solid #D6D3C9;

	.text-wrap {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	h3 {
		font-size: var(--rem-2xl);
	}

	.input-wrap {
		width: 50%;
		display: flex;
		justify-content: end;
		align-items: center;
		margin-top: auto;
		gap: 16px;
	}

	input[type="email"] {
		height: 80px;
		padding: 0 48px;
		padding-right: 4px;
		font-size: var(--rem-l);
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 70%;
		font-family: Poppins;
	}

	button {
		height: 80px;
		padding: 0 48px;
		font-size: var(--rem-xl);
		border: none;
		border-radius: 4px;
		background-color: var(--edge-color);
		color: white;
		cursor: pointer;
		font-family: 'bryant';
		white-space: nowrap;
	}
}


@media all and (max-width: 1239px) {
	nav ul {
		gap: var(--rem-base);
	}
	nav a {
		font-size: var(--rem-s);;
	}

	#products {

		.products-row {
			flex-direction: column;
		}
	}

	#news {

		article a {
			flex-direction: row;
			gap: 24px;
		}

		img {
			max-width: 300px;
		}

		.news-grid {
			flex-direction: column;
			align-items: center;
			gap: 48px;	
		}
	}

	#newsletter {

		.input-wrap {
			flex-direction: column;
		}

		input[type="email"] {
			width: 100%;
			height: 60px;
			margin-left: auto;
			padding: 0 16px;
			font-size: var(--rem-base);
		}
		button {
			height: 60px;
			margin-left: auto;
			font-size: var(--rem-l);
		}
	}
}

@media all and (max-width: 904px) {

	#hero {

		.hero-block {
			flex-direction: column-reverse;
		}

		.hero-block .text-wrap,
		.hero-block .image-wrap {
			width: 100%;
			padding: 32px 40px;
		}

		.hero-block .image-wrap {
			height: 200px;
			background-color: #fada6c;
		}

	}


	#intro {

		.intro-text-block {
			padding: 32px;
		}
	}

	#about {

		.about-image {
			width: 300px;
			height: 300px;
		}
	}

	#mathvizy {

		.mathvizy-block {
			flex-direction: column;
		}

		.mathvizy-block .image-wrap,
		.mathvizy-block .text-wrap {
			width: 100%;
		}
	}

	#about {
		.about-block p {
			width: 75%;
		}
	}


	#facts {

		.facts-row {
			flex-direction: column;
			gap: 32px;
			text-align: center;
		}

		.fact-wrap {
			flex-direction: column;
			text-align: center;
			max-width: 200px;
			margin: 0 auto;
		}

		.fact-icon {
			margin: 0 auto;
		}
	}

	#buy {
		flex-direction: column;

		.image-wrap {
			width: 100%;
			margin-bottom: 32px;
			object-fit: cover;
		}
		.text-wrap {
			width: 100%;
			padding: 32px 0;
		}
	}


	#friends {

		.friends-block {
			padding: 0;
		}
	}

	#news {

		article a {
			flex-direction: column;
			gap: 24px;
		}

		img {
			max-width: 300px;
		}

		.news-grid {
			max-width: 300px;	
		}
	}

	#newsletter {
		flex-direction: column;
		gap: 32px;

		.text-wrap,
		.input-wrap {
			width: 100%;
		}

		button {
			padding: 0 32px;
		}
	}

}

@media all and (max-width: 599px) {

	#buy {

		.image-wrap {
			height: auto;
			object-fit: contain;
		}
	}

	#about {

		.quotation-mark {
			width: 32px;
			height: 32px;
			left: -50px;
			top: -20px;
		}

		.quotation-mark.right {
			right: -30px;
			bottom: -10px;
		}
	}

}