:root {
	--cc-text: #0f172a;
	--cc-muted: rgba(15, 23, 42, 0.65);
	--cc-border: rgba(15, 23, 42, 0.10);
	--cc-surface: #ffffff;
	--cc-surface-2: #f6f7fb;
	--cc-brand: #253e80;
	--cc-brand-2: #3b5bcc;
	--cc-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
	--cc-shadow-sm: 0 10px 22px rgba(15, 23, 42, 0.06);
	--cc-radius-lg: 22px;
	--cc-radius-md: 16px;
}

.ex-static--currency-converter {
	color: var(--cc-text);
	max-width: 1120px;
	margin: 0 auto;
	padding: 10px 0 40px;
}

.ex-static--currency-converter a:not(.cc-btn) {
	color: var(--cc-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(37, 62, 128, 0.28);
}

.ex-static--currency-converter a:not(.cc-btn):hover {
	text-decoration-color: rgba(37, 62, 128, 0.65);
}

.ex-static--currency-converter h2 {
	font-size: clamp(22px, 2.1vw, 30px);
	letter-spacing: -0.015em;
	margin: 52px 0 14px;
	line-height: 1.2;
}

.ex-static--currency-converter h3 {
	font-size: 16px;
	margin: 0 0 10px;
}

.cc-hero {
	position: relative;
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 22px;
	align-items: center;
	padding: 28px 28px 26px;
	border-radius: var(--cc-radius-lg);
	background: linear-gradient(180deg, #ffffff, #f7f8fd);
	box-shadow: var(--cc-shadow);
	overflow: hidden;
}

.cc-hero:before {
	content: "";
	position: absolute;
	inset: -1px;
	background: radial-gradient(700px 240px at 18% 12%, rgba(37, 62, 128, 0.10), transparent 60%),
		radial-gradient(760px 320px at 85% 0%, rgba(59, 91, 204, 0.08), transparent 55%);
	pointer-events: none;
}

.cc-hero > * {
	position: relative;
}

.cc-hero__icon img {
	border-radius: 24px;
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
	display: block;
}

.cc-lede {
	font-size: clamp(18px, 1.55vw, 22px);
	line-height: 1.5;
	color: rgba(15, 23, 42, 0.78);
	margin: 0 0 12px;
}

.cc-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 14px;
	border-radius: 999px;
	border: 1px solid rgba(37, 62, 128, 0.18);
	background: linear-gradient(135deg, rgba(37, 62, 128, 0.96), rgba(59, 91, 204, 0.96));
	color: rgba(255, 255, 255, 0.98);
	text-decoration: none !important;
	box-shadow: 0 10px 22px rgba(37, 62, 128, 0.14);
	transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
	font-weight: 600;
}

.cc-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.02);
	box-shadow: 0 14px 30px rgba(37, 62, 128, 0.18);
}

.cc-btn--secondary {
	background: #ffffff;
	color: var(--cc-brand);
	box-shadow: var(--cc-shadow-sm);
}

.cc-section p {
	color: rgba(15, 23, 42, 0.82);
	line-height: 1.75;
	max-width: 72ch;
}

.cc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 20px;
}

.cc-card {
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: var(--cc-radius-md);
	background: #ffffff;
	padding: 18px 18px 16px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.cc-card:hover {
	transform: translateY(-2px);
	border-color: rgba(37, 62, 128, 0.16);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.cc-card p {
	margin: 0;
	color: rgba(15, 23, 42, 0.68);
}

.cc-list {
	list-style: none;
	padding-left: 0;
	margin: 16px 0 0;
	max-width: 78ch;
}

.cc-list li {
	position: relative;
	padding-left: 28px;
	margin: 10px 0;
	color: rgba(15, 23, 42, 0.72);
}

.cc-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(37, 62, 128, 0.95), rgba(59, 91, 204, 0.95));
	box-shadow: 0 8px 22px rgba(37, 62, 128, 0.18);
	transform: translateY(-50%);
}

.cc-muted {
	color: rgba(15, 23, 42, 0.62);
}

@media (max-width: 980px) {
	.cc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.cc-hero {
		grid-template-columns: 1fr;
	}

	.cc-hero__icon img {
		width: 92px;
		height: 92px;
	}
}