/**
 * Superintech Carousel — front-end styles (v2).
 *
 * Architecture:
 *   - CSS custom properties for cheap per-instance overrides.
 *   - Flexbox equal-height cards (no hard-coded heights anywhere in the card body).
 *   - One shared `.superintech-media` element drives the responsive image system.
 *   - Layouts: carousel (Swiper) | grid (CSS grid) | masonry (CSS columns).
 *   - Card types: standard | image | testimonial | flip | overlay.
 */

.superintech-carousel-wrap {
	--superintech-accent: #e6447d;
	--superintech-card-bg: #ffffff;
	--superintech-anim-duration: 450ms;
	--superintech-glow: #e6447d;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.superintech-carousel-wrap *,
.superintech-carousel-wrap *::before,
.superintech-carousel-wrap *::after {
	box-sizing: border-box;
}

/* ===================================================================== */
/* LAYOUT: CAROUSEL                                                       */
/* ===================================================================== */
.superintech-mode-carousel .superintech-swiper {
	width: 100%;
	overflow: hidden;
}

/* Equal-height slides: every slide stretches to the tallest in view. */
.superintech-mode-carousel .swiper-wrapper {
	align-items: stretch;
}
.superintech-mode-carousel .swiper-slide {
	height: auto;
	display: flex;
}

/* ===================================================================== */
/* LAYOUT: GRID (no slider JS)                                            */
/* ===================================================================== */
.superintech-mode-grid .superintech-grid {
	display: grid;
	grid-template-columns: repeat(var(--superintech-cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch; /* equal-height rows */
}

/* ===================================================================== */
/* LAYOUT: MASONRY (Pinterest-style, intentionally uneven heights)       */
/* ===================================================================== */
.superintech-mode-masonry .superintech-masonry {
	column-count: 3;
	column-gap: 24px;
}
.superintech-mode-masonry .superintech-item {
	display: block;
	width: 100%;
	margin-bottom: 24px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* ===================================================================== */
/* ITEM WRAPPER (shared)                                                 */
/* ===================================================================== */
.superintech-item {
	position: relative;
	width: 100%;
}
.superintech-mode-carousel .superintech-item,
.superintech-mode-grid .superintech-item {
	display: flex; /* let the card fill the item, enabling equal height */
}

/* ===================================================================== */
/* STANDARD CARD — flexbox equal height, button pinned to bottom         */
/* ===================================================================== */
.superintech-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	background: var(--superintech-card-bg);
	transition: transform var(--superintech-anim-duration) ease, box-shadow var(--superintech-anim-duration) ease;
}

.superintech-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;          /* fills remaining height */
	padding: 24px 22px;
	text-align: center;
	align-items: center;
}

/* Body text alignment (drives text, icon and button together). */
.superintech-talign-left .superintech-card__body    { text-align: left;    align-items: flex-start; }
.superintech-talign-center .superintech-card__body  { text-align: center;  align-items: center; }
.superintech-talign-right .superintech-card__body   { text-align: right;   align-items: flex-end; }
.superintech-talign-justify .superintech-card__body { text-align: justify; align-items: stretch; }

.superintech-card__icon {
	font-size: 32px;
	line-height: 1;
	color: var(--superintech-accent);
}
.superintech-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.superintech-card__title {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.25;
}
.superintech-card__subtitle {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.75;
}
.superintech-card__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

/* The button always sits at the bottom regardless of content length. */
.superintech-btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: #2b2a6b;
	border: 0;
	cursor: pointer;
	border-radius: 40px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.superintech-btn:hover,
.superintech-btn:focus-visible {
	background: var(--superintech-accent);
	transform: translateY(-1px);
	outline: none;
}
.superintech-btn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.superintech-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ===================================================================== */
/* RESPONSIVE IMAGE SYSTEM (shared .superintech-media)                   */
/* ===================================================================== */
.superintech-media {
	position: relative;
	width: 100%;
	height: 240px;          /* default; overridden per-device by controls */
	overflow: hidden;
	flex: 0 0 auto;
}
.superintech-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;       /* default; switched by fit modes below */
	object-position: center center;
	transition: transform 0.5s ease;
}

/* Fit modes — image NEVER stretches except in the explicit Fill mode. */
.superintech-fit-cover .superintech-media img   { object-fit: cover; }
.superintech-fit-contain .superintech-media img { object-fit: contain; }
.superintech-fit-fill .superintech-media img    { object-fit: fill; }

/* Original ratio — natural height, no crop. */
.superintech-fit-original .superintech-media {
	height: auto !important;
}
.superintech-fit-original .superintech-media img {
	height: auto;
	object-fit: contain;
}

/* Image zoom on hover (applies to any card type with media). */
.superintech-imgzoom-yes .superintech-item:hover .superintech-media img {
	transform: scale(1.08);
}

/* ===================================================================== */
/* BADGE                                                                 */
/* ===================================================================== */
.superintech-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	padding: 4px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
	background: #2b2a6b;
	border-radius: 30px;
}

/* ===================================================================== */
/* RIBBON (New / Popular / Featured)                                     */
/* ===================================================================== */
.superintech-ribbon {
	position: absolute;
	z-index: 6;
	color: #fff;
	background: var(--superintech-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	pointer-events: none;
}
.superintech-ribbon__txt { display: block; }

/* Pill — top-right rounded tag. */
.superintech-ribbon-pill .superintech-ribbon {
	top: 14px;
	right: 14px;
	padding: 4px 14px;
	border-radius: 30px;
}

/* Flag — top-left tab with a notched tail. */
.superintech-ribbon-flag .superintech-ribbon {
	top: 16px;
	left: 0;
	padding: 5px 16px 5px 12px;
	border-radius: 0 4px 4px 0;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

/* Diagonal corner banner — top-right. */
.superintech-ribbon-corner .superintech-ribbon {
	top: 18px;
	right: -46px;
	width: 160px;
	padding: 6px 0;
	text-align: center;
	transform: rotate(45deg);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* ===================================================================== */
/* HOVER ANIMATIONS                                                      */
/* ===================================================================== */
.superintech-hover-lift .superintech-item:hover .superintech-card,
.superintech-hover-lift .superintech-item:hover .superintech-tst__card {
	transform: translateY(-8px);
}
.superintech-hover-scale .superintech-item:hover .superintech-card,
.superintech-hover-scale .superintech-item:hover .superintech-tst__card {
	transform: scale(1.03);
}
.superintech-hover-shadow .superintech-item:hover .superintech-card,
.superintech-hover-shadow .superintech-item:hover .superintech-tst__card {
	box-shadow: 0 22px 50px rgba(20, 18, 40, 0.22);
}
.superintech-hover-glow .superintech-item:hover .superintech-card,
.superintech-hover-glow .superintech-item:hover .superintech-tst__card {
	box-shadow: 0 0 0 2px var(--superintech-glow), 0 0 18px 2px var(--superintech-glow);
}

/* ===================================================================== */
/* ENTRANCE ANIMATIONS (revealed by IntersectionObserver -> .is-revealed)*/
/* ===================================================================== */
.superintech-entrance-fade .superintech-item,
.superintech-entrance-up .superintech-item,
.superintech-entrance-down .superintech-item,
.superintech-entrance-zoom .superintech-item,
.superintech-entrance-rotate .superintech-item {
	opacity: 0;
	transition: opacity var(--superintech-anim-duration) ease, transform var(--superintech-anim-duration) ease;
	will-change: opacity, transform;
}
.superintech-entrance-up .superintech-item     { transform: translateY(34px); }
.superintech-entrance-down .superintech-item   { transform: translateY(-34px); }
.superintech-entrance-zoom .superintech-item   { transform: scale(0.9); }
.superintech-entrance-rotate .superintech-item { transform: rotate(-4deg) scale(0.95); }

.superintech-carousel-wrap .superintech-item.is-revealed {
	opacity: 1;
	transform: none;
}

/* ===================================================================== */
/* ARROWS                                                                */
/* ===================================================================== */
.superintech-arrow {
	position: absolute;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	color: var(--superintech-accent);
	background: rgba(255, 255, 255, 0.9);
	border: 2px solid currentColor;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}
.superintech-arrow svg { width: 20px; height: 20px; pointer-events: none; }
/* Hover/focus colours are driven by the Arrows > Hover style controls.
   Defaults there reproduce the white-on-accent look. */
.superintech-arrow:hover,
.superintech-arrow:focus-visible {
	outline: none;
}
.superintech-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}
.superintech-arrow.swiper-button-lock { display: none; }

/* Per-breakpoint navigation visibility (e.g. arrows on desktop, dots on mobile).
   Dots are rendered when enabled on EITHER breakpoint, then shown/hidden here. */
@media (max-width: 767px) {
	.superintech-arrows-hide-m .superintech-arrow { display: none !important; }
	.superintech-carousel-wrap:not(.superintech-dots-m) .superintech-dots { display: none !important; }
}
@media (min-width: 768px) {
	.superintech-carousel-wrap:not(.superintech-dots-d) .superintech-dots { display: none !important; }
}

/* Arrow shapes */
.superintech-arrowstyle-circle .superintech-arrow  { border-radius: 50%; }
.superintech-arrowstyle-rounded .superintech-arrow { border-radius: 10px; }
.superintech-arrowstyle-square .superintech-arrow  { border-radius: 0; }

/* Arrow positions */
.superintech-arrows-inside .superintech-arrow {
	top: 50%;
	transform: translateY(-50%);
}
.superintech-arrows-inside .superintech-arrow:hover { transform: translateY(-50%) scale(1.05); }
.superintech-arrows-inside .superintech-arrow--prev { left: 10px; }
.superintech-arrows-inside .superintech-arrow--next { right: 10px; }

.superintech-arrows-outside .superintech-arrow {
	top: 50%;
	transform: translateY(-50%);
}
.superintech-arrows-outside .superintech-arrow--prev { left: -66px; }
.superintech-arrows-outside .superintech-arrow--next { right: -66px; }

.superintech-arrows-top { padding-top: 66px; }
.superintech-arrows-top .superintech-arrow { top: 8px; }
.superintech-arrows-top .superintech-arrow--prev { right: 66px; left: auto; }
.superintech-arrows-top .superintech-arrow--next { right: 10px; }

/* Bottom: arrows are taken OUT of absolute positioning and placed in normal
   flow, centered BELOW the carousel. Because they are block-flow content after
   the slider, they can never overlap the cards. Dots sit below them. */
.superintech-arrows-bottom { text-align: center; }
.superintech-arrows-bottom .superintech-arrow {
	position: static;
	display: inline-flex;
	vertical-align: middle;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	transform: none;
	margin: 18px 6px 0;
}
.superintech-arrows-bottom .superintech-arrow:hover { transform: scale(1.06); }
.superintech-arrows-bottom .swiper-pagination.superintech-dots { margin-top: 14px; }

/* ===================================================================== */
/* PAGINATION DOTS                                                       */
/* ===================================================================== */
.superintech-carousel-wrap .swiper-pagination.superintech-dots {
	position: static;
	margin-top: 22px;
	line-height: 0;
}
.superintech-dots-center .superintech-dots { text-align: center; }
.superintech-dots-left .superintech-dots   { text-align: left; }
.superintech-dots-right .superintech-dots  { text-align: right; }

.superintech-carousel-wrap .swiper-pagination-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px !important;
	background: #d9b8c8;
	opacity: 1;
	border-radius: 50%;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.superintech-carousel-wrap .swiper-pagination-bullet-active {
	background: var(--superintech-accent);
	transform: scale(1.25);
}

/* ===================================================================== */
/* FILTER TABS (filterable gallery)                                      */
/* ===================================================================== */
.superintech-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 26px;
}
.superintech-filter__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	color: var(--superintech-primary, #2b2a6b);
	background: transparent;
	padding: 10px 18px;
	border-radius: 30px;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.superintech-filter__btn:focus-visible {
	outline: 3px solid var(--superintech-accent);
	outline-offset: 2px;
}

/* Pills (default) */
.superintech-fstyle-pills .superintech-filter__btn { background: #f1eef5; }
.superintech-fstyle-pills .superintech-filter__btn:hover { background: #e7e1ee; }
.superintech-fstyle-pills .superintech-filter__btn.is-active {
	color: #fff;
	background: var(--superintech-filter-active, var(--superintech-accent));
}

/* Solid buttons */
.superintech-fstyle-buttons .superintech-filter__btn { background: transparent; border: 2px solid #e0dae8; }
.superintech-fstyle-buttons .superintech-filter__btn.is-active {
	color: #fff;
	background: var(--superintech-filter-active, var(--superintech-accent));
	border-color: var(--superintech-filter-active, var(--superintech-accent));
}

/* Underline */
.superintech-fstyle-underline .superintech-filter__btn { padding: 8px 6px; border-radius: 0; border-bottom: 2px solid transparent; }
.superintech-fstyle-underline .superintech-filter__btn.is-active {
	color: var(--superintech-filter-active, var(--superintech-accent));
	border-bottom-color: var(--superintech-filter-active, var(--superintech-accent));
}

/* Minimal text */
.superintech-fstyle-minimal .superintech-filter__btn { padding: 6px 8px; opacity: 0.6; }
.superintech-fstyle-minimal .superintech-filter__btn:hover { opacity: 0.85; }
.superintech-fstyle-minimal .superintech-filter__btn.is-active { opacity: 1; color: var(--superintech-filter-active, var(--superintech-accent)); }

/* Filtered-out items + reveal transition for the visible ones. */
.superintech-carousel-wrap[data-superintech-filter] .superintech-item {
	transition: opacity var(--superintech-filter-speed, 350ms) ease, transform var(--superintech-filter-speed, 350ms) ease;
}
.superintech-item.is-hidden { display: none !important; }

/* ===================================================================== */
/* FLIP BOX                                                              */
/* ===================================================================== */
.superintech-type-flip .superintech-flipbox {
	position: relative;
	width: 100%;
	height: 340px;
	perspective: 1400px;
}
.superintech-type-flip.superintech-fliptrigger-click .superintech-flipbox { cursor: pointer; }

.superintech-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform var(--superintech-anim-duration) cubic-bezier(0.4, 0.2, 0.2, 1);
	transform-style: preserve-3d;
}
.superintech-flip__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: inherit;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.superintech-flip__front { background: var(--superintech-card-bg); }
.superintech-flip__media { flex: 1 1 auto; height: auto !important; }
.superintech-flip__front-body {
	flex: 0 0 auto;
	padding: 18px 20px;
	text-align: center;
}
.superintech-flip__back {
	background: #2b2a6b;
	color: #fff;
	transform: rotateY(180deg);
}
.superintech-flip__back-body {
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	text-align: center;
	align-items: center;
}
.superintech-flip__title { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.superintech-flip__subtitle { margin: 0; font-size: 0.95rem; opacity: 0.8; }
.superintech-flip__desc { margin: 0; font-size: 1rem; line-height: 1.55; }

/* Vertical flip variant */
.superintech-flip-vertical .superintech-flip__back { transform: rotateX(180deg); }

/* Triggers */
.superintech-fliptrigger-hover .superintech-flipbox:hover .superintech-flip__inner,
.superintech-fliptrigger-hover .superintech-flipbox:focus-within .superintech-flip__inner {
	transform: rotateY(180deg);
}
.superintech-flip-vertical.superintech-fliptrigger-hover .superintech-flipbox:hover .superintech-flip__inner,
.superintech-flip-vertical.superintech-fliptrigger-hover .superintech-flipbox:focus-within .superintech-flip__inner {
	transform: rotateX(180deg);
}
.superintech-fliptrigger-click .superintech-flipbox.is-flipped .superintech-flip__inner {
	transform: rotateY(180deg);
}
.superintech-flip-vertical.superintech-fliptrigger-click .superintech-flipbox.is-flipped .superintech-flip__inner {
	transform: rotateX(180deg);
}

/* ===================================================================== */
/* OVERLAY CARD — professional portfolio pattern                         */
/* ===================================================================== */
/* Image + scrim are absolute fills. The content is absolutely anchored to an
   edge. For the canonical bottom + reveal-on-hover behaviour, JS measures the
   reveal block and sets --superintech-reveal-shift; by default the content is
   translated DOWN by that amount (transform only — no reflow), leaving the
   title 20px above the bottom. On hover the content translates to 0 (slides
   up) and the reveal fades in. Equal card heights are preserved because the
   content's transform never changes the card's box. */
.superintech-type-overlay .superintech-overlay {
	position: relative;
	width: 100%;
	min-height: 360px;
	overflow: hidden;
}
.superintech-type-overlay .superintech-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100% !important;
}
.superintech-overlay__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(20, 18, 40, 0.55);
}
.superintech-overlay .superintech-card__badge { z-index: 3; }

.superintech-overlay__content {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;            /* 20px between title / description / button */
	padding: 20px;        /* 20px from every edge */
	color: #fff;
}
.superintech-overlay__reveal {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.superintech-overlay__title { margin: 0; font-size: 1.4rem; line-height: 1.25; }
.superintech-overlay__subtitle { margin: 0; font-size: 0.95rem; opacity: 0.85; }
.superintech-overlay__desc { margin: 0; font-size: 1rem; line-height: 1.55; }
.superintech-overlay__content .superintech-btn { align-self: flex-start; }

/* Alignment anchors */
.superintech-ovalign-bottom .superintech-overlay__content { bottom: 0; }
.superintech-ovalign-top .superintech-overlay__content    { top: 0; }
.superintech-ovalign-center .superintech-overlay__content { top: 50%; transform: translateY(-50%); }
.superintech-ovalign-center .superintech-overlay__content,
.superintech-ovalign-center .superintech-overlay__reveal { text-align: center; align-items: center; }

/* --- Reveal-on-hover (bottom alignment): transform-based, zero reflow --- */
.superintech-ovhover-yes.superintech-ovalign-bottom .superintech-overlay__content {
	transform: translateY(var(--superintech-reveal-shift, 0px));
}
.superintech-ovhover-yes.superintech-ovalign-bottom .superintech-ov-ready .superintech-overlay__content {
	transition: transform var(--superintech-anim-duration, 400ms) ease;
}
.superintech-ovhover-yes.superintech-ovalign-bottom .superintech-overlay:hover .superintech-overlay__content,
.superintech-ovhover-yes.superintech-ovalign-bottom .superintech-overlay:focus-within .superintech-overlay__content {
	transform: translateY(0);
}
/* Reveal block fades/slides in on hover (all alignments). */
.superintech-ovhover-yes .superintech-overlay__reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--superintech-anim-duration, 400ms) ease, transform var(--superintech-anim-duration, 400ms) ease;
}
.superintech-ovhover-yes .superintech-overlay:hover .superintech-overlay__reveal,
.superintech-ovhover-yes .superintech-overlay:focus-within .superintech-overlay__reveal {
	opacity: 1;
	transform: none;
}

/* ===================================================================== */
/* IMAGE CARD                                                            */
/* ===================================================================== */
.superintech-img__fig { margin: 0; width: 100%; }
.superintech-img__media {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 16px;
}
.superintech-img__media.is-zoomable { cursor: zoom-in; }
.superintech-img__caption {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	padding: 14px 16px;
	color: #fff;
	font-size: 0.95rem;
	background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
.superintech-cap-overlay-top .superintech-img__caption { top: 0; bottom: auto; background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)); }
.superintech-cap-overlay-bottom .superintech-img__caption { bottom: 0; }
.superintech-img__caption--below {
	position: static;
	color: inherit;
	background: none;
	padding: 12px 4px 0;
	text-align: center;
}

/* Ken Burns slow zoom on the active slide. */
.superintech-kenburns-yes .swiper-slide-active .superintech-img__media img {
	animation: superintech-kenburns 8s ease-out forwards;
}
@keyframes superintech-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* ===================================================================== */
/* TESTIMONIALS                                                          */
/* ===================================================================== */
.superintech-tst__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 auto;
	width: 100%;
	padding: 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(43, 42, 107, 0.08);
	transition: transform var(--superintech-anim-duration) ease, box-shadow var(--superintech-anim-duration) ease;
}
.superintech-tst__quote {
	font-size: 3rem;
	line-height: 0.6;
	color: var(--superintech-accent);
	font-family: Georgia, "Times New Roman", serif;
}
.superintech-tst__content {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: #4a4a5a;
}
.superintech-tst__more {
	align-self: flex-start;
	border: 0;
	background: none;
	padding: 0;
	color: var(--superintech-accent);
	font-weight: 600;
	cursor: pointer;
}
.superintech-tst__footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
}
.superintech-tst__avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
}
.superintech-tst__avatar img { width: 100%; height: 100%; object-fit: cover; }
.superintech-tst__person { display: flex; flex-direction: column; gap: 2px; }
.superintech-tst__name { font-weight: 700; color: #2b2a6b; display: inline-flex; align-items: center; gap: 6px; }
.superintech-tst__meta { font-size: 0.88rem; color: #8a8a9a; }
.superintech-tst__verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 10px;
	color: #fff;
	background: #1d9bf0;
	border-radius: 50%;
}

.superintech-avatar-top .superintech-tst__footer { flex-direction: column; text-align: center; }
.superintech-avatar-top .superintech-tst__person { align-items: center; }
.superintech-avatar-right .superintech-tst__footer { flex-direction: row-reverse; text-align: right; }
.superintech-avatar-right .superintech-tst__person { align-items: flex-end; }

.superintech-stars {
	--superintech-star: #f5b301;
	--superintech-star-empty: #e0d6dd;
	display: inline-flex;
	gap: 2px;
	font-size: 18px;
	line-height: 1;
}
.superintech-stars .superintech-star { color: var(--superintech-star-empty); }
.superintech-stars .superintech-star.is-full { color: var(--superintech-star); }
.superintech-stars .superintech-star.is-half {
	background: linear-gradient(90deg, var(--superintech-star) 50%, var(--superintech-star-empty) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.superintech-tst__video {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	color: var(--superintech-accent);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.superintech-tst__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	background: var(--superintech-accent);
}
.superintech-tst__play svg { width: 14px; height: 14px; margin-left: 1px; }
.superintech-tst__video:hover { text-decoration: underline; }

.superintech-tst__rating { display: flex; align-items: center; gap: 8px; }
.superintech-rating-num { font-weight: 700; color: #2b2a6b; font-size: 0.9rem; }

/* Testimonial skins */
.superintech-tskin-classic .superintech-tst__card { box-shadow: none; border: 1px solid #ece7ee; }
.superintech-tskin-minimal .superintech-tst__card { box-shadow: none; background: transparent; padding: 16px; }
.superintech-tskin-agency .superintech-tst__card { background: #2b2a6b; color: #fff; }
.superintech-tskin-agency .superintech-tst__content,
.superintech-tskin-agency .superintech-tst__name { color: #fff; }
.superintech-tskin-agency .superintech-tst__meta { color: #b9b8e0; }
.superintech-tskin-glass .superintech-tst__card {
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.superintech-tskin-review .superintech-tst__card { border: 1px solid #ece7ee; box-shadow: none; }
.superintech-tskin-review .superintech-tst__rating { order: -1; }
.superintech-tskin-quote .superintech-tst__content { font-size: 1.35rem; font-style: italic; }
.superintech-tskin-quote .superintech-tst__quote { font-size: 4rem; }
.superintech-tskin-signature .superintech-tst__card {
	background: linear-gradient(135deg, #fff 0%, #fbf3f7 100%);
	border-left: 4px solid var(--superintech-accent);
}

/* Testimonial headline (above the quote) */
.superintech-tst__headline { margin: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--superintech-accent); }

/* ---- Testimonial layouts (avatar/text arrangement) ---- */
.superintech-tst__avatar--top { width: 72px; height: 72px; margin-bottom: 4px; }
/* Centered/large get a bigger headline + rating to match a hero testimonial. */
.superintech-tlayout-centered .superintech-tst__headline,
.superintech-tlayout-large .superintech-tst__headline { font-size: 1.6rem; }
.superintech-tlayout-centered .superintech-stars,
.superintech-tlayout-large .superintech-stars { font-size: 22px; }
.superintech-tlayout-large .superintech-tst__card { gap: 18px; }

.superintech-tlayout-centered .superintech-tst__card,
.superintech-tlayout-bubble .superintech-tst__card,
.superintech-tlayout-large .superintech-tst__card { text-align: center; align-items: center; }
.superintech-tlayout-centered .superintech-tst__rating,
.superintech-tlayout-bubble .superintech-tst__rating,
.superintech-tlayout-large .superintech-tst__rating { justify-content: center; }

/* Centered: stars → headline → quote → [avatar  name] centered row. */
.superintech-tlayout-centered .superintech-tst__footer {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}
.superintech-tlayout-centered .superintech-tst__person { align-items: flex-start; text-align: left; }
.superintech-tlayout-centered .superintech-tst__avatar { width: 42px; height: 42px; }
.superintech-tlayout-centered .superintech-tst__name { font-size: 1.05rem; }

/* Bubble / Large: avatar above the name, centered. */
.superintech-tlayout-bubble .superintech-tst__footer,
.superintech-tlayout-large .superintech-tst__footer { flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 14px; }
.superintech-tlayout-bubble .superintech-tst__person,
.superintech-tlayout-large .superintech-tst__person { align-items: center; }

/* Stacked: avatar pinned top-left. */
.superintech-tlayout-stacked .superintech-tst__avatar--top { align-self: flex-start; }

/* Speech bubble */
.superintech-tlayout-bubble .superintech-tst__content {
	position: relative;
	padding: 18px 20px;
	background: #f5f3f9;
	border-radius: 14px;
}
.superintech-tlayout-bubble .superintech-tst__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #f5f3f9;
}

/* Large quote */
.superintech-tlayout-large .superintech-tst__content { font-size: 1.3rem; line-height: 1.55; font-style: italic; }

/* ===================================================================== */
/* GLASSMORPHISM (standard card)                                         */
/* ===================================================================== */
.superintech-glass-yes .superintech-card {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ===================================================================== */
/* LIGHTBOX                                                              */
/* ===================================================================== */
.superintech-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(0, 0, 0, 0.88);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.superintech-lightbox.is-open { opacity: 1; visibility: visible; }
.superintech-lightbox img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}
.superintech-lightbox__close {
	position: absolute;
	top: 18px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

/* ===================================================================== */
/* EMPTY STATE                                                           */
/* ===================================================================== */
.superintech-empty {
	padding: 28px;
	text-align: center;
	color: #777;
	border: 1px dashed #ccc;
	border-radius: 10px;
}

/* ===================================================================== */
/* ACCESSIBILITY — visible focus on all interactive surfaces             */
/* ===================================================================== */
.superintech-carousel-wrap a:focus-visible,
.superintech-carousel-wrap button:focus-visible,
.superintech-flipbox:focus-visible,
.superintech-img__media:focus-visible {
	outline: 3px solid var(--superintech-accent);
	outline-offset: 2px;
}

/* ===================================================================== */
/* RESPONSIVE                                                            */
/* ===================================================================== */
@media (max-width: 1024px) {
	.superintech-arrows-outside .superintech-arrow--prev { left: 4px; }
	.superintech-arrows-outside .superintech-arrow--next { right: 4px; }
	.superintech-arrows-outside .superintech-arrow { background: rgba(255, 255, 255, 0.92); }
}

@media (max-width: 767px) {
	.superintech-card__title { font-size: 1.25rem; }
	.superintech-arrow { width: 40px; height: 40px; }
	.superintech-arrow svg { width: 16px; height: 16px; }
	.superintech-tst__card { padding: 22px; }
	.superintech-tskin-quote .superintech-tst__content { font-size: 1.15rem; }
}

@media (max-width: 480px) {
	.superintech-avatar-right .superintech-tst__footer { flex-direction: column; text-align: center; }
	.superintech-avatar-right .superintech-tst__person { align-items: center; }
}

/* ===================================================================== */
/* REDUCED MOTION                                                        */
/* ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.superintech-carousel-wrap *,
	.superintech-card,
	.superintech-media img,
	.superintech-btn,
	.superintech-arrow,
	.superintech-flip__inner,
	.superintech-overlay__reveal,
	.superintech-carousel-wrap .swiper-pagination-bullet {
		transition: none !important;
		animation: none !important;
	}
	.superintech-carousel-wrap .superintech-item {
		opacity: 1 !important;
		transform: none !important;
	}
}