/* Section 8 — the closing call (Figma «Landing · CTA» 1440 wide, «Mobile · CTA» 390 wide). */

.cta { padding: 80px 0 130px; } /* .sec: the frame (base.css). */

.cta__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--container);
	margin: 0 auto;
	padding-top: 70px;
	text-align: center;
}

/* A soft coral glow behind the circles (a radial gradient, not a blur). */
.cta__glow {
	position: absolute;
	top: -20px;
	left: 50%;
	width: 700px;
	height: 380px;
	background: radial-gradient(closest-side, rgba(255, 107, 74, 0.13), rgba(255, 107, 74, 0.05) 60%, rgba(255, 107, 74, 0));
	transform: translateX(-50%);
	pointer-events: none;
}

/* The row of circles ---------------------------------------------------------------------------------------------- */

.cta__row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

.cta__story,
.cta__you {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 104px;
}
.cta__story--1 { opacity: 0.85; }
.cta__story--2 { opacity: 0.5; }
.cta__story--3 { opacity: 0.25; }

.cta__circle,
.cta__you-circle {
	position: relative;
	display: block;
	color: var(--coral);
}
.cta__circle { width: 96px; height: 96px; }
.cta__circle svg,
.cta__you-circle svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.cta__circle svg path,
.cta__you-circle svg path { stroke-width: 2.17; }
.cta__circle img {
	position: absolute;
	inset: 7.5px;
	width: 81px;
	height: 81px;
	border-radius: 50%;
	object-fit: cover;
}

.cta__title-sm {
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	white-space: nowrap;
}

/* «استوری تو»: an empty cover with «+», the next story is yours. */
.cta__you-circle {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	filter: drop-shadow(0 8px 24px rgba(255, 107, 74, 0.3));
}
.cta__you-circle::before {
	content: "";
	position: absolute;
	inset: 8.1px;
	border-radius: 50%;
	background: #fff1ec;
}
.cta__you-circle .icon { position: relative; width: 30px; height: 30px; }
.cta__you-circle .icon path { stroke-width: 1.4; }
.cta__you-title {
	color: var(--coral-deep);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

/* It breathes, gently (optional in the design; still with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	.cta__you-circle svg { animation: cta-breathe 2.6s ease-in-out infinite; }
	.cta__you:hover .cta__you-circle svg { animation-duration: 1.3s; }
}
@keyframes cta-breathe {
	50% { transform: scale(1.05); opacity: 0.75; }
}

/* Words and buttons ------------------------------------------------------------------------------------------------- */

.cta__title {
	position: relative;
	margin-top: 51px;
	font-size: clamp(32px, 4.17vw, 60px);
	font-weight: 900;
	line-height: 1.3;
}

.cta__lead {
	position: relative;
	max-width: 610px;
	margin-top: 12px;
	color: var(--muted);
	font-size: 20px;
	line-height: 1.7;
}

.cta__buttons {
	display: flex;
	flex-direction: row-reverse; /* «دموی زنده را ببین» at the right; «پلک را نصب کن» first in the page's order. */
	align-items: center;
	gap: 14px;
	margin-top: 40px;
}

.cta__buy {
	height: 58px;
	gap: 10px;
	padding-inline: 36px 28px;
	box-shadow: 0 10px 30px rgba(21, 19, 31, 0.18);
}

.cta__demo {
	height: 62px;
	gap: 12px;
	padding-inline: 14px 30px;
}

.cta__meta {
	margin-top: 28px;
	color: var(--subtle);
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
}
.cta__meta i { margin-inline: 10px; font-style: normal; }

/* Phones: three circles, the buttons full width one under the other. ---------------------------------------------- */

@media (max-width: 767px) {
	.cta { padding: 36px 0 56px; }
	.cta__inner { padding-top: 56px; }

	.cta__glow { top: -40px; width: 400px; height: 280px; }

	.cta__row { gap: 22px; }
	.cta__story--2,
	.cta__story--3 { display: none; }
	.cta__story--1 { opacity: 0.9; }

	.cta__title { max-width: 308px; margin-top: 26px; font-size: 32px; line-height: 1.32; }
	.cta__lead { max-width: 320px; font-size: 16px; }

	.cta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		margin-top: 28px;
	}
	.cta__buy { height: 56px; }
	.cta__demo { height: 58px; padding-inline: 14px; }

	.cta__meta { margin-top: 18px; font-size: 13px; line-height: 1.75; }
	.cta__meta > span { display: block; }
	.cta__meta i { margin-inline: 6px; }
	.cta__meta .cta__meta-join { display: none; }
}