.techie-cards {
	--techie-accent: #ff5c35;
	--techie-cols: 2;
	--techie-cols-tablet: 2;
	--techie-cols-mobile: 1;
	--techie-gap: 26px;
	--techie-card-pad: 30px;
	--techie-card-bg: #fff;
	--techie-title: #16181d;
	--techie-text: #5a6270;
	--techie-title-size: 20px;
	--techie-border-size: 1px;
	--techie-border-color: #e8eaf0;
	--techie-radius: 16px;
	--techie-icon-size: 40px;
	--techie-icon-color: var(--techie-accent);
	--techie-icon-bg: transparent;
	--techie-icon-box: 0;
	--techie-icon-radius: 12px;
	--techie-btn-text: #fff;
	--techie-margin-top: 0;
	--techie-margin-bottom: 0;
	box-sizing: border-box;
	border: 0;
	margin: var(--techie-margin-top) 0 var(--techie-margin-bottom);
}

/* Opt-in border around the whole container (off by default) */
.techie-cards--container-bordered {
	border: var(--techie-cont-border-size, 1px) solid var(--techie-cont-border-color, #e8eaf0);
	border-radius: var(--techie-cont-radius, 18px);
	padding: var(--techie-cont-padding, 24px);
}

.techie-cards--container-padded {
	padding: var(--techie-cont-padding, 24px);
}

.techie-cards--container-rounded {
	border-radius: var(--techie-cont-radius, 18px);
}

.techie-cards *,
.techie-cards *::before,
.techie-cards *::after {
	box-sizing: border-box;
}

.techie-cards {
	position: relative;
}

/* ---- Layout (applied to the track that holds the cards) ---- */
.techie-cards--grid .techie-cards__track {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(var(--techie-cols), minmax(0, 1fr));
}

.techie-cards--list .techie-cards__track {
	display: flex;
	flex-direction: column;
	gap: var(--techie-gap);
}

/* ---- Icon / media position (icon sits with the title in the header) ---- */
.techie-card__header {
	display: flex;
}

.techie-card__heading {
	min-width: 0;
}

.techie-cards--icon-top .techie-card__header {
	flex-direction: column;
}

.techie-cards--icon-top .techie-card__media {
	margin-bottom: 18px;
}

.techie-cards--icon-bottom .techie-card__media {
	margin-top: 18px;
}

.techie-cards--icon-left .techie-card__header,
.techie-cards--icon-right .techie-card__header {
	align-items: center;
	flex-direction: row;
	gap: 16px;
}

.techie-cards--icon-right .techie-card__header {
	flex-direction: row-reverse;
}

.techie-cards--icon-left .techie-card__media,
.techie-cards--icon-right .techie-card__media {
	flex: 0 0 auto;
	margin: 0;
}

/* In side layouts an image must not take the full width or it squeezes the
   text into a truncated column; give it a definite, contained width. */
.techie-cards--icon-left .techie-card__media--image,
.techie-cards--icon-right .techie-card__media--image {
	flex: 0 0 auto;
	width: var(--techie-img-w, 120px);
}

/* ---- Card shell ---- */
.techie-card {
	background: var(--techie-card-bg);
	border-radius: var(--techie-radius);
	color: var(--techie-text);
	display: flex;
	flex-direction: column;
	padding: var(--techie-card-pad);
	position: relative;
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.techie-cards--bordered .techie-card {
	border: var(--techie-border-size) solid var(--techie-border-color);
}

.techie-cards--has-min .techie-card {
	min-height: var(--techie-card-min);
}

.techie-cards--equal .techie-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.techie-cards--equal .techie-card__footer {
	margin-top: auto;
}

/* Alignment */
.techie-cards--align-center .techie-card {
	text-align: center;
}

.techie-cards--align-center .techie-card__header {
	align-items: center;
}

.techie-cards--align-center .techie-card__buttons {
	justify-content: center;
}

.techie-cards--align-right .techie-card {
	text-align: right;
}

.techie-cards--align-right .techie-card__header {
	align-items: flex-end;
}

.techie-cards--align-right .techie-card__buttons {
	justify-content: flex-end;
}

/* Shadow */
.techie-cards--shadow-soft .techie-card {
	box-shadow: var(--techie-shadow-sm);
}

.techie-cards--shadow-strong .techie-card {
	box-shadow: var(--techie-shadow-md);
}

/* Hover */
.techie-cards--hover-lift .techie-card:hover {
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-6px);
}

.techie-cards--hover-glow .techie-card:hover {
	border-color: var(--techie-accent);
	box-shadow: 0 14px 40px color-mix(in srgb, var(--techie-accent), transparent 78%);
}

/* ---- Media ---- */
.techie-card__media {
	align-items: center;
	color: var(--techie-icon-color);
	display: inline-flex;
	justify-content: center;
	margin-bottom: 18px;
}

.techie-card__media--svg svg,
.techie-card__media--text span {
	height: var(--techie-icon-size);
	max-height: var(--techie-icon-size);
	max-width: var(--techie-icon-size);
	width: var(--techie-icon-size);
}

.techie-card__media--svg svg {
	display: block;
}

.techie-card__media--text span {
	align-items: center;
	color: var(--techie-icon-color);
	display: inline-flex;
	font-size: calc(var(--techie-icon-size) * .72);
	justify-content: center;
	line-height: 1;
}

.techie-card__media--image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	width: 100%;
}

.techie-card__media--image .techie-card__img {
	border-radius: var(--techie-img-radius, 12px);
	display: block;
	height: var(--techie-img-h, auto);
	margin-left: auto;
	margin-right: auto;
	max-height: var(--techie-img-max, 320px);
	max-width: 100%;
	object-fit: var(--techie-img-fit, cover);
	width: var(--techie-img-w, 100%);
}

/* Icon box background */
.techie-cards--icon-boxed .techie-card__media--svg,
.techie-cards--icon-boxed .techie-card__media--text {
	background: var(--techie-icon-bg);
	border-radius: var(--techie-icon-radius);
	padding: var(--techie-icon-box);
}

/* SVG recolor (toggleable). Preserves fill="none" so outline icons stay outlined. */
.techie-cards--recolor .techie-card__media--svg svg {
	color: var(--techie-icon-color);
	fill: var(--techie-icon-color);
}

.techie-cards--recolor .techie-card__media--svg svg *:not([fill="none"]) {
	fill: var(--techie-icon-color);
}

.techie-cards--recolor .techie-card__media--svg svg [stroke]:not([stroke="none"]) {
	stroke: var(--techie-icon-color);
}

/* ---- Text ---- */
.techie-card__title {
	color: var(--techie-title);
	font-size: var(--techie-title-size);
	line-height: 1.25;
	margin: 0;
}

.techie-card__subtitle {
	color: var(--techie-text);
	font-size: 14px;
	margin: 6px 0 0;
	opacity: .85;
}

.techie-card__text {
	margin-top: 12px;
}

.techie-card__text > :first-child {
	margin-top: 0;
}

.techie-card__text > :last-child {
	margin-bottom: 0;
}

.techie-card__features {
	counter-reset: techie-item;
	display: grid;
	gap: var(--techie-list-gap, 12px);
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.techie-card__features li {
	align-items: baseline;
	display: flex;
	gap: 12px;
	line-height: 1.5;
}

.techie-card__features li::before {
	color: var(--techie-marker, var(--techie-accent));
	flex: 0 0 auto;
	font-weight: 700;
}

.techie-cards--align-center .techie-card__features {
	margin-inline: auto;
	text-align: left;
	width: fit-content;
}

/* ---- Checklist marker styles ---- */
.techie-cards--marker-check .techie-card__features li::before {
	content: "\2713";
	font-size: 15px;
	font-weight: 800;
}

.techie-cards--marker-bullet .techie-card__features li::before {
	content: "\2022";
	font-size: 18px;
}

.techie-cards--marker-dash .techie-card__features li::before {
	content: "\2013";
	font-weight: 800;
}

.techie-cards--marker-arrow .techie-card__features li::before {
	content: "\2192";
	font-weight: 800;
}

.techie-cards--marker-number .techie-card__features li {
	counter-increment: techie-item;
}

.techie-cards--marker-number .techie-card__features li::before {
	content: counter(techie-item) ".";
	min-width: 1.3em;
	text-align: right;
}

.techie-cards--marker-none .techie-card__features li::before {
	display: none;
}

/* ---- Footer ---- */
.techie-card__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	justify-content: space-between;
	margin-top: 20px;
}

.techie-cards--divided .techie-card__footer {
	border-top: 1px solid var(--techie-border-color);
	margin-top: 22px;
	padding-top: 20px;
}

.techie-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---- Buttons ---- */
.techie-card__btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	padding: 10px 20px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.techie-card__btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.techie-card__btn--solid {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: var(--techie-btn-text);
}

.techie-card__btn--outline {
	background: transparent;
	border-color: var(--techie-accent);
	color: var(--techie-accent);
}

.techie-card__btn--outline:hover {
	background: var(--techie-accent);
	color: var(--techie-btn-text);
}

.techie-card__btn--ghost {
	background: color-mix(in srgb, var(--techie-accent), #fff 86%);
	color: var(--techie-accent);
}

.techie-card__btn--link {
	background: transparent;
	border: 0;
	color: var(--techie-accent);
	padding-inline: 0;
}

/* ---- Learn more control ---- */
.techie-card__learn {
	align-items: center;
	background: none;
	border: 0;
	color: var(--techie-title);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	padding: 0;
}

.techie-card__learn:hover {
	color: var(--techie-accent);
}

.techie-card__arrow {
	background: currentColor;
	height: 2px;
	position: relative;
	transition: transform .2s ease;
	width: 16px;
}

.techie-card__arrow::after {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 7px;
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 7px;
}

.techie-card__learn:hover .techie-card__arrow {
	transform: translateX(3px);
}

.techie-card__learn[aria-expanded="true"] .techie-card__arrow {
	transform: rotate(90deg);
}

/* ---- Accordion panel (JS-enhanced) ---- */
.techie-cards[data-techie-js] .techie-card__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s ease;
}

.techie-cards[data-techie-js] .techie-card__more.is-open {
	grid-template-rows: 1fr;
	margin-top: 16px;
}

.techie-card__more-inner {
	min-height: 0;
	overflow: hidden;
}

.techie-card__more-inner > :first-child {
	margin-top: 0;
}

.techie-card__more-inner > :last-child {
	margin-bottom: 0;
}

/* ---- Popover (contained within the card) ---- */
.techie-card__popover[hidden] {
	display: none;
}

.techie-card__popover {
	background: var(--techie-card-bg, #fff);
	border-radius: inherit;
	box-shadow: var(--techie-shadow-sm);
	color: var(--techie-text);
	display: flex;
	flex-direction: column;
	inset: 0;
	overflow: auto;
	padding: var(--techie-card-pad);
	position: absolute;
	text-align: left;
	z-index: 6;
	animation: techie-card-pop .18s ease;
}

@keyframes techie-card-pop {
	from { opacity: 0; transform: scale(.98); }
	to { opacity: 1; transform: none; }
}

.techie-card__popover-close {
	background: none;
	border: 0;
	color: #8a90a0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 16px;
	top: 12px;
}

.techie-card__popover-close:hover {
	color: var(--techie-title);
}

.techie-card__popover-title {
	color: var(--techie-title);
	font-size: var(--techie-title-size);
	margin: 0 0 12px;
	padding-right: 24px;
}

.techie-card__popover-content > :first-child {
	margin-top: 0;
}

.techie-card__popover-content > :last-child {
	margin-bottom: 0;
}



/* ==================== IMAGE SHAPES ==================== */
/* Circle + square use an explicit avatar size so they always render at a
   correct, predictable size — including inside the UX Builder where the
   attachment is injected without our width/height styles. */
.techie-cards--img-circle .techie-card__media--image,
.techie-cards--img-square .techie-card__media--image {
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
	width: var(--techie-avatar-size, 96px);
}

.techie-cards--img-circle .techie-card__media--image .techie-card__img,
.techie-cards--img-square .techie-card__media--image .techie-card__img {
	display: block;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.techie-cards--img-circle .techie-card__media--image {
	border-radius: 50%;
}

.techie-cards--img-circle .techie-card__media--image .techie-card__img {
	border-radius: 50%;
}

.techie-cards--img-square .techie-card__media--image {
	border-radius: var(--techie-img-radius, 16px);
}

.techie-cards--img-cover .techie-card__media--image {
	width: 100%;
}

.techie-cards--img-cover .techie-card__img {
	height: var(--techie-img-h, 200px);
	max-height: none;
	object-fit: cover;
	width: 100%;
}


/* ==================== SLIDER ARROW STYLES ==================== */
.techie-cards--arrows-square .techie-cards__arrow {
	border-radius: 10px;
}

.techie-cards--arrows-ghost .techie-cards__arrow {
	background: color-mix(in srgb, var(--techie-accent), transparent 88%);
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-ghost .techie-cards__arrow:hover {
	background: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-line .techie-cards__arrow {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-line .techie-cards__arrow:hover {
	color: var(--techie-accent);
	transform: translateY(-50%) scale(1.15);
}

.techie-cards--arrows-pill .techie-cards__arrow {
	border-radius: 999px;
	width: 66px;
}

.techie-cards--arrows-outline .techie-cards__arrow {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 55%);
	box-shadow: none;
}

.techie-cards--arrows-outline .techie-cards__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-soft .techie-cards__arrow {
	background: color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-soft .techie-cards__arrow:hover {
	background: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-floating .techie-cards__arrow {
	border-color: transparent;
	box-shadow: var(--techie-shadow-lg);
}

.techie-cards--arrows-floating .techie-cards__arrow:hover {
	box-shadow: var(--techie-shadow-xl);
	transform: translateY(-50%) scale(1.08);
}

/* ==================== SLIDER BULLET STYLES ==================== */
/* Base dot is the expanding pill; variants override shape/behaviour. */
.techie-cards--dots-dash .techie-cards__dot,
.techie-cards--dots-dash .techie-cards__dot.is-active {
	border-radius: 999px;
	height: 4px;
	width: 20px;
}

.techie-cards--dots-circle .techie-cards__dot,
.techie-cards--dots-circle .techie-cards__dot.is-active {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.techie-cards--dots-square .techie-cards__dot,
.techie-cards--dots-square .techie-cards__dot.is-active {
	border-radius: 3px;
	height: 10px;
	width: 10px;
}

.techie-cards--dots-line .techie-cards__dot,
.techie-cards--dots-line .techie-cards__dot.is-active {
	border-radius: 0;
	height: 2px;
	width: 26px;
}

.techie-cards--dots-ring .techie-cards__dot {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 40%);
	height: 12px;
	width: 12px;
}

.techie-cards--dots-ring .techie-cards__dot.is-active {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	width: 12px;
}

.techie-cards--dots-number .techie-cards__dots {
	counter-reset: techie-card-dot;
}

.techie-cards--dots-number .techie-cards__dot {
	align-items: center;
	background: transparent;
	border-radius: 8px;
	color: color-mix(in srgb, var(--techie-accent), transparent 25%);
	counter-increment: techie-card-dot;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	height: auto;
	justify-content: center;
	min-width: 26px;
	width: auto;
}

.techie-cards--dots-number .techie-cards__dot::before {
	content: counter(techie-card-dot, decimal-leading-zero);
}

.techie-cards--dots-number .techie-cards__dot.is-active {
	background: color-mix(in srgb, var(--techie-accent), transparent 86%);
	color: var(--techie-accent);
	width: auto;
}

.techie-cards--dots-worm .techie-cards__dots {
	background: color-mix(in srgb, var(--techie-accent), transparent 82%);
	border-radius: 999px;
	padding: 5px 8px;
}

.techie-cards--dots-worm .techie-cards__dot {
	background: transparent;
	height: 8px;
	width: 8px;
}

.techie-cards--dots-worm .techie-cards__dot.is-active {
	background: var(--techie-accent);
	width: 26px;
}


/* ==================== STACK DECK SLIDER ==================== */
/* Fanned deck: the active card is in front, the rest sit behind it offset
   down-right (JS positions each by depth). Matches the team-card reference. */
.techie-cards--slider-stack .techie-cards__viewport {
	overflow: visible;
	padding: 6px 74px 40px 6px;
}

.techie-cards--slider-stack .techie-cards__track {
	display: block;
	position: relative;
	transform: none !important;
}

.techie-cards--slider-stack .techie-card {
	left: 0;
	margin: 0 auto;
	max-width: min(80%, 300px);
	right: 0;
	transition: transform .55s var(--techie-ease), opacity .5s ease;
	will-change: transform, opacity;
}

/* Static fan via nth-child so the deck renders in the UX Builder and before
   JS loads. On the front end, cards.js overrides these with inline transforms
   relative to the active card for click/arrow interactivity. */
.techie-cards--slider-stack .techie-card:first-child {
	box-shadow: var(--techie-shadow-lg);
	position: relative;
	z-index: 50;
}

.techie-cards--slider-stack .techie-card:not(:first-child) {
	position: absolute;
	top: 0;
}

.techie-cards--slider-stack .techie-card:nth-child(2) {
	opacity: .9;
	transform: translate3d(20px, 14px, 0) scale(.95);
	z-index: 49;
}

.techie-cards--slider-stack .techie-card:nth-child(3) {
	opacity: .72;
	transform: translate3d(40px, 28px, 0) scale(.9);
	z-index: 48;
}

.techie-cards--slider-stack .techie-card:nth-child(4) {
	opacity: .5;
	transform: translate3d(60px, 42px, 0) scale(.85);
	z-index: 47;
}

.techie-cards--slider-stack .techie-card:nth-child(n+5) {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(60px, 42px, 0) scale(.85);
}

.techie-cards--slider-stack .techie-card:not(:first-child) {
	cursor: pointer;
}

.techie-cards--slider-stack .techie-card.is-active {
	box-shadow: var(--techie-shadow-lg);
}

/* ==================== CARD DESIGN PRESETS ==================== */


/* Profile / Team (image reference): centered circular avatar, name, meta,
   soft rounded card. Forces a round avatar regardless of image_shape. */
.techie-cards--preset-profile .techie-card {
	align-items: center;
	background: var(--techie-card-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	border-radius: 24px;
	box-shadow: var(--techie-shadow-md);
	text-align: center;
	transition: box-shadow .3s var(--techie-ease), transform .3s var(--techie-ease);
}

.techie-cards--preset-profile .techie-card__header {
	align-items: center;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.techie-cards--preset-profile .techie-card__media--image {
	aspect-ratio: 1 / 1;
	background: color-mix(in srgb, var(--techie-accent), #fff 78%);
	border: 5px solid color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-radius: 50%;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: var(--techie-avatar-size, 112px);
}

/* Three-class selector + absolute fill: guarantees the photo crops to the
   circle regardless of the base image rule (height/width/max-height) or how
   the UX Builder injects the attachment. */
.techie-cards--preset-profile .techie-card__media--image .techie-card__img {
	border-radius: 50%;
	display: block;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* Tinted disc behind the avatar, echoing the reference */
.techie-cards--preset-profile .techie-card__heading {
	align-items: center;
}

.techie-cards--preset-profile .techie-card__title {
	font-size: calc(var(--techie-title-size, 20px) * 1.02);
	font-weight: 700;
}

.techie-cards--preset-profile .techie-card__subtitle {
	color: color-mix(in srgb, var(--techie-text, #5a6270), transparent 10%);
}

.techie-cards--preset-profile .techie-card__body {
	align-items: center;
	width: 100%;
}

.techie-cards--preset-profile .techie-card__text {
	text-align: center;
}

.techie-cards--preset-profile .techie-card__features {
	text-align: left;
}

.techie-cards--preset-profile .techie-card:hover {
	box-shadow: var(--techie-shadow-xl);
	transform: translateY(-5px);
}

/* Profile in a center-focus slider: neighbours tuck behind + sit lower,
   echoing the fanned team-card reference. */
.techie-cards--preset-profile.techie-cards--slider-center .techie-card {
	flex-basis: min(64%, 340px);
	opacity: 1;
	transform: scale(.9) translateY(14px);
	z-index: 0;
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card:not(.is-active) {
	box-shadow: var(--techie-shadow-sm);
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card.is-active {
	opacity: 1;
	transform: none;
	z-index: 2;
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card:not(.is-active) .techie-card__body {
	opacity: .55;
}

/* Numbered + Arrow (image 4): auto number badge above title, circular
   arrow button. Uses a CSS counter so no markup change is needed. */
.techie-cards--preset-numbered {
	counter-reset: techie-card;
}

.techie-cards--preset-numbered .techie-card {
	background: var(--techie-card-bg, #f7f7f5);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	border-radius: 20px;
	counter-increment: techie-card;
	overflow: hidden;
	position: relative;
}

.techie-cards--preset-numbered .techie-card__header {
	flex-direction: column;
	position: relative;
}

.techie-cards--preset-numbered .techie-card__heading::before {
	color: color-mix(in srgb, var(--techie-title, #16181d), transparent 45%);
	content: "0" counter(techie-card);
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 14px;
}

.techie-cards--preset-numbered .techie-card__media {
	inset: 0 0 auto auto;
	opacity: .9;
	position: absolute;
}

.techie-cards--preset-numbered .techie-card__learn {
	background: #111;
	border-radius: 50%;
	color: #fff;
	height: 44px;
	justify-content: center;
	margin-top: 20px;
	padding: 0;
	width: 44px;
}

.techie-cards--preset-numbered .techie-card__learn span {
	display: none;
}

.techie-cards--preset-numbered .techie-card__arrow {
	margin: 0;
}

.techie-cards--preset-numbered .techie-card__arrow::after {
	border-color: #fff;
}

.techie-cards--preset-numbered .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-4px);
}

/* Gradient Feature (image 3): bold gradient surface, light text */
.techie-cards--preset-gradient .techie-card {
	background: linear-gradient(150deg, var(--techie-accent), color-mix(in srgb, var(--techie-accent), #7a1fff 55%));
	border: 0;
	border-radius: 24px;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.techie-cards--preset-gradient .techie-card__title,
.techie-cards--preset-gradient .techie-card__subtitle,
.techie-cards--preset-gradient .techie-card__text {
	color: #fff;
}

.techie-cards--preset-gradient .techie-card__title {
	font-weight: 800;
	letter-spacing: -.01em;
}

.techie-cards--preset-gradient .techie-card__subtitle,
.techie-cards--preset-gradient .techie-card__text {
	opacity: .88;
}

.techie-cards--preset-gradient .techie-card__media--svg svg {
	color: rgba(255, 255, 255, .9);
}

.techie-cards--preset-gradient .techie-card:hover {
	box-shadow: 0 26px 60px color-mix(in srgb, var(--techie-accent), transparent 60%);
	transform: translateY(-4px);
}

/* Soft Glass (image 4 lower): frosted translucent panels */
.techie-cards--preset-glass .techie-card {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .28));
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 22px;
	box-shadow: var(--techie-shadow-md);
}

.techie-cards--preset-glass .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-3px);
}

/* Spotlight Hover (image 2): neutral cards, the hovered one lifts + brightens */
.techie-cards--preset-spotlight .techie-card {
	background: color-mix(in srgb, var(--techie-card-bg, #fff), #f3f4f6 60%);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 93%);
	border-radius: 22px;
	opacity: .82;
	transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.techie-cards--preset-spotlight .techie-card:hover {
	background: var(--techie-card-bg, #fff);
	box-shadow: var(--techie-shadow-lg);
	opacity: 1;
	transform: translateY(-6px) scale(1.02);
	z-index: 1;
}

/* Minimal Outline: flat, hairline border, accent on hover */
.techie-cards--preset-outline .techie-card {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 86%);
	border-radius: 16px;
	box-shadow: none;
}

.techie-cards--preset-outline .techie-card:hover {
	border-color: var(--techie-accent);
}

/* Elevated Shadow: borderless floating cards */
.techie-cards--preset-elevated .techie-card {
	background: var(--techie-card-bg, #fff);
	border: 0;
	border-radius: 20px;
	box-shadow: var(--techie-shadow-sm);
	transition: box-shadow .3s ease, transform .3s ease;
}

.techie-cards--preset-elevated .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-5px);
}

/* ---- Slider view (transform-based infinite carousel) ---- */
.techie-cards--slider .techie-cards__track {
	align-items: stretch;
	display: flex;
	gap: var(--techie-gap);
	position: relative;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.techie-cards--slider .techie-cards__viewport {
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

.techie-cards--slider .techie-card {
	flex: 0 0 calc((100% - (var(--techie-cols) - 1) * var(--techie-gap)) / var(--techie-cols));
	height: auto;
	min-width: 0;
}

/* Equal-height internals: body fills, footer anchors */
.techie-cards--slider .techie-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.techie-cards--slider .techie-card__footer {
	margin-top: auto;
}

/* Premium surface: subtle border, soft shadow, hover lift */
.techie-cards--slider .techie-card {
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	box-shadow: var(--techie-shadow-sm);
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.techie-cards--slider.techie-cards--bordered .techie-card {
	border: var(--techie-border-size) solid var(--techie-border-color);
}

.techie-cards--slider .techie-card:hover {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 55%);
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-4px);
}

/* Peek: neighbours partially visible */
.techie-cards--slider-peek .techie-card {
	flex-basis: calc((100% - var(--techie-cols) * var(--techie-gap)) / var(--techie-cols));
}

/* Spaced: extra breathing room */
.techie-cards--slider-gap .techie-cards__track {
	gap: calc(var(--techie-gap) + 14px);
}

/* Center focus: active card emphasised, neighbours dimmed */
.techie-cards--slider-center .techie-card {
	flex-basis: min(80%, 520px);
	opacity: .5;
	transform: scale(.94);
	transition: opacity .4s ease, transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}

.techie-cards--slider-center .techie-card.is-active {
	opacity: 1;
	transform: none;
}

.techie-cards--slider-center .techie-card:hover {
	transform: translateY(-4px) scale(.94);
}

.techie-cards--slider-center .techie-card.is-active:hover {
	transform: translateY(-4px);
}

/* Arrows */
.techie-cards__viewport {
	position: relative;
}

.techie-cards__arrow {
	align-items: center;
	background: var(--techie-card-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 78%);
	border-radius: 50%;
	box-shadow: var(--techie-shadow-xs);
	color: var(--techie-accent);
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
	width: 42px;
	z-index: 4;
}

.techie-cards__arrow:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: 2px;
}

.techie-cards__arrow[hidden] {
	display: none;
}

.techie-cards__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
	transform: translateY(calc(-50% - 1px));
}

/* Reserve side gutters on the viewport only when arrows are visible. */
.techie-cards--slider.is-arrows .techie-cards__viewport {
	padding-left: 60px;
	padding-right: 60px;
}

.techie-cards__arrow--prev {
	left: 0;
}

.techie-cards__arrow--next {
	right: 0;
}

.techie-cards__arrow::before {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 9px;
	width: 9px;
}

.techie-cards__arrow--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.techie-cards__arrow--next::before {
	transform: translateX(-2px) rotate(45deg);
}

/* Dots */
.techie-cards__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-left: 0;
	margin-right: 0;
	margin-top: 20px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.techie-cards__dots:empty {
	display: none;
}

.techie-cards__dot {
	appearance: none;
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	margin: 0;
	min-height: 0;
	padding: 0;
	transition: background-color .2s ease, width .2s ease;
	width: 22px;
}

.techie-cards__dot.is-active {
	background: var(--techie-accent);
	width: 34px;
}

.techie-cards__dot:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 849px) {
	.techie-cards--grid .techie-cards__track {
		grid-template-columns: repeat(var(--techie-cols-tablet), minmax(0, 1fr));
	}

	.techie-cards--slider .techie-card {
		flex-basis: calc((100% - (var(--techie-cols-tablet) - 1) * var(--techie-gap)) / var(--techie-cols-tablet));
	}

	.techie-cards--slider-peek .techie-card {
		flex-basis: calc((100% - var(--techie-cols-tablet) * var(--techie-gap)) / var(--techie-cols-tablet));
	}

	.techie-card__title {
		font-size: var(--techie-title-size-tablet, var(--techie-title-size));
	}
}

/* Independent tablet band so arrow visibility can differ from mobile. */
@media (min-width: 550px) and (max-width: 849px) {
	.techie-cards--noarrows-tablet .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-tablet.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 549px) {
	.techie-cards--grid .techie-cards__track {
		grid-template-columns: repeat(var(--techie-cols-mobile), minmax(0, 1fr));
	}

	.techie-cards--slider .techie-card {
		flex-basis: calc((100% - (var(--techie-cols-mobile) - 1) * var(--techie-gap)) / var(--techie-cols-mobile));
	}

	.techie-cards--slider-peek .techie-card,
	.techie-cards--slider-center .techie-card {
		flex-basis: 86%;
	}

	.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 42px;
		padding-right: 42px;
	}

	.techie-card__title {
		font-size: var(--techie-title-size-mobile, var(--techie-title-size-tablet, var(--techie-title-size)));
	}

	/* Arrows hidden on mobile (default): also reclaim the side gutter so cards
	   use the full width. */
	.techie-cards--noarrows-mobile .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-mobile.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 6px;
		padding-right: 6px;
	}

	.techie-card__footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Desktop arrow hide */
@media (min-width: 850px) {
	.techie-cards--noarrows-desktop .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-desktop.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techie-card,
	.techie-card__btn,
	.techie-card__arrow,
	.techie-card__popover,
	.techie-cards--slider-center .techie-card,
	.techie-cards[data-techie-js] .techie-card__more {
		animation: none;
		transition: none;
	}

	.techie-cards--slider .techie-cards__track {
		transition: none;
	}
}