/* ==========================================================================
FARNIKWEB — Contact
========================================================================== */

.fw-contact {
	overflow: hidden;
	background: var(--fw-bg);
}

/* Hero
========================================================================== */

.fw-contact__hero {
	position: relative;

	padding: 88px 0 64px;

	background:
		radial-gradient(
			circle at 12% 16%,
			rgba(120, 153, 212, 0.12),
			transparent 30%
		),
		linear-gradient(
			180deg,
			var(--fw-bg) 0%,
			var(--fw-white) 100%
		);
}

.fw-contact__hero-inner {
	max-width: 880px;
	margin-inline: auto;

	text-align: center;
}

.fw-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	margin: 0 0 18px;

	color: var(--fw-primary);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
}

.fw-contact__eyebrow::before,
.fw-contact__eyebrow::after {
	content: "";

	width: 24px;
	height: 2px;

	border-radius: var(--fw-radius-pill);

	background: var(--fw-primary);
	opacity: 0.45;
}

.fw-contact__eyebrow span[dir="ltr"] {
	font-family: "Poppins", sans-serif;
	letter-spacing: 0.04em;
}

.fw-contact__title {
	max-width: 850px;

	margin: 0 auto;

	color: var(--fw-navy);

	font-size: clamp(34px, 4vw, 50px);
	font-weight: 800;
	line-height: 1.42;
	letter-spacing: -0.03em;
}

.fw-contact__lead {
	max-width: 720px;

	margin: 22px auto 0;

	color: var(--fw-text-secondary);

	font-size: 17px;
	line-height: 2;
}

/* Contact Cards
========================================================================== */

.fw-contact__methods {
	padding: 34px 0 96px;
}

.fw-contact__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.fw-contact-card {
	position: relative;
	overflow: hidden;

	display: flex;
	flex-direction: column;

	min-width: 0;
	min-height: 330px;

	padding: 24px;

	border: 1px solid var(--fw-border);
	border-radius: var(--fw-radius-card);

	background: var(--fw-white);

	box-shadow:
		0 14px 40px rgba(16, 29, 54, 0.04);

	transition:
		transform var(--fw-transition),
		border-color var(--fw-transition),
		box-shadow var(--fw-transition);
}

.fw-contact-card::before {
	content: "";

	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;

	height: 3px;

	border-radius: 0 0 999px 999px;

	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--fw-misty-blue) 20%,
		var(--fw-primary) 50%,
		var(--fw-misty-blue) 80%,
		transparent 100%
	);

	opacity: 0.68;
}

.fw-contact-card:hover {
	transform: translateY(-5px);

	border-color: rgba(28, 57, 187, 0.20);

	box-shadow:
		0 22px 50px rgba(16, 29, 54, 0.07);
}

.fw-contact-card--featured {
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f8faff 100%
		);

	border-color: rgba(28, 57, 187, 0.16);
}

.fw-contact-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 16px;

	margin-bottom: 22px;
}

.fw-contact-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 34px;

	border: 1px solid rgba(28, 57, 187, 0.11);
	border-radius: 999px;

	color: var(--fw-primary);
	background: var(--fw-ice-blue);

	direction: ltr;

	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 600;
}

.fw-contact-card__label {
	color: var(--fw-misty-blue);

	font-size: 13px;
	font-weight: 700;
}

.fw-contact-card h2 {
	margin: 0 0 12px;

	color: var(--fw-navy);

	font-size: 21px;
	font-weight: 800;
	line-height: 1.55;
}

.fw-contact-card p {
	margin: 0 0 26px;

	color: var(--fw-text-secondary);

	font-size: 14px;
	line-height: 1.95;
}

.fw-contact-card__value {
	display: block;

	margin-bottom: 28px;

	color: var(--fw-navy);

	font-size: 18px;
	font-weight: 800;
	line-height: 1.7;

	text-decoration: none;
	overflow-wrap: anywhere;
}

.fw-contact-card__value--email {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.fw-contact-card__action {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 14px;

	margin-top: auto;
	padding-top: 22px;

	border-top: 1px solid var(--fw-border);

	color: var(--fw-primary);

	font-size: 14px;
	font-weight: 800;

	text-decoration: none;
}

.fw-contact-card__action span:last-child {
	font-size: 20px;

	transition: transform var(--fw-transition-fast);
}

.fw-contact-card__action:hover span:last-child {
	transform: translateX(-4px);
}

/* Bottom CTA
========================================================================== */

.fw-contact__note {
	padding: 0 0 88px;
}

.fw-contact__note-inner {
	position: relative;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 48px;

	padding: 42px 52px;

	border-radius: var(--fw-radius-large);

	background: var(--fw-navy);
}

.fw-contact__note-inner::before {
	content: "";

	position: absolute;
	top: 0;
	right: 32px;
	left: 32px;

	height: 3px;

	border-radius: 0 0 999px 999px;

	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--fw-misty-blue) 20%,
		var(--fw-primary) 50%,
		var(--fw-misty-blue) 80%,
		transparent 100%
	);
}

.fw-contact__note-inner > * {
	position: relative;
	z-index: 2;
}

.fw-contact__note-eyebrow {
	display: block;

	margin-bottom: 9px;

	color: var(--fw-misty-blue);

	font-size: 13px;
	font-weight: 700;
}

.fw-contact__note h2 {
	margin: 0 0 10px;

	color: var(--fw-white);

	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.5;
}

.fw-contact__note p {
	max-width: 680px;

	margin: 0;

	color: rgba(255, 255, 255, 0.7);

	font-size: 15px;
	line-height: 1.9;
}

.fw-contact__note .fw-button {
	flex: 0 0 auto;

	min-height: 50px;

	padding-inline: 26px;

	color: var(--fw-primary);
	background: var(--fw-white);
}

.fw-contact__note .fw-button:hover {
	color: var(--fw-primary);
	background: var(--fw-ice-blue);
}

/* Tablet
========================================================================== */

@media (max-width: 1024px) {
	.fw-contact__hero {
		padding-top: 76px;
	}

	.fw-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fw-contact__note-inner {
		padding: 38px 42px;
	}
}

/* Mobile
========================================================================== */

@media (max-width: 767px) {
	.fw-contact__hero {
		padding: 58px 0 42px;
	}

	.fw-contact__title {
		font-size: clamp(32px, 10vw, 42px);
	}

	.fw-contact__lead {
		font-size: 16px;
	}

	.fw-contact__methods {
		padding: 22px 0 64px;
	}

	.fw-contact__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.fw-contact-card,
	.fw-contact-card:last-child {
		grid-column: auto;

		min-height: 0;

		padding: 24px;
	}

	.fw-contact-card__top {
		margin-bottom: 26px;
	}

	.fw-contact-card__action {
		margin-top: 20px;
	}

	.fw-contact__note {
		padding-bottom: 60px;
	}

	.fw-contact__note-inner {
		flex-direction: column;
		align-items: stretch;

		gap: 26px;

		padding: 32px 26px;
	}

	.fw-contact__note .fw-button {
		width: 100%;
	}
}

/* Reduced Motion
========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fw-contact-card,
	.fw-contact-card__action span:last-child {
		transition: none;
	}

	.fw-contact-card:hover {
		transform: none;
	}
}