.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 84% 22%, rgba(44, 52, 217, 0.26) 0, rgba(44, 52, 217, 0.26) 10%, transparent 11%),
		radial-gradient(circle at 74% 78%, rgba(92, 110, 255, 0.16) 0, rgba(92, 110, 255, 0.16) 9%, transparent 10%),
		radial-gradient(circle at 12% 18%, rgba(44, 52, 217, 0.16) 0, rgba(44, 52, 217, 0.16) 8%, transparent 9%),
		linear-gradient(180deg, #1D264D 0%, #1D264D 100%);
	color: #fff;
}

.hero::before,
.hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hero::before {
	inset-inline-start: -5rem;
	inset-block-start: -4rem;
	width: 18rem;
	height: 18rem;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 44%, transparent 74%);
}

.hero::after {
	inset-inline-end: -4rem;
	inset-block-end: -6rem;
	width: 20rem;
	height: 20rem;
	background: radial-gradient(circle, rgba(44, 52, 217, 0.22) 0%, rgba(44, 52, 217, 0.08) 40%, transparent 72%);
}

.hero__container {
	position: relative;
	width: min(1240px, calc(100% - 2rem));
	min-height: 710px;
	margin-inline: auto;
	display: grid;
	place-items: center;
	padding-block: 1.25rem 1rem;
}

.hero__content {
	position: relative;
	z-index: 2;
	width: min(42rem, calc(100% - 2rem));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero__eyebrow {
	margin: 0 0 0.25rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hero__title {
	margin: 0;
	color: #ffbf00;
	font-size: clamp(3rem, 5.2vw, 4.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
}

.hero__subtitle {
	margin: 0.35rem 0 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: clamp(1.45rem, 2.55vw, 2.15rem);
	font-weight: 700;
	line-height: 1.1;
}

.hero__description {
	margin: 0.5rem 0 0;
	max-width: 38rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.62;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 164px;
	min-height: 52px;
	margin-block-start: 1.2rem;
	padding-inline: 2.1rem;
	border-radius: 999px;
	background: #fff;
	color: var(--color-primary-dark);
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 12px 24px rgba(7, 18, 59, 0.14);
	transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
	transform: translateY(-1px);
	background: #f6f7ff;
	box-shadow: 0 14px 24px rgba(7, 18, 59, 0.15);
}

.hero__visual {
	position: absolute;
	inset: 0;
	min-height: 430px;
	isolation: isolate;
	pointer-events: none;
}

.hero__collage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__portrait {
	position: absolute;
	display: block;
	width: var(--size);
	height: var(--size);
	inset-inline-start: var(--start, auto);
	inset-inline-end: var(--end, auto);
	inset-block-start: var(--top);
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.78);
	box-shadow: 0 14px 30px rgba(7, 18, 59, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06);
	z-index: var(--z);
	transform: translate3d(0, 0, 0);
}

.hero__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
}

.hero__portrait--one {
	--size: clamp(10.5rem, 18vw, 13rem);
	--end: 80px;
	--top: 128px;
    /* --left: 104px; */

	--z: 5;
	--focus: center 32%;
}

.hero__portrait--two {
	--size: 86px;
	--start: 05px;
	--top: 328px;
    
	--z: 2;
	--focus: center 40%;
}

.hero__portrait--three {
	--size: 247px;
	--start: 24px;
    --end: 64px;
	--top: 418px;
  
	--z: 3;
	--focus: center 36%;
}

.hero__portrait--four {
	--size: clamp(10.5rem, 18vw, 10rem);
	--start: 70px;
	--top: 50px;
	--z: 6;
	--focus: center 38%;
}

.hero__portrait--five {
	--size: 160px;
	--end: 144px;
	--top: 462px;
	--z: 6;
	--focus: center 34%;
}

.hero__portrait--six {
	--size: 120px;
	--end: 528px;
	--top: 554px;
	--z: 4;
	--focus: center 36%;
}

.hero__portrait--seven {
	--size: 120px;
    --end: 4px;
	--top: 360px;
	--z: 1;
	--focus: center 38%;
}


@media (max-width: 1023px) {
	.hero__container {
		min-height: auto;
		flex-direction: column;
		align-items: stretch;
		padding-block: 2rem 2.5rem;
	}

	.hero__content {
		flex-basis: auto;
		align-items: center;
		text-align: center;
	}

	.hero__description {
		max-width: 38rem;
	}

	.hero__visual {
		position: relative;
		inset: auto;
		width: 100%;
		min-height: auto;
	}

	.hero__collage {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.55rem;
		width: min(100%, 32rem);
		height: auto;
		margin-inline: auto;
	}

	.hero__portrait {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.hero__portrait--one {
		grid-column: span 3;
		width: min(100%, 17rem);
		justify-self: center;
	}

	.hero__portrait--two,
	.hero__portrait--three,
	.hero__portrait--four,
	.hero__portrait--five,
	.hero__portrait--six,
	.hero__portrait--seven {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.hero__container {
		width: min(1240px, calc(100% - 1.5rem));
		gap: 1.35rem;
		padding-block: 1.5rem 2rem;
	}

	.hero__eyebrow {
		font-size: 0.92rem;
	}

	.hero__title {
		font-size: clamp(2.2rem, 11vw, 2.9rem);
	}

	.hero__subtitle {
		font-size: clamp(1.1rem, 5vw, 1.45rem);
	}

	.hero__description {
		margin-top: 0.85rem;
		font-size: 0.96rem;
		line-height: 1.75;
	}

	.hero__cta {
		min-height: 48px;
		padding-inline: 1.5rem;
		margin-block-start: 1.25rem;
	}

	.hero__collage {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.55rem;
	}

	.hero__portrait--one {
		width: min(100%, 17rem);
	}

	.hero__portrait--six,
	.hero__portrait--seven {
		grid-column: span 1;
	}
}

.about-section {
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
	color: var(--color-primary-dark);
}

.about-section::before,
.about-section::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	display: none;
}

.about-section::before {
	inset-inline-end: -9rem;
	inset-block-start: -6rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(44, 52, 217, 0.08) 0%, rgba(44, 52, 217, 0.02) 48%, transparent 72%);
}

.about-section::after {
	inset-inline-start: -8rem;
	inset-block-end: -10rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(29, 38, 77, 0.05) 0%, rgba(29, 38, 77, 0.015) 45%, transparent 72%);
}

.about-section__container {
	position: relative;
	width: min(1240px, calc(100% - 2rem));
	margin-inline: auto;
	padding-block: clamp(3.5rem, 7vw, 5.75rem);
	display: flex;
	flex-direction: row;
	direction: ltr;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.about-section__content {
	flex: 0 1 34rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	direction: rtl;
}

.about-section__title {
	margin: 0;
	color: #30364d;
	font-size: clamp(2.15rem, 3vw, 2.9rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.about-section__title::after {
	content: '';
	display: block;
	width: 210px;
	height: 18px;
	margin: 0.35rem auto 0;
	border-bottom: 4px solid #2A387E;
	border-radius: 0 0 50% 50%;
}

.about-section__description {
	max-width: 30rem;
	margin: 1.35rem 0 0;
	color: #30364d;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.75;
}

.about-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-block-start: 1.8rem;
	padding-inline: 2rem;
	border-radius: 999px;
	background: #fff;
	color: #2A387E;
	border: 1.5px solid #2A387E;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: none;
	transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.about-section__cta:hover,
.about-section__cta:focus-visible {
	transform: translateY(-1px);
	background: rgba(42, 56, 126, 0.05);
	box-shadow: none;
}

.about-section__visual {
	position: relative;
	flex: 1 1 40%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	direction: ltr;
}

.about-section__visual img {
	display: block;
	width: min(100%, 31rem);
	height: auto;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.about-section__cards {
	position: absolute;
	inset-inline-start: -0.5rem;
	inset-block-start: 3.75rem;
	width: 10.8rem;
	padding: 0.75rem 0.75rem 0.8rem;
	margin: 0;
	border-radius: 1.15rem;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 26px rgba(29, 38, 77, 0.18);
	z-index: 2;
	backdrop-filter: blur(4px);
}

.about-section__cards-title {
	margin: 0 0 0.55rem;
	color: #5a60ff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.about-section__cards-list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-section__cards-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.2rem;
	padding-inline: 0.75rem;
	border-radius: 0.8rem;
	font-size: 0.92rem;
	font-weight: 500;
	white-space: nowrap;
	line-height: 1;
}

.about-section__cards-icon {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: none !important;
	max-height: none !important;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
}

.about-section__cards-label {
	line-height: 1;
}

.about-section__cards-item--connection {
	background: rgba(97, 105, 255, 0.09);
	color: #6b71ff;
}

.about-section__cards-item--share {
	background: rgba(255, 110, 154, 0.09);
	color: #ff6f9b;
}

.about-section__cards-item--instantiate {
	background: rgba(245, 186, 98, 0.12);
	color: #b47a00;
}

@media (max-width: 1023px) {
	.about-section__container {
		flex-direction: column;
		direction: rtl;
		align-items: stretch;
		gap: 1.75rem;
		padding-block: 3.5rem 4.5rem;
	}

	.about-section__content {
		align-items: center;
		text-align: center;
	}

	.about-section__description {
		max-width: 40rem;
	}

	.about-section__visual {
		justify-content: center;
		align-items: stretch;
	}

	.about-section__visual img {
		width: min(100%, 24rem);
	}

	.about-section__cards {
		inset-inline-start: 50%;
		inset-block-start: 1rem;
		transform: translateX(-50%);
		width: min(100%, 12rem);
	}
}

@media (max-width: 640px) {
	.about-section__container {
		width: min(1240px, calc(100% - 1.5rem));
		gap: 1.4rem;
		padding-block: 2.75rem 3.5rem;
	}

	.about-section__title {
		font-size: clamp(2rem, 11vw, 2.55rem);
	}

	.about-section__title::after {
		width: 170px;
	height: 14px;
	}

	.about-section__description {
		margin-top: 1.1rem;
		font-size: 0.95rem;
		line-height: 1.8;
	}

	.about-section__cta {
		min-height: 42px;
		padding-inline: 1.55rem;
		margin-block-start: 1.45rem;
	}

	.about-section__visual {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.about-section__visual img {
		width: min(100%, 19rem);
	}

	.about-section__cards {
		position: static;
		transform: none;
		width: min(100%, 18rem);
		margin-inline: auto;
	}
}

	.features {
		background: #efefef;
		padding-block: 3.6rem 3.4rem;
		scroll-margin-top: 7rem;
	}

	.features__container {
		width: min(1120px, calc(100% - 2rem));
		margin-inline: auto;
	}

	.features__title {
		margin: 0;
		text-align: center;
		color: #30364d;
		font-size: clamp(2.2rem, 4.2vw, 3.15rem);
		font-weight: 800;
		line-height: 1.12;
	}

	.features__grid {
		margin: 2.45rem 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 0.8rem;
		direction: ltr;
	}

	.features__item {
		min-width: 0;
	}

	.features__item--flashcards {
		grid-column: 1 / span 4;
	}

	.features__item--summary {
		grid-column: 5 / span 8;
	}

	.features__item--quiz {
		grid-column: 1 / span 8;
	}

	.features__item--levels {
		grid-column: 9 / span 4;
	}

	.feature-card {
		position: relative;
		height: 100%;
		min-height: 208px;
		padding: 1.7rem 1.75rem 1.45rem;
		border-radius: 14px;
		box-shadow: 0 2px 6px rgba(48, 54, 77, 0.04);
		overflow: hidden;
		direction: rtl;
	}

	.features__item--flashcards .feature-card,
	.features__item--summary .feature-card {
		min-height: 228px;
	}

	.feature-card--mint {
		background: #9ed8d2;
	}

	.feature-card--lavender {
		background: #b8b7d9;
	}

	.feature-card--peach {
		background: #e9cdc2;
	}

	.feature-card--pink {
		background: #ece4e9;
	}

	.feature-card__title {
		margin: 0;
		color: #30364d;
		font-size: clamp(1.68rem, 1.95vw, 2.05rem);
		font-weight: 700;
		line-height: 1.35;
		text-align: start;
		letter-spacing: 0;
	}

	.feature-card__description {
		margin: 0.8rem auto 0;
		max-width: 30ch;
		color: #30364d;
		font-size: clamp(1.01rem, 1.02vw, 1.25rem);
		font-weight: 600;
		line-height: 1.55;
		text-align: start;
	}

	.features__item--flashcards .feature-card {
		padding-inline: 1.4rem 1.35rem;
		padding-block-end: 1.55rem;
	}

	.features__item--flashcards .feature-card__description {
		max-width: 18ch;
		font-size: clamp(0.88rem, 0.92vw, 1.06rem);
		line-height: 1.5;
	}

	.features__item--summary .feature-card {
		padding-left: 14.5rem;
		padding-right: 1.9rem;
	}

	.features__item--quiz .feature-card {
		padding-left: 15.3rem;
		padding-right: 1.9rem;
	}

	.features__item--levels .feature-card {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.feature-card__icon {
		position: absolute;
		pointer-events: none;
		user-select: none;
		max-width: none;
		height: auto;
	}

	.feature-card__icon--flashcards {
		left: 0.1rem;
		inset-block-end: -0.2rem;
		width: 99px;
	}

	.feature-card__icon--summary {
		left: -0.95rem;
		inset-block-end: -0.1rem;
		width: 178px;
	}

	.feature-card__icon--quiz {
		left: -0.25rem;
		inset-block-end: 0.3rem;
		width: 148px;
	}

	.feature-card__icon--levels {
		left: -0.2rem;
		inset-block-end: -0.2rem;
		width: 136px;
	}

	@media (max-width: 1023px) {
		.features {
			padding-block: 3.1rem 3.4rem;
		}

		.features__container {
			width: min(880px, calc(100% - 1.5rem));
		}

		.features__grid {
			gap: 0.72rem;
		}

		.feature-card {
			padding: 1.3rem 1.25rem 1.4rem;
			border-radius: 12px;
		}

		.features__item--flashcards .feature-card,
		.features__item--summary .feature-card {
			min-height: 214px;
		}

		.features__item--quiz .feature-card,
		.features__item--levels .feature-card {
			min-height: 194px;
		}

		.feature-card__title {
			font-size: clamp(1.25rem, 2vw, 1.55rem);
		}

		.feature-card__description {
			font-size: clamp(0.83rem, 1.28vw, 0.97rem);
			line-height: 1.5;
		}

		.features__item--summary .feature-card,
		.features__item--quiz .feature-card {
			padding-left: 8.8rem;
			padding-right: 1.2rem;
		}

		.features__item--levels .feature-card {
			padding-left: 1.3rem;
			padding-right: 1.3rem;
		}

		.feature-card__icon--summary {
			width: 138px;
		}

		.feature-card__icon--quiz {
			width: 118px;
		}

		.feature-card__icon--levels {
			width: 104px;
		}

		.feature-card__icon--flashcards {
			width: 80px;
		}
	}

	@media (max-width: 640px) {
		.features {
			padding-block: 2.5rem 2.8rem;
		}

		.features__container {
			width: min(880px, calc(100% - 1.1rem));
		}

		.features__title {
			font-size: clamp(1.65rem, 7.3vw, 2rem);
		}

		.features__grid {
			grid-template-columns: 1fr;
			gap: 0.82rem;
		}

		.features__item--flashcards,
		.features__item--summary,
		.features__item--quiz,
		.features__item--levels {
			grid-column: auto;
		}

		.features__item--flashcards .feature-card,
		.features__item--summary .feature-card,
		.features__item--quiz .feature-card,
		.features__item--levels .feature-card {
			min-height: 0;
		}

		.feature-card {
			padding: 1.25rem 1.1rem 1.35rem;
			border-radius: 12px;
		}

		.feature-card__title {
			font-size: clamp(1.18rem, 5.4vw, 1.45rem);
		}

		.feature-card__description,
		.features__item--flashcards .feature-card__description {
			max-width: 100%;
			font-size: 0.9rem;
			line-height: 1.62;
		}

		.features__item--summary .feature-card,
		.features__item--quiz .feature-card,
		.features__item--levels .feature-card,
		.features__item--flashcards .feature-card {
			padding-inline: 1.1rem;
		}

		.feature-card__icon--flashcards {
			width: 76px;
		}

		.feature-card__icon--summary {
			width: 108px;
		}

		.feature-card__icon--quiz {
			width: 98px;
		}

		.feature-card__icon--levels {
			width: 92px;
		}
	}

/* ============================================================
   HOW IT WORKS — كيف تعمل المنصة؟
   ============================================================ */

.how-it-works {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-soft);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

/* Decorative PNG assets */
.how-it-works__deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
	z-index: 0;
	width: clamp(180px, 20vw, 275px);
	height: auto;
  object-fit: contain;
	object-position: center;
}

.how-it-works__deco--top-right {
	top: 0;
	right: 0;
}

.how-it-works__deco--bottom-left {
	left: 0;
	bottom: 0;
}

/* Inner container — keeps timeline centred and clear of the deco images */
.how-it-works__container {
  position: relative;
	z-index: 1;
  width: min(860px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Section heading */
.how-it-works__title {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--color-primary-dark);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
}

/* ---- Timeline list ---------------------------------------- */

.how-it-works__timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vertical centre line — spans the full height of the list */
.how-it-works__timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: #C4CAE6;
  z-index: 0;
}

/* Each step is a 3-column grid: [left half] [centre node] [right half] */
.how-it-works__step {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  padding-block: 2.25rem;
  position: relative;
}

/* ---- Node (circle on the timeline) ----------------------- */

.how-it-works__node {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

/* Outer ring + inner filled dot */
.how-it-works__node::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #C4CAE6;
}

/* ---- Spacer (the empty half of each row) ----------------- */

.how-it-works__spacer {
	display: block;
}

/* ---- Card (step content) --------------------------------- */

.how-it-works__card {
  direction: rtl;
}

/*
  RTL grid column numbering:
    column 1 = inline-start = visual RIGHT
    column 2 = centre (node)
    column 3 = inline-end   = visual LEFT
*/

/* Step 1 & 3 — content on visual-RIGHT (column 1 in RTL) */
.how-it-works__step--right .how-it-works__card {
  grid-column: 1;
  grid-row: 1;
  padding-inline-start: 1rem;   /* right edge → away from center */
	padding-inline-end: 1rem;     /* left edge  → toward center    */
}

.how-it-works__step--right .how-it-works__node {
  grid-column: 2;
  grid-row: 1;
}

.how-it-works__step--right .how-it-works__spacer {
  grid-column: 3;
  grid-row: 1;
}

/* Step 2 — content on visual-LEFT (column 3 in RTL) */
.how-it-works__step--left .how-it-works__card {
  grid-column: 3;
  grid-row: 1;
  padding-inline-end: 1rem;     /* left edge  → away from center */
	padding-inline-start: 1rem;   /* right edge → toward center    */
}

.how-it-works__step--left .how-it-works__spacer {
  grid-column: 1;
  grid-row: 1;
}

.how-it-works__step--left .how-it-works__node {
  grid-column: 2;
  grid-row: 1;
}

/* Step title */
.how-it-works__step-title {
  margin: 0 0 0.55rem;
  color: var(--color-primary);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Step description */
.how-it-works__step-desc {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 500;
  line-height: 1.8;
}

/* ---- Responsive: tablet (≤ 900px) ------------------------ */
@media (max-width: 900px) {
  .how-it-works__deco {
		width: clamp(140px, 24vw, 220px);
  }
}

/* ---- Responsive: mobile (≤ 640px) — linear single-column  */
@media (max-width: 640px) {
  .how-it-works {
    padding-block: 2.5rem 3rem;
  }

	.how-it-works__deco {
		width: clamp(108px, 34vw, 170px);
	}

  .how-it-works__title {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
    margin-block-end: 2rem;
  }

  /* Collapse to 2-column: [node] [content] */
  .how-it-works__step {
    grid-template-columns: 32px 1fr;
    padding-block: 1.5rem;
  }

  /* Override grid placement for both variants */
  .how-it-works__step--right .how-it-works__node,
  .how-it-works__step--left .how-it-works__node {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
  }

  .how-it-works__step--right .how-it-works__card,
  .how-it-works__step--left .how-it-works__card {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 0.25rem 0;
  }

  .how-it-works__step--right .how-it-works__spacer,
  .how-it-works__step--left .how-it-works__spacer {
    display: none;
  }

  /* Shift the vertical line to align with the node (col 1 = visual right in RTL) */
  .how-it-works__timeline::before {
    left: auto;
    right: 16px; /* half of the 32px node column */
    transform: none;
  }
}

.audience {
	background: #FFFFFF;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

.audience__container {
	width: min(1240px, calc(100% - 2rem));
	margin-inline: auto;
}

.audience__title {
	margin: 0;
	text-align: center;
	color: #30364d;
	font-size: clamp(2rem, 3.4vw, 2.7rem);
	font-weight: 800;
	line-height: 1.2;
}

.audience__description {
	max-width: 44rem;
	margin: 0.9rem auto 0;
	text-align: center;
	color: #30364d;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.8;
}

.audience__grid {
	list-style: none;
	margin: clamp(2rem, 3.4vw, 2.8rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.4rem);
}

.audience__item {
	min-width: 0;
}

.audience-card {
	height: 100%;
	border-radius: 22px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(29, 38, 77, 0.11);
	display: flex;
	flex-direction: column;
}

.audience-card__image {
	width: 100%;
	height: clamp(230px, 23vw, 290px);
	object-fit: cover;
	object-position: center;
}

.audience-card__body {
	padding: 1.15rem 1.2rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	text-align: center;
}

.audience-card__title {
	margin: 0;
	color: #30364d;
	font-size: clamp(1.2rem, 1.9vw, 1.45rem);
	font-weight: 800;
	line-height: 1.4;
}

.audience-card__description {
	margin: 0;
	color: #30364d;
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.75;
}

@media (max-width: 1023px) {
	.audience {
		padding-block: 3.3rem 4rem;
	}

	.audience__container {
		width: min(1240px, calc(100% - 1.5rem));
	}

	.audience__grid {
		gap: 0.9rem;
	}

	.audience-card__image {
		height: clamp(190px, 28vw, 240px);
	}

	.audience-card__body {
		padding: 1rem;
	}

	.audience-card__description {
		font-size: 0.92rem;
		line-height: 1.7;
	}
}

@media (max-width: 767px) {
	.audience {
		padding-block: 2.6rem 3.2rem;
	}

	.audience__container {
		width: min(1240px, calc(100% - 1.1rem));
	}

	.audience__title {
		font-size: clamp(1.65rem, 7vw, 2rem);
	}

	.audience__description {
		font-size: 0.94rem;
		line-height: 1.8;
	}

	.audience__grid {
		grid-template-columns: 1fr;
		gap: 0.95rem;
	}

	.audience-card__image {
		height: clamp(210px, 52vw, 260px);
	}

	.audience-card__title {
		font-size: 1.15rem;
	}

	.audience-card__description {
		font-size: 0.9rem;
	}
}

.cta-banner {
	background: #efefef;
	padding-block: clamp(2.6rem, 5vw, 4.25rem) clamp(3rem, 5.4vw, 4.75rem);
}

.cta-banner__container {
	width: min(980px, calc(100% - 2rem));
	min-height: 236px;
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.15rem, 3vw, 2.25rem) clamp(1.8rem, 3.4vw, 2.2rem);
	background: #2e3d8d;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(24, 34, 84, 0.2);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cta-banner__title {
	margin: 0;
	color: #ffbf00;
	font-size: clamp(2.6rem, 5.8vw, 4.3rem);
	font-weight: 800;
	line-height: 1;
}

.cta-banner__description {
	max-width: 46rem;
	margin: 0.45rem 0 0;
	color: #ffffff;
	font-size: clamp(0.97rem, 1.2vw, 1.08rem);
	font-weight: 700;
	line-height: 1.45;
}

.cta-banner__action {
	position: relative;
	margin-top: 1.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 192px;
	min-height: 42px;
	padding-inline: 1.75rem;
	border-radius: 999px;
	border: 0;
	background: #f4f5f9;
	color: #2a387e;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform 180ms ease, background-color 180ms ease;
}

.cta-banner__button:hover,
.cta-banner__button:focus-visible {
	transform: translateY(-1px);
	background: #ffffff;
}

.cta-banner__arrow {
	position: absolute;
	inset-inline-start: -82px;
	inset-block-start: -30px;
	width: 112px;
	height: 70px;
	pointer-events: none;
}

.cta-banner__arrow-path {
	fill: none;
	stroke: #ffbf00;
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cta-banner__arrow-head {
	fill: none;
	stroke: #ffbf00;
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 1023px) {
	.cta-banner {
		padding-block: 2.2rem 3.5rem;
	}

	.cta-banner__container {
		width: min(980px, calc(100% - 1.5rem));
		min-height: 214px;
		padding: 1.45rem 1.05rem 1.75rem;
	}

	.cta-banner__description {
		font-size: 0.94rem;
	}

	.cta-banner__button {
		width: 170px;
		min-height: 40px;
		font-size: 1.04rem;
	}

	.cta-banner__arrow {
		inset-inline-start: -66px;
		inset-block-start: -28px;
		width: 96px;
		height: 60px;
	}
}

@media (max-width: 640px) {
	.cta-banner {
		padding-block: 1.9rem 2.8rem;
	}

	.cta-banner__container {
		width: min(980px, calc(100% - 1rem));
		min-height: 190px;
		border-radius: 14px;
		padding: 1.2rem 0.85rem 1.45rem;
	}

	.cta-banner__title {
		font-size: clamp(2rem, 11vw, 2.7rem);
	}

	.cta-banner__description {
		font-size: 0.88rem;
		line-height: 1.66;
		max-width: 20.5rem;
	}

	.cta-banner__action {
		margin-top: 1.05rem;
	}

	.cta-banner__button {
		width: 150px;
		min-height: 38px;
		padding-inline: 1.2rem;
		font-size: 0.94rem;
	}

	.cta-banner__arrow {
		inset-inline-start: -54px;
		inset-block-start: -25px;
		width: 80px;
		height: 52px;
	}

	.cta-banner__arrow-path,
	.cta-banner__arrow-head {
		stroke-width: 3;
	}
}

.why-nubtha {
	background: #fff;
	padding-block: clamp(3.1rem, 6vw, 5.1rem);
}

.why-nubtha__container {
	width: min(1240px, calc(100% - 2rem));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.75rem);
	direction: ltr;
}

.why-nubtha__visual {
	position: relative;
	margin: 0;
	direction: ltr;
}

.why-nubtha__visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 32px;
	box-shadow: 0 22px 44px rgba(29, 38, 77, 0.15);
}

.why-nubtha__floating-card {
	position: absolute;
	inset-inline-start: -1.1rem;
	inset-block-start: 1.4rem;
	width: min(230px, 45%);
	padding: 0.95rem 1rem 1.05rem;
	margin: 0;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 16px 36px rgba(29, 38, 77, 0.18);
	backdrop-filter: blur(4px);
	z-index: 2;
}

.why-nubtha__floating-title {
	margin: 0;
	color: #2A387E;
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.2;
}

.why-nubtha__floating-text {
	margin: 0.45rem 0 0;
	color: #30364d;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.55;
}

.why-nubtha__content {
	direction: rtl;
	text-align: right;
}

.why-nubtha__title {
	margin: 0;
	color: #30364d;
	font-size: clamp(2.05rem, 3.15vw, 2.8rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.why-nubtha__title::after {
	content: '';
	display: block;
	width: 226px;
	height: 16px;
	margin-top: 0.35rem;
	border-bottom: 4px solid #2A387E;
	border-radius: 0 0 50% 50%;
}

.why-nubtha__list {
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.why-nubtha__item {
	position: relative;
	padding-inline-start: 1.55rem;
	color: #30364d;
	font-size: clamp(0.98rem, 1.15vw, 1.08rem);
	font-weight: 600;
	line-height: 1.75;
}

.why-nubtha__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.15rem;
	inset-block-start: 0.72rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #2C34D9;
	box-shadow: 0 0 0 3px rgba(44, 52, 217, 0.18);
}

.pricing-plans {
	background: #fff;
	padding-block: clamp(3.6rem, 6.8vw, 5.9rem);
	color: #30364d;
}

.pricing-plans__container {
	width: min(1540px, calc(100% - 2rem));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2.1rem, 3.8vw, 3rem);
	text-align: center;
}

.pricing-plans__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	max-width: 46rem;
}

.pricing-plans__title {
	margin: 0;
	color: #30364d;
	font-size: clamp(2.7rem, 4.4vw, 4rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.pricing-plans__description {
	margin: 0;
	color: #5f6479;
	font-size: clamp(1.08rem, 1.55vw, 1.25rem);
	font-weight: 500;
	line-height: 1.58;
}

.pricing-plans__grid {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: stretch;
	direction: ltr;
	gap: clamp(1rem, 2vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pricing-plans__item {
	display: flex;
	min-width: 0;
}

.pricing-plans__item--featured {
	align-items: center;
	transform: translateY(-0.8rem);
}

.pricing-card {
	position: relative;
	width: 100%;
	min-height: 524px;
	padding: 1.75rem 1.65rem 1.4rem;
	border-radius: 24px;
	background: #F4F4FD;
	box-shadow: 0 14px 34px rgba(29, 38, 77, 0.06);
	border: 1px solid rgba(215, 224, 235, 0.36);
	overflow: hidden;
	direction: rtl;
}

.pricing-card--featured {
	min-height: 548px;
	padding: 1.8rem 1.7rem 1.45rem;
	background: #2F3F8C;
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 20px 44px rgba(29, 38, 77, 0.14);
	color: #fff;
}

.pricing-card__decor {
	position: absolute;
	inset-inline-start: 1.15rem;
	inset-block-start: 1.05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #31d3cc;
	pointer-events: none;
}

.pricing-card__decor svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pricing-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100%;
	text-align: center;
}

.pricing-card__label {
	margin: 0;
	color: inherit;
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.3;
}

.pricing-card__price {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
	margin-block: 0.42rem 0.12rem;
	color: inherit;
	white-space: nowrap;
}

.pricing-card__price-value {
	font-size: clamp(2.5rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}

.pricing-card__price-unit {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
}

.pricing-card__price-period {
	font-size: 1.03rem;
	font-weight: 500;
	line-height: 1;
	color: inherit;
}

.pricing-card__subtitle {
	margin: 0;
	color: rgba(48, 54, 77, 0.72);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

.pricing-card--featured .pricing-card__subtitle {
	color: rgba(255, 255, 255, 0.8);
}

.pricing-card__features {
	width: 100%;
	display: grid;
	gap: 0.55rem;
	margin: 1.4rem 0 0;
	padding: 0;
    flex: .5;
	list-style: none;
	text-align: right;
}

.pricing-card__feature {
	display: grid;
	grid-template-columns: min-content minmax(0, 1fr);
	align-items: start;
	gap: 0.5rem;
	color: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
}

.pricing-card__check {
	width: 1.18rem;
	height: 1.18rem;
	margin-block-start: 0.16rem;
	flex: 0 0 auto;
	color: #ff9b63;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pricing-card--featured .pricing-card__check {
	color: #ff9b63;
}

.pricing-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100%;
	min-height: 46px;
	margin-block-start: auto;
	padding-inline: 1.4rem;
	border-radius: 15px;
	background: #f0effd;
	color: #5c63ef;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: none;
}

.pricing-card__button:hover,
.pricing-card__button:focus-visible {
	transform: translateY(-1px);
	background: #e8e7fb;
}

.pricing-card--featured .pricing-card__button {
	background: #f5f4ff;
	color: #5f67ff;
}

.pricing-card--featured .pricing-card__button:hover,
.pricing-card--featured .pricing-card__button:focus-visible {
	background: #ffffff;
}

.pricing-card--starter .pricing-card__price,
.pricing-card--business .pricing-card__price,
.pricing-card--starter .pricing-card__label,
.pricing-card--business .pricing-card__label {
	color: #30364d;
}

.pricing-card--featured .pricing-card__label,
.pricing-card--featured .pricing-card__price {
	color: #fff;
}

.pricing-card--starter .pricing-card__decor,
.pricing-card--business .pricing-card__decor {
	color: #31d3cc;
}

@media (max-width: 1023px) {
	.pricing-plans {
		padding-block: 2.9rem 4.1rem;
	}

	.pricing-plans__container {
		width: min(1240px, calc(100% - 1.25rem));
		gap: 1.7rem;
	}

	.pricing-plans__title {
		font-size: clamp(2rem, 4.2vw, 2.8rem);
	}

	.pricing-plans__description {
		font-size: 1rem;
	}

	.pricing-plans__grid {
		gap: 1rem;
	}

	.pricing-card {
		min-height: 388px;
		padding: 1.3rem 1.05rem 1.1rem;
	}

	.pricing-card--featured {
		min-height: 414px;
		padding: 1.35rem 1.1rem 1.05rem;
	}

	.pricing-card__label {
		font-size: 1rem;
	}

	.pricing-card__price-value {
		font-size: clamp(2rem, 4.2vw, 2.7rem);
	}

	.pricing-card__price-unit {
		font-size: 1.05rem;
	}

	.pricing-card__feature {
		font-size: 0.96rem;
		line-height: 1.55;
	}
}

@media (max-width: 640px) {
	.pricing-plans {
		padding-block: 2.4rem 3.2rem;
	}

	.pricing-plans__container {
		width: min(1240px, calc(100% - 1rem));
		gap: 1.25rem;
	}

	.pricing-plans__grid {
		grid-template-columns: 1fr;
		gap: 0.95rem;
	}

	.pricing-plans__item--featured {
		transform: none;
	}

	.pricing-card,
	.pricing-card--featured {
		min-height: 0;
		padding: 1.25rem 1rem 1rem;
	}

	.pricing-card__decor {
		inset-inline-start: 0.95rem;
		inset-block-start: 0.9rem;
		width: 20px;
		height: 20px;
	}

	.pricing-card__price {
		margin-block-start: 0.3rem;
	}

	.pricing-card__features {
		margin-top: 1rem;
	}

	.pricing-card__button {
		min-height: 38px;
		border-radius: 12px;
		font-size: 0.95rem;
	}
}

@media (max-width: 1023px) {
	.why-nubtha {
		padding-block: 2.75rem 4rem;
	}

	.why-nubtha__container {
		width: min(1240px, calc(100% - 1.5rem));
		grid-template-columns: 1fr;
		gap: 1.7rem;
		direction: rtl;
	}

	.why-nubtha__visual {
		order: 2;
		max-width: 43rem;
		margin-inline: auto;
	}

	.why-nubtha__content {
		order: 1;
		max-width: 42rem;
		margin-inline: auto;
	}

	.why-nubtha__floating-card {
		inset-inline-start: 0.8rem;
		inset-block-start: 0.8rem;
		width: min(220px, 46%);
	}

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

	.why-nubtha__title::after {
		margin-inline: auto;
	}

	.why-nubtha__list {
		margin-top: 1.2rem;
	}

	.why-nubtha__item {
		font-size: 0.98rem;
	}
}

@media (max-width: 640px) {
	.why-nubtha {
		padding-block: 2.2rem 3rem;
	}

	.why-nubtha__container {
		width: min(1240px, calc(100% - 1rem));
		gap: 1.3rem;
	}

	.why-nubtha__visual img {
		border-radius: 22px;
	}

	.why-nubtha__floating-card {
		position: absolute;
		inset-inline-start: 0.65rem;
		inset-block-start: 0.65rem;
		width: min(190px, 56%);
		padding: 0.7rem 0.75rem 0.78rem;
		border-radius: 12px;
	}

	.why-nubtha__floating-title {
		font-size: 0.9rem;
	}

	.why-nubtha__floating-text {
		font-size: 0.74rem;
		line-height: 1.5;
		margin-top: 0.35rem;
	}

	.why-nubtha__title {
		font-size: clamp(1.7rem, 8.2vw, 2.15rem);
	}

	.why-nubtha__title::after {
		width: 174px;
		height: 13px;
		border-bottom-width: 3px;
	}

	.why-nubtha__list {
		margin-top: 1rem;
		gap: 0.72rem;
	}

	.why-nubtha__item {
		padding-inline-start: 1.3rem;
		font-size: 0.9rem;
		line-height: 1.72;
	}

	.why-nubtha__item::before {
		inset-inline-start: 0.1rem;
		inset-block-start: 0.67rem;
		width: 8px;
		height: 8px;
		box-shadow: 0 0 0 2px rgba(44, 52, 217, 0.16);
	}
}

.upload-section {
	background: #fff;
	padding-block: clamp(3.25rem, 6vw, 4.2rem) clamp(2rem, 4vw, 2.4rem);
	color: #30364d;
}

.upload-section__container {
	width: min(1240px, calc(100% - 2rem));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.9rem, 4vw, 2.85rem);
	text-align: center;
}

.upload-section__header {
	display: flex;
	justify-content: center;
	width: 100%;
}

.upload-section__title {
	max-width: 40rem;
	margin: 0;
	color: #30364d;
	font-size: clamp(2.15rem, 3.45vw, 3.05rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.035em;
}

.upload-card {
	position: relative;
	width: min(760px, 100%);
	padding: clamp(1.65rem, 3.5vw, 2.3rem) clamp(1.15rem, 3vw, 2rem) clamp(1.2rem, 2.8vw, 1.7rem);
	border-radius: 30px;
	background: #fdfdff;
	border: 1px solid rgba(215, 224, 235, 0.52);
	box-shadow: 0 22px 48px rgba(29, 38, 77, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	overflow: hidden;
	box-sizing: border-box;
}

.upload-card__icon {
	display: block;
	width: clamp(116px, 16vw, 154px);
	height: auto;
	margin-block-end: 0.35rem;
	object-fit: contain;
}

.upload-card__title {
	margin: 0;
	color: #30364d;
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.upload-card__description {
	max-width: 32rem;
	margin: 0;
	color: #6e7288;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
}

.upload-card__actions {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 0.85rem;
	margin-block: 0.2rem 0.15rem;
}

.upload-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 154px;
	min-height: 48px;
	padding-inline: 1.45rem;
	border-radius: 16px;
	border: 1px solid transparent;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.upload-card__button:hover,
.upload-card__button:focus-visible {
	transform: translateY(-1px);
}

.upload-card__button--primary {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 12px 24px rgba(44, 52, 217, 0.16);
}

.upload-card__button--primary:hover,
.upload-card__button--primary:focus-visible {
	background: #232cc8;
	box-shadow: 0 14px 26px rgba(44, 52, 217, 0.2);
}

.upload-card__button--secondary {
	background: #f2f3ff;
	color: #5860e0;
	border-color: rgba(88, 96, 224, 0.16);
}

.upload-card__button--secondary:hover,
.upload-card__button--secondary:focus-visible {
	background: #e8ebff;
	border-color: rgba(88, 96, 224, 0.24);
}

.upload-card__dropzone {
	width: 100%;
	min-height: 176px;
	padding: 1.3rem 1rem;
	border-radius: 24px;
	border: 2px dashed #d6dbea;
	background: #fbfbff;
	display: grid;
	place-items: center;
	color: #6b6f82;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.55;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.upload-card__dropzone:hover,
.upload-card__dropzone:focus-visible {
	border-color: rgba(44, 52, 217, 0.35);
	background: #f7f8ff;
	box-shadow: 0 10px 20px rgba(44, 52, 217, 0.06);
	transform: translateY(-1px);
}

.upload-card__dropzone span {
	display: inline-block;
	max-width: 18rem;
}

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

.upload-card__button:focus-visible,
.upload-card__dropzone:focus-visible {
	outline: 3px solid rgba(44, 52, 217, 0.24);
	outline-offset: 3px;
}

@media (max-width: 1023px) {
	.upload-section {
		padding-block: 2.8rem 4.25rem;
	}

	.upload-section__container {
		width: min(1240px, calc(100% - 1.5rem));
		gap: 1.7rem;
	}

	.upload-section__title {
		max-width: 36rem;
		font-size: clamp(1.95rem, 4vw, 2.5rem);
	}

	.upload-card {
		width: min(720px, 100%);
		padding: 1.5rem 1.1rem 1.35rem;
		border-radius: 26px;
		gap: 0.95rem;
	}

	.upload-card__icon {
		width: clamp(104px, 15vw, 132px);
	}

	.upload-card__title {
		font-size: clamp(1.25rem, 2.7vw, 1.6rem);
	}

	.upload-card__description {
		max-width: 30rem;
		font-size: 0.97rem;
		line-height: 1.7;
	}

	.upload-card__dropzone {
		min-height: 160px;
		border-radius: 22px;
	}
}

@media (max-width: 640px) {
	.upload-section {
		padding-block: 2.35rem 3.2rem;
	}

	.upload-section__container {
		width: min(1240px, calc(100% - 1rem));
		gap: 1.25rem;
	}

	.upload-section__title {
		max-width: 20rem;
		font-size: clamp(1.55rem, 7.2vw, 2rem);
		line-height: 1.22;
	}

	.upload-card {
		width: min(100%, 34rem);
		padding: 1.25rem 0.95rem 1rem;
		border-radius: 22px;
		gap: 0.85rem;
	}

	.upload-card__icon {
		width: 104px;
		margin-block-end: 0.1rem;
	}

	.upload-card__title {
		font-size: 1.22rem;
	}

	.upload-card__description {
		font-size: 0.92rem;
		line-height: 1.68;
	}

	.upload-card__actions {
		flex-direction: column;
		gap: 0.7rem;
	}

	.upload-card__button {
		width: 100%;
		min-width: 0;
		min-height: 44px;
		border-radius: 14px;
		font-size: 0.96rem;
	}

	.upload-card__dropzone {
		min-height: 146px;
		padding-inline: 0.9rem;
		border-radius: 20px;
		font-size: 0.92rem;
	}

	.upload-card__dropzone span {
		max-width: 14rem;
	}
}

.site-footer {
	background: #fff;
	color: #30364d;
	padding-block: 0 0.75rem;
}

.site-footer__container {
	width: min(1240px, calc(100% - 2rem));
	margin-inline: auto;
	padding-block: clamp(0.75rem, 1.6vw, 1.1rem) 0;
}

.site-footer__signup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding-block: 0.1rem 0.95rem;
	text-align: center;
}

.site-footer__headline {
	margin: 0;
	color: #30364d;
	font-size: clamp(1.95rem, 3vw, 2.7rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.03em;
}

.site-footer__subscribe {
	display: inline-flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	width: min(440px, 100%);
	overflow: hidden;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(29, 38, 77, 0.08);
}

.site-footer__subscribe-button {
	min-width: 92px;
	padding-inline: 1.4rem;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: #2f3f8c;
	color: #fff;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.site-footer__subscribe-button:hover,
.site-footer__subscribe-button:focus-visible {
	background: #27367a;
	transform: translateY(-1px);
}

.site-footer__subscribe-field {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 40px;
	padding-inline: 1rem 1.1rem;
	background: #ebedf4;
	border-radius: 999px 0 0 999px;
}

.site-footer__subscribe-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #a8adba;
	flex: 0 0 auto;
}

.site-footer__subscribe-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-footer__subscribe-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: #30364d;
	font-size: 0.96rem;
	font-weight: 500;
	line-height: 1.4;
	outline: none;
}

.site-footer__subscribe-input::placeholder {
	color: #a1a6b7;
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(1rem, 2.8vw, 2rem);
	direction: rtl;
}

.site-footer__top {
	padding-block: 0.65rem 1rem;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	text-align: right;
}

.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
}

.site-footer__logo {
	display: block;
	width: 88px;
	height: auto;
	object-fit: contain;
}

.site-footer__description {
	max-width: 18rem;
	margin: 0;
	color: #6b6f82;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.8;
}

.site-footer__nav {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #30364d;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.5;
	transition: color 180ms ease, transform 180ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--color-primary);
	transform: translateY(-1px);
}

.site-footer__social {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.7rem;
	direction: ltr;
	justify-self: end;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.site-footer__social-link img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	transform: translateY(-2px);
}

.site-footer__social-link:focus-visible,
.site-footer__link:focus-visible {
	outline: 3px solid rgba(44, 52, 217, 0.24);
	outline-offset: 3px;
}

.site-footer__bottom {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding-block: 0.85rem 0.15rem;
	border-top: 1px solid rgba(215, 224, 235, 0.85);
}

.site-footer__language {
	justify-self: start;
}

.site-footer__language-button {
	min-height: 32px;
	padding-inline: 1rem 2.1rem;
	border: 1px solid rgba(215, 224, 235, 0.9);
	border-radius: 8px;
	background: #fff;
	color: #30364d;
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(29, 38, 77, 0.05);
}

.site-footer__dots {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1.1rem;
	justify-self: center;
}

.site-footer__dots span {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #8a8fa1;
}

.site-footer__copyright {
	margin: 0;
	color: #7d8099;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.6;
	justify-self: end;
}

@media (max-width: 1023px) {
	.site-footer__container {
		width: min(1240px, calc(100% - 1.5rem));
		padding-block: 1rem 0;
	}

	.site-footer__signup {
		padding-block: 0.2rem 1.1rem;
	}

	.site-footer__headline {
		font-size: clamp(1.8rem, 4vw, 2.2rem);
	}

	.site-footer__subscribe {
		width: min(420px, 100%);
	}

	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 1.2rem;
		text-align: center;
	}

	.site-footer__brand {
		align-items: center;
		text-align: center;
	}

	.site-footer__nav {
		justify-content: center;
	}

	.site-footer__links {
		gap: 1rem 1.3rem;
	}

	.site-footer__social {
		justify-self: center;
	}

	.site-footer__description {
		max-width: 32rem;
	}

	.site-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0.55rem;
	}

	.site-footer__language,
	.site-footer__copyright {
		justify-self: center;
	}
}

@media (max-width: 640px) {
	.site-footer {
		padding-block: 0 0.4rem;
	}

	.site-footer__container {
		width: min(1240px, calc(100% - 1rem));
		padding-block: 0.95rem 0;
	}

	.site-footer__signup {
		padding-block: 0.1rem 0.95rem;
		gap: 0.75rem;
	}

	.site-footer__headline {
		font-size: clamp(1.55rem, 6.2vw, 1.95rem);
		line-height: 1.2;
	}

	.site-footer__subscribe {
		width: 100%;
		max-width: 24rem;
	}

	.site-footer__subscribe-button {
		min-width: 80px;
		padding-inline: 1rem;
		font-size: 0.92rem;
	}

	.site-footer__subscribe-field {
		min-height: 38px;
		padding-inline: 0.85rem 0.95rem;
	}

	.site-footer__subscribe-input {
		font-size: 0.9rem;
	}

	.site-footer__top {
		gap: 1rem;
	}

	.site-footer__brand {
		align-items: center;
		gap: 0.2rem;
	}

	.site-footer__logo {
		width: 78px;
	}

	.site-footer__brand-name {
		font-size: clamp(1.75rem, 8vw, 2.15rem);
	}

	.site-footer__description {
		max-width: 18rem;
		font-size: 0.88rem;
		line-height: 1.65;
	}

	.site-footer__links {
		gap: 0.75rem 1rem;
	}

	.site-footer__link {
		font-size: 0.92rem;
	}

	.site-footer__social {
		justify-content: center;
		gap: 0.55rem;
	}

	.site-footer__social-link {
		width: 32px;
		height: 32px;
	}

	.site-footer__social-link img {
		width: 16px;
		height: 16px;
	}

	.site-footer__bottom {
		padding-block: 0.75rem 0.1rem;
		gap: 0.4rem;
	}

	.site-footer__copyright {
		font-size: 0.84rem;
	}

	.site-footer__language-button {
		min-height: 30px;
		padding-inline: 0.9rem 1.7rem;
		font-size: 0.82rem;
	}

	.site-footer__dots {
		gap: 0.8rem;
	}

	.site-footer__dots span {
		width: 3px;
		height: 3px;
	}
}