:root {

		--primary: #8b6f9f;
		--primary-dark: #674e78;
		--secondary: #d9c8df;

		--text: #333;
		--muted: #777;

		--background: #fff;
		--light: #f7f3f8;

		--radius: 18px;

	}

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {

		margin: 0;

		font-family:
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			sans-serif;

		color: var(--text);

		background: var(--background);

		line-height: 1.6;

	}

	.container {

		width: min(1120px, 92%);

		margin: auto;

	}

	.header {

		background: white;

		position: sticky;

		top: 0;

		z-index: 100;

		border-bottom: 1px solid #eee;

	}

	.nav {

		min-height: 75px;

		display: flex;

		align-items: center;

		justify-content: space-between;

		gap: 30px;

	}

	.logo {

		font-size: 20px;

		font-weight: 700;

		color: var(--primary-dark);

		text-decoration: none;

	}

	nav {

		display: flex;

		align-items: center;

		gap: 25px;

	}

	nav a {

		color: var(--text);

		text-decoration: none;

	}

	.hero {

		background: linear-gradient(
			135deg,
			#f8f2fa,
			#fff
		);

		padding: 90px 0;

	}

	.hero-grid {

		display: grid;

		grid-template-columns:
			1.1fr
			.9fr;

		align-items: center;

		gap: 70px;

	}

	.eyebrow {

		color: var(--primary);

		text-transform: uppercase;

		font-size: 13px;

		font-weight: 700;

		letter-spacing: 2px;

	}

	h1 {

		font-size: clamp(40px, 6vw, 68px);

		line-height: 1.08;

		margin: 15px 0 25px;

	}

	h2 {

		font-size: 38px;

		line-height: 1.2;

	}

	.hero p {

		font-size: 19px;

		color: var(--muted);

		max-width: 650px;

	}

	.hero-image img {

		width: 100%;

		max-height: 560px;

		object-fit: cover;

		border-radius: 30px;

		box-shadow: 0 25px 60px rgba(0,0,0,.12);

	}

	.hero-buttons {

		display: flex;

		gap: 15px;

		margin-top: 30px;

	}

	.btn {

		display: inline-block;

		background: var(--primary);

		color: white;

		padding: 14px 25px;

		border-radius: 50px;

		text-decoration: none;

		font-weight: 600;

		border: 2px solid var(--primary);

		cursor: pointer;

	}

	.btn:hover {

		background: var(--primary-dark);

		border-color: var(--primary-dark);

	}

	.btn-outline {

		background: transparent;

		color: var(--primary);

	}

	.btn-white {

		background: white;

		color: var(--primary);

		border-color: white;

	}

	.btn-small {

		padding: 10px 18px;

	}

	.section {

		padding: 90px 0;

	}

	.section-light {

		background: var(--light);

	}

	.two-columns {

		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 80px;

	}

	.cards {

		display: grid;

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

		gap: 25px;

	}

	.card {

		background: white;

		padding: 35px;

		border-radius: var(--radius);

		box-shadow: 0 10px 30px rgba(0,0,0,.05);

	}

	.icon {

		font-size: 35px;

	}

	.card h3 {

		font-size: 22px;

	}

	.card p {

		color: var(--muted);

	}

	.section-title {

		max-width: 700px;

		margin-bottom: 45px;

	}

	.steps {

		display: grid;

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

		gap: 30px;

	}

	.step {

		padding: 30px;

		border-left: 3px solid var(--primary);

	}

	.step span {

		color: var(--primary);

		font-weight: 700;

	}

	.cta {

		padding: 90px 0;

		text-align: center;

		background: var(--primary);

		color: white;

	}

	.contact {

		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 80px;

	}

	.contact-data {

		font-size: 18px;

	}

	.footer {

		background: #29242d;

		color: white;

		padding: 30px 0;

	}

	@media (max-width: 800px) {

		.nav {

			flex-direction: column;

			padding: 20px 0;

		}

		nav {

			flex-wrap: wrap;

			justify-content: center;

		}

		.hero {

			padding: 60px 0;

		}

		.hero-grid,
		.two-columns,
		.contact {

			grid-template-columns: 1fr;

			gap: 40px;

		}

		.cards,
		.steps {

			grid-template-columns: 1fr;

		}

		h1 {

			font-size: 42px;

		}

	}