/* Begin Additional CSS Styles */

	body {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		font-family: "Segoe UI", sans-serif;
		background: #fff;
	}

	.hero {
		position: relative;
		width: 100%;
		height: auto;
		justify-content: center;
	}

	.hero img {
		width: 100%;
		height: auto;
		display: block;
	}

	.hero-text {
		position: absolute;
		top: 42%;
		left: 5%;
		transform: translateY(-50%);
		color: white;
		max-width: 500px;
		z-index: 2;
	}

	.hero-text h1 {
		font-size: 40px;
		margin-bottom: 16px;
	}

	.hero-text p {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.cta-button {
		background: #ff5e52;
		border: none;
		padding: 16px 32px;
		color: white;
		font-size: 18px;
		border-radius: 10px;
		cursor: pointer;
	}

	.desktop {
		display: block;
	}

	.mobile-cta {
		display: none;
		margin-top: 24px;
		margin-bottom: 24px;
		text-align: center;
	}

	.features {
		display: flex;
		justify-content: center;
		gap: 30px;
		padding: 60px 20px 0;
		flex-wrap: nowrap;
	}

	.feature-box {
		margin-top: -160px;
		/* Поднимаем блок вверх для наложения */
		padding-top: 180px;
		/* Добавляем внутренний отступ сверху */
		background: white;
		/* Устанавливаем фон для блока */
		border-radius: 20px;
		/* Скругляем углы блока */
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		/* Добавляем тень для эффекта "всплытия" */
		position: relative;
		z-index: 3;
		/* Устанавливаем порядок наложения */
		width: 180px;
		height: 280px;
		border-radius: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		background: #fff;
		text-align: center;
		padding: 30px 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.feature-box::before {
		content: "";
		display: block;
		width: 48px;
		height: 48px;
		margin-bottom: 20px;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.feature-box.thematic::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 3h8v8H3V3m10 0h8v8h-8V3m0 10h8v8h-8v-8M3 13h8v8H3v-8Z'/%3E%3C/svg%3E");
	}

	.feature-box.efficient::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 9.94 11.13a.75.75 0 0 0-.44-.58a9.21 9.21 0 0 0-1.76-.54a.74.74 0 0 0-.68.2a7.5 7.5 0 1 1-4.68-2.21a.75.75 0 0 0 .62-.4l.83-1.66a.75.75 0 0 0-.2-.91A9.93 9.93 0 0 0 12 2Z'/%3E%3C/svg%3E");
	}

	.feature-box.exams::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 4H7a2 2 0 0 0-2 2v13.5a.5.5 0 0 0 .79.41l4.71-3.38l4.71 3.38a.5.5 0 0 0 .79-.41V6a2 2 0 0 0-2-2ZM7 2h10a2 2 0 0 1 2 2v16.5a2.5 2.5 0 0 1-3.95 2.06L12 19.87l-3.05 2.2A2.5 2.5 0 0 1 5 20.5V4a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
	}

	.feature-box h3 {
		font-size: 20px;
		margin: 10px 0 6px;
		color: #111;
	}

	.feature-box p {
		font-size: 16px;
		color: #444;
		line-height: 1.4;
	}

	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		max-width: calc(4 * 220px);
		/* 4 карточки * ширина + отступы */
		margin: 0 auto;
		gap: 30px;
		padding: 60px 30px;
		background: #fff;
		justify-items: center;
	}

	.card-box {
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		text-align: center;
		transition: transform 0.3s;
	}

	.card-box:hover {
		transform: scale(1.03);
	}

	.card-box img {
		width: 100%;
		display: block;
	}

	.card-info {
		padding: 16px;
	}

	.card-info h4 {
		font-size: 18px;
		margin: 10px 0 6px;
		color: #111;
	}

	.card-info p {
		font-size: 14px;
		color: #444;
		line-height: 1.4;
		margin-bottom: 12px;
	}

	.cta-button.small {
		background: #ff5e52;
		border: none;
		padding: 10px 20px;
		color: white;
		font-size: 14px;
		border-radius: 8px;
		cursor: pointer;
	}

	/* 1111111111111 Begin */


	.help-section {
		max-width: 800px;
		margin: 40px auto;
		padding: 0 20px 60px;
	}

	.help-header {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 12px;
		/* Контролируемый отступ после заголовка */
	}

	.help-icon {
		font-size: 24px;
		color: blue;
		line-height: 1;
	}

	.help-title {
		color: blue;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.3;
	}

	.help-text {
		font-size: 18px;
		line-height: 1.6;
		margin-left: 0px;
		/* = размер иконки (24px) + gap (10px) */
	}

	/* 1111111111111 End */

	@media (max-width: 960px) {
		.hero-text {
			top: 30%;
			left: 5%;
			right: 5%;
			transform: none;
			text-align: left;
		}

		.hero-text h1 {
			font-size: 17px;
			line-height: 1.2;
			margin-bottom: 10px;
		}

		.hero-text p {
			font-size: 14px;
			margin-bottom: 0;
		}

		.cta-button.desktop {
			display: none;
		}

		.mobile-cta {
			display: block;
			margin-top: 24px;
			margin-bottom: 24px;
			text-align: center;
		}

		.mobile-cta .cta-button {
			font-size: 15px;
			padding: 12px 26px;
		}

		.cards {
			grid-template-columns: repeat(2, 1fr);
			padding: 40px 20px;
		}
	}

/* End Additional CSS Styles */