/* Brand tokens taken from umb-engagement-banking-web (tailwind.config.cjs)
   and speedapp-mobile (constants/Colors.ts) */
:root {
	--umb-amber: #f4b233; /* speedapp tint */
	--umb-amber-70: #f4b233b2; /* primary-amber  — navbar */
	--umb-yellow-5: #f4b2330d; /* primary-yellow — page wash */
	--umb-mustard: #fdcf6f; /* primary-mustard */
	--umb-amber-20: #f4b23333; /* web bg-[#F4B23333] — amber tint */
	--umb-gold: #de9c1c; /* web text-[#DE9C1C] — amber for text & strong accents */

	--bg: #ffffff;
	--surface: #ffffff;
	--text: #000000; /* web body text */
	--muted: #575757; /* web grey text */
	--subtle: #929292; /* web light grey text */
	--border: #d9d9d9; /* web borders */
	--chip: #d9d9d980; /* web bg-[#D9D9D980] */
	--shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.06);
	--shadow-hover: 0 2px 4px rgb(0 0 0 / 0.06), 0 16px 32px rgb(0 0 0 / 0.12);
}

/* Myriad Pro — same files as the web project */
@font-face { font-family: 'MYRIAD'; font-weight: 300; src: url(../public/fonts/MyriadPro-Light.otf); font-display: swap; }
@font-face { font-family: 'MYRIAD'; font-weight: 400; src: url(../public/fonts/MYRIADPRO-REGULAR.OTF); font-display: swap; }
@font-face { font-family: 'MYRIAD'; font-weight: 600; src: url(../public/fonts/MYRIADPRO-SEMIBOLD.OTF); font-display: swap; }
@font-face { font-family: 'MYRIAD'; font-weight: 700; src: url(../public/fonts/MYRIADPRO-BOLD.OTF); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
	border-top: 5px solid var(--umb-amber);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font-family: 'MYRIAD', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

.container {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ── Navbar (matches engagement-banking navbar) ─────────── */
.navbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #fff;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.navbar::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--umb-amber-70);
}
.navbar__inner {
	position: relative;
	max-width: 1440px;
	height: 4rem;
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	display: flex;
	align-items: center;
}
.navbar__brand { display: flex; align-items: center; gap: 1rem; color: #000; text-decoration: none; }
.navbar__logo { width: 80px; height: 44.8px; object-fit: contain; margin-bottom: 0.5rem; }
.navbar__divider { width: 1px; height: 28px; background: rgb(0 0 0 / 0.35); }
.navbar__title { font-size: 20px; font-weight: 600; }

/* ── Main ────────────────────────────────────────────────── */
.hero {
	flex: 1;
	display: flex;
	align-items: center;
	background: var(--umb-yellow-5);
	padding: 4rem 0;
}
.hero__logo { display: block; height: 56px; width: auto; margin: 0 auto 1.25rem; }
.hero__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: 30px;
	margin: 0 auto 0.75rem;
	padding: 3.5px 1rem 0; /* Myriad sits high: nudge caps to the optical centre */
	border-radius: 999px;
	background: var(--umb-amber-20);
	color: var(--umb-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-indent: 0.12em; /* balances the trailing letter-spacing so the text sits in the middle */
	text-transform: uppercase;
}
.hero h1 { margin: 0; font-size: 35px; font-weight: 600; line-height: 1.15; text-align: center; }
.hero__sub { margin: 0.5rem 0 2.5rem; color: var(--muted); font-size: 18px; text-align: center; }

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s, border-color 0.25s;
}
/* soft amber glow in the corner */
.card::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -90px;
	right: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--umb-amber-20), transparent 70%);
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
/* amber bar along the bottom */
.card::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--umb-amber), var(--umb-mustard));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: var(--umb-gold);
}
.card:hover::before { transform: scale(1.6); }
.card:hover::after { transform: scaleX(1); }
.card:active { transform: translateY(-1px); }
.card:focus-visible { outline: 3px solid var(--umb-amber); outline-offset: 3px; }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; }

.card__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--umb-amber-20);
	box-shadow: inset 0 0 0 1px var(--umb-amber-70);
	transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.card__icon img { width: 40px; height: 40px; object-fit: contain; }
.card:hover .card__icon { transform: rotate(-4deg) scale(1.05); }

.card__arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #000;
	color: var(--umb-mustard);
	transition: background 0.25s, color 0.25s, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.card__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card__arrow { background: var(--umb-amber); color: #000; transform: rotate(45deg); }

.card__body { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.card__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; }
.card__title--logo { display: flex; align-items: center; height: 26px; }
.card__title--logo img { display: block; height: 23px; width: auto; }
.card__desc { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 34ch; }

.card__host {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--chip);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.card__host svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { padding: 1.5rem; text-align: center; }
.footer p { margin: 0; color: var(--subtle); font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
	.container { padding: 0 1rem; }
	.hero { align-items: flex-start; padding: 2.5rem 0; }
	.hero__logo { height: 44px; margin-bottom: 1.25rem; }
	.hero h1 { font-size: 28px; }
	.hero__sub { font-size: 16px; margin-bottom: 1.75rem; }
	.navbar__inner { padding: 0.5rem 1rem; }
	.navbar__title { font-size: 17px; }
	.grid { grid-template-columns: 1fr; gap: 1rem; }
	.card { padding: 1.1rem; gap: 0.85rem; }
	.card__icon { width: 50px; height: 50px; border-radius: 14px; }
	.card__icon img { width: 36px; height: 36px; }
	.card__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }