@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600;700&display=swap");

/* Card showcase carousel (/web-development), sits between #mid-banner and
   #roadmap. A horizontal Swiper of design-technique cards. Every card is a
   624x680 canvas reproduced with container-query units (100cqw = card width),
   so all inner elements scale proportionally with the slide. */

#card-showcase .cs-carousel {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#card-showcase .cs-swiper {
  width: 100%;
  overflow: hidden;
  /* Keep horizontal trackpad swipes inside the carousel so a left swipe never
     triggers the browser's back/forward navigation. */
  overscroll-behavior-x: contain;
}

#card-showcase .cs-swiper .swiper-slide {
  width: auto;
  height: auto;
}

/* ---------- Card shell ---------- */

/* The wrapper is the query container and carries the sizing. 636px is the
   exact Figma card width, so every cqw unit below maps 1:1 to a Figma pixel.
   The card itself must NOT be the container: container-query units used on a
   container resolve against its ANCESTOR container (here: none -> viewport),
   which would blow up the card's own border-radius. Keeping the container on
   the wrapper makes both the radius and the inner elements resolve against
   the card width. */
#card-showcase .cs-card-wrap {
  /* Card keeps the Figma 636:680 proportion but renders a little smaller
     than the raw 636px so the framing (and the side-card peek) matches the
     design. Inner elements are sized in cqw, so they scale with this width. */
  width: 576px;
  max-width: 88vw;
  aspect-ratio: 636 / 680;
  container-type: inline-size;
}

#card-showcase .cs-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11cqw; /* 70px at 636px card width */
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 79.5px rgba(0, 0, 0, 0.55);
  isolation: isolate;
}

#card-showcase .cs-card__head {
  position: absolute;
  top: 7.55cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 82cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.26cqw;
  text-align: center;
  color: #fff;
}

#card-showcase .cs-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 5.66cqw;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

#card-showcase .cs-card__subtitle {
  margin: 0;
  font-weight: 300;
  font-size: 2.52cqw;
  line-height: 1.25;
  opacity: 0.5;
}

/* ========================================================================
   Card 1 — GLASSMORPHISM
   ===================================================================== */

#card-showcase .cs-card--glass {
  background: #101012;
}

#card-showcase .cs-glass__fluid {
  position: absolute;
  top: 9cqw;
  left: 15.7cqw;
  width: 114cqw;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

#card-showcase .cs-glass__fluid--glow {
  top: 30cqw;
  left: -18cqw;
  width: 90cqw;
  transform: rotate(-49deg);
  filter: blur(6cqw);
  opacity: 0.55;
}

/* Transparent glossy glass product panel. The iridescent fluid must stay
   sharp and vivid through the glass (NOT frosted/matte), so there is no
   backdrop blur — only a faint tint, a diagonal gloss sheen and a soft
   bottom darkening for text legibility, matching the Figma. */
#card-showcase .cs-glass__panel {
  position: absolute;
  left: 5cqw;
  top: 25.6cqw;
  width: 52.4cqw;
  height: 76.3cqw;
  z-index: 3;
  border-radius: 8.65cqw;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.06) 100%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(1.15);
  backdrop-filter: saturate(1.15);
  box-shadow: 0 12px 38.4px rgba(0, 0, 0, 0.5), 0 4px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

#card-showcase .cs-glass__thumb {
  position: absolute;
  left: 3.77cqw;
  top: 3.77cqw;
  width: 20.3cqw;
  height: 20.3cqw;
  border-radius: 5.66cqw;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#card-showcase .cs-glass__thumb img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

#card-showcase .cs-glass__export {
  position: absolute;
  right: 3.77cqw;
  top: 3.77cqw;
  width: 7.55cqw;
  height: 7.55cqw;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

#card-showcase .cs-glass__export:hover {
  background: rgba(255, 255, 255, 0.14);
}

#card-showcase .cs-glass__export svg {
  width: 3.9cqw;
  height: 3.9cqw;
}

#card-showcase .cs-glass__meta {
  position: absolute;
  left: 3.77cqw;
  top: 50.9cqw;
  width: 40cqw;
  color: #fff;
  font-family: "Comfortaa", "Inter", sans-serif;
}

#card-showcase .cs-glass__name {
  margin: 0;
  font-weight: 700;
  font-size: 3.77cqw;
}

#card-showcase .cs-glass__price {
  margin: 1.26cqw 0 0;
  font-weight: 700;
  font-size: 2.52cqw;
  opacity: 0.5;
}

#card-showcase .cs-glass__cta {
  position: absolute;
  left: 3.77cqw;
  top: 63cqw;
  width: 44.8cqw;
  height: 9.6cqw;
  border: 0;
  border-radius: 5cqw;
  cursor: pointer;
  color: #fff;
  font-family: "Comfortaa", "Inter", sans-serif;
  font-weight: 600;
  font-size: 2.52cqw;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(163deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 79%, rgba(153, 153, 153, 0.3) 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  transition: filter 0.2s ease;
}

#card-showcase .cs-glass__cta:hover {
  filter: brightness(1.25);
}

/* ========================================================================
   Card 2 — NEUMORPHISM
   ===================================================================== */

#card-showcase .cs-card--neu {
  background: #1c1c1e;
}

/* Recessed weather widget */
#card-showcase .cs-neu__weather {
  position: absolute;
  top: 23.9cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 79.7cqw;
  padding: 3.6cqw 4.4cqw;
  border-radius: 8cqw;
  background: #1c1c1e;
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.65),
    inset -6px -6px 12px rgba(255, 255, 255, 0.04),
    0 1px 1px rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  color: #fff;
}

#card-showcase .cs-neu__wtop {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
}

#card-showcase .cs-neu__wicon {
  flex: 0 0 auto;
  width: 8.5cqw;
  height: 8.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#card-showcase .cs-neu__wicon svg {
  width: 100%;
  height: 100%;
}

#card-showcase .cs-neu__wlabel {
  flex: 1 1 auto;
  min-width: 0;
}

#card-showcase .cs-neu__wstatus {
  margin: 0;
  font-weight: 600;
  font-size: 3.77cqw;
  line-height: 1.15;
}

#card-showcase .cs-neu__wloc {
  margin: 0.6cqw 0 0;
  font-weight: 400;
  font-size: 2.2cqw;
  opacity: 0.55;
}

#card-showcase .cs-neu__wtemp {
  margin: 0;
  align-self: flex-start;
  font-weight: 400;
  font-size: 3.77cqw;
  opacity: 0.85;
}

#card-showcase .cs-neu__wstats {
  display: flex;
  justify-content: space-between;
  gap: 1.5cqw;
}

#card-showcase .cs-neu__stat {
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
}

#card-showcase .cs-neu__sval {
  font-weight: 600;
  font-size: 2.55cqw;
  white-space: nowrap;
}

#card-showcase .cs-neu__slabel {
  font-weight: 400;
  font-size: 2.2cqw;
  opacity: 0.45;
}

/* Neumorphic temperature gauge */
#card-showcase .cs-neu__gauge {
  position: absolute;
  top: 59cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 60.4cqw;
  height: 60.4cqw;
  border-radius: 50%;
  background: #1c1c1e;
  box-shadow:
    12px 12px 24px rgba(0, 0, 0, 0.7),
    -10px -10px 22px rgba(255, 255, 255, 0.04),
    inset 3px 3px 6px rgba(0, 0, 0, 0.5),
    inset -3px -3px 6px rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

#card-showcase .cs-neu__arc {
  position: absolute;
  inset: 6cqw;
  border-radius: 50%;
  background: conic-gradient(from 128deg,
    #2f7ff7 0deg,
    #57a6fb 150deg,
    #8cc0ff 210deg,
    rgba(87, 166, 251, 0) 232deg,
    rgba(87, 166, 251, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7.5cqw), #000 calc(100% - 7.5cqw));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7.5cqw), #000 calc(100% - 7.5cqw));
  filter: drop-shadow(0 0 3cqw rgba(87, 166, 251, 0.35));
}

#card-showcase .cs-neu__dial {
  position: relative;
  z-index: 2;
  width: 34cqw;
  height: 34cqw;
  border-radius: 50%;
  background: #1c1c1e;
  box-shadow:
    inset 5px 5px 10px rgba(0, 0, 0, 0.7),
    inset -5px -5px 10px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
  color: #fff;
  text-align: center;
}

#card-showcase .cs-neu__gtemp {
  margin: 0;
  font-weight: 500;
  font-size: 5.5cqw;
  line-height: 1;
}

#card-showcase .cs-neu__glabel {
  margin: 0;
  font-weight: 500;
  font-size: 1.7cqw;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ========================================================================
   Card 3 — TEXT LAYERING
   ===================================================================== */

#card-showcase .cs-card--text {
  background: #0c0f13;
}

#card-showcase .cs-text__photo,
#card-showcase .cs-text__wing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

#card-showcase .cs-text__photo {
  z-index: 1;
}

/* The word sits between the full photo and the clipped wing overlay. */
#card-showcase .cs-text__word {
  position: absolute;
  top: 31cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 25cqw;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  /* Figma: gradient text fill — brighter/opaque at the bottom, fading to
     translucent at the top so the letter tops dissolve into the sky. */
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.22) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Figma: layered drop shadow (0/4/4 x2 + 0/11/13.9), scaled via cqw. */
  filter:
    drop-shadow(0 0.63cqw 0.63cqw rgba(0, 0, 0, 0.25))
    drop-shadow(0 0.63cqw 0.63cqw rgba(0, 0, 0, 0.25))
    drop-shadow(0 1.73cqw 2.19cqw rgba(0, 0, 0, 0.25));
}

/* Prepared transparent wing cut-out, same frame as the background photo, so
   with identical object-fit/position it aligns exactly over the photo's wing.
   Stacked above the word, it makes the wing pass IN FRONT of the full text —
   the layered-depth effect, no clipping of the text needed. */
#card-showcase .cs-text__wing {
  z-index: 3;
}

#card-showcase .cs-text__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34cqw;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

#card-showcase .cs-text__accent {
  color: #57a6fb;
}

/* ========================================================================
   Card 4 — ANIMATIONS  (gift box drops into the basket)
   ===================================================================== */

#card-showcase .cs-card--anim {
  background: #141414;
}

/* Basket (798dff): full square image placed exactly as in Figma so the
   basket lands bottom-right. A blurred copy underneath is the yellow glow. */
#card-showcase .cs-anim__basket {
  position: absolute;
  left: -46.9cqw;
  top: -42.1cqw;
  width: 204.7cqw;
  height: 204.7cqw;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}

#card-showcase .cs-anim__basket--glow {
  z-index: 1;
  filter: blur(6.9cqw) saturate(1.35);
  opacity: 0.85;
}

/* Discount badges — one source image (0b9171c2) used as a background twice,
   cropped to the purple badge (top) and the orange badge (bottom). */
#card-showcase .cs-anim__badge {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("../../images/websitesP/0b9171c2f200e9a99555730bc424fe539749c58b.png");
}

#card-showcase .cs-anim__badge--top {
  left: 77.2cqw;
  top: 23.7cqw;
  width: 25cqw;
  height: 20.75cqw;
  z-index: 3;
  background-size: 382.39% 345.45%;
  background-position: 100% 51%;
}

#card-showcase .cs-anim__badge--bottom {
  left: -8.65cqw;
  top: 72.6cqw;
  width: 38cqw;
  height: 32.86cqw;
  z-index: 6;
  background-size: 384.81% 335.29%;
  background-position: 3.3% 51.5%;
}

/* Gift box (4b29f7) that drops into the basket, looping. */
#card-showcase .cs-anim__box {
  position: absolute;
  left: -12cqw;
  top: 13cqw;
  width: 58cqw;
  height: 64cqw;
  z-index: 5;
  pointer-events: none;
  transform: rotate(-32deg);
  /* Linear timing so the toss reads as one continuous glide — a per-segment
     ease made the box decelerate at each waypoint, which looked jerky. */
  animation: cs-box-drop 3.8s linear infinite;
  will-change: transform, opacity;
}

#card-showcase .cs-anim__box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes cs-box-drop {
  0%, 14%  { transform: translate(0, 0)      rotate(-32deg) scale(1);    opacity: 1; }
  /* One smooth arc into the basket — closely-spaced steps + linear timing
     keep the velocity continuous (no stop-start), shrinking as it lands. */
  25%      { transform: translate(16cqw, -7cqw) rotate(-24deg) scale(0.9);  opacity: 1; }
  36%      { transform: translate(31cqw, -8cqw) rotate(-16deg) scale(0.78); opacity: 1; }
  47%      { transform: translate(44cqw, -3cqw) rotate(-8deg)  scale(0.65); opacity: 1; }
  57%      { transform: translate(52cqw, 8cqw)  rotate(0deg)   scale(0.52); opacity: 1; }
  65%      { transform: translate(57cqw, 18cqw) rotate(5deg)   scale(0.42); opacity: 1; }
  71%      { transform: translate(59cqw, 27cqw) rotate(9deg)   scale(0.34); opacity: 0; }
  71.5%, 90% { transform: translate(0, 0)    rotate(-32deg) scale(1);    opacity: 0; }
  100%     { transform: translate(0, 0)      rotate(-32deg) scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #card-showcase .cs-anim__box { animation: none; }
}

/* ========================================================================
   Card 5 — SHADOWS  (static collage of shadowed brand tiles)
   ===================================================================== */

#card-showcase .cs-card--shadows {
  background: #141414;
}

#card-showcase .cs-sh__grid {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 31cqw;
  bottom: 4cqw;
  padding: 3.5cqw;
  border-radius: 5cqw;
  background: linear-gradient(155deg, #dfe4e9 0%, #c3ccd4 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1.15fr 1fr 1fr;
  grid-template-areas:
    "phone statement receipt"
    "phone logo home"
    "bottle poster poster";
  gap: 2.8cqw;
  overflow: hidden;
}

#card-showcase .cs-sh__tile {
  margin: 0;
  border-radius: 3cqw;
  overflow: hidden;
  /* Thin light outline around every tile + a deeper, more saturated drop
     shadow so each object reads as distinctly raised (Figma node 1130-4385). */
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.38),
    0 2.8cqw 5.6cqw rgba(0, 0, 0, 0.55);
  position: relative;
  min-width: 0;
}

#card-showcase .cs-sh__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#card-showcase .cs-sh__tile--phone   { grid-area: phone; }
#card-showcase .cs-sh__tile--bottle  { grid-area: bottle; }

#card-showcase .cs-sh__tile--statement {
  grid-area: statement;
  background: linear-gradient(150deg, #2f9e57 0%, #1f7d43 100%);
  display: flex;
  align-items: center;
  padding: 3.2cqw;
}

#card-showcase .cs-sh__tile--statement p {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 3cqw;
  line-height: 1.25;
}

#card-showcase .cs-sh__tile--receipt {
  grid-area: receipt;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 2.6cqw;
  gap: 0.7cqw;
}

#card-showcase .cs-sh__rlabel {
  color: #1f9d52;
  font-weight: 700;
  font-size: 1.55cqw;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#card-showcase .cs-sh__rtext {
  color: #333;
  font-weight: 600;
  font-size: 1.9cqw;
  line-height: 1.2;
}

#card-showcase .cs-sh__rprice {
  color: #1f9d52;
  font-weight: 800;
  font-size: 4.2cqw;
  margin-top: auto;
}

#card-showcase .cs-sh__rcode {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #bbb;
  padding-top: 1cqw;
  color: #999;
  font-size: 1.3cqw;
  text-transform: uppercase;
}

#card-showcase .cs-sh__rcode b { color: #444; }

#card-showcase .cs-sh__barcode {
  height: 2.8cqw;
  background: repeating-linear-gradient(90deg, #222 0 0.4cqw, transparent 0.4cqw 0.75cqw);
}

#card-showcase .cs-sh__tile--logo {
  grid-area: logo;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
}

#card-showcase .cs-sh__mark {
  width: 7cqw;
  height: 7cqw;
  background:
    radial-gradient(circle at 20% 20%, #34b366 22%, transparent 24%),
    radial-gradient(circle at 50% 20%, #34b366 22%, transparent 24%),
    radial-gradient(circle at 80% 20%, #1f7d43 22%, transparent 24%),
    radial-gradient(circle at 20% 50%, #34b366 22%, transparent 24%),
    radial-gradient(circle at 80% 50%, #34b366 22%, transparent 24%),
    radial-gradient(circle at 20% 80%, #1f7d43 22%, transparent 24%),
    radial-gradient(circle at 50% 80%, #34b366 22%, transparent 24%),
    radial-gradient(circle at 80% 80%, #34b366 22%, transparent 24%);
}

#card-showcase .cs-sh__brand {
  color: #1c1c1c;
  font-weight: 700;
  font-size: 2.6cqw;
  letter-spacing: -0.01em;
}

#card-showcase .cs-sh__tile--home {
  grid-area: home;
  background: linear-gradient(160deg, #2f9e57, #17673a);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2cqw;
}

#card-showcase .cs-sh__phone {
  width: 62%;
  height: 78%;
  border-radius: 2.4cqw 2.4cqw 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0)) ,
    repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0 1.4cqw, transparent 1.4cqw 2.6cqw),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.9) 0 1.4cqw, transparent 1.4cqw 2.6cqw);
  background-blend-mode: normal;
  box-shadow: inset 0 0 0 0.4cqw rgba(255,255,255,0.25);
  opacity: 0.9;
}

#card-showcase .cs-sh__tile--poster {
  grid-area: poster;
  background: linear-gradient(160deg, #eef1f3, #dfe4e8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3cqw;
}

#card-showcase .cs-sh__ptext {
  color: #2a2a2a;
  font-weight: 700;
  font-size: 2.6cqw;
}

#card-showcase .cs-sh__molecule {
  width: 12cqw;
  height: 6cqw;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 25% 55%, #34b366 16%, transparent 18%),
    radial-gradient(circle at 55% 30%, #2a9c59 14%, transparent 16%),
    radial-gradient(circle at 80% 60%, #1f7d43 18%, transparent 20%),
    radial-gradient(circle at 50% 75%, #34b366 12%, transparent 14%);
}

/* ========================================================================
   Card 6 — PARALLAX  (layered cave scene; layers translate with the cursor)
   ===================================================================== */

#card-showcase .cs-card--parallax {
  background: #0a0d12;
}

#card-showcase .cs-px__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#card-showcase .cs-px__layer {
  position: absolute;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

/* Layer boxes reproduce the Figma placement (px / 6.36 -> cqw). */
#card-showcase .cs-px__sky   { left: -17.53cqw; top: -87.26cqw; width: 172.26cqw; height: 258.4cqw; }
#card-showcase .cs-px__mount { left: -18.88cqw; top: 37.5cqw;   width: 142.89cqw; height: 152.68cqw; }
#card-showcase .cs-px__c01   { left: -52.31cqw; top: -35.81cqw; width: 209.65cqw; height: 110.14cqw; }
#card-showcase .cs-px__c05   { left: -91.78cqw; top: -51.12cqw; width: 169.55cqw; height: 109.98cqw; }
#card-showcase .cs-px__c03   { left: 52.56cqw;  top: 58.86cqw;  width: 164.76cqw; height: 73.63cqw; }
#card-showcase .cs-px__c02   { left: -32.42cqw; top: 41.98cqw;  width: 40.93cqw;  height: 21.45cqw; }
#card-showcase .cs-px__c11   { left: 47.25cqw;  top: -1.65cqw;  width: 122.89cqw; height: 67.07cqw; }
#card-showcase .cs-px__c09   { left: -142.3cqw; top: 6.47cqw;   width: 173.3cqw;  height: 94.57cqw; }
#card-showcase .cs-px__c07   { left: -35.02cqw; top: 2.82cqw;   width: 78cqw;     height: 42.6cqw; }
#card-showcase .cs-px__cave  { left: -38.56cqw; top: -0.41cqw;  width: 193.3cqw;  height: 204.65cqw; }
/* The explorer/foreground source has a dark teal cast; force it to a clean
   black silhouette (alpha is preserved). */
#card-showcase .cs-px__hero  { left: -77.2cqw;  top: -75cqw;    width: 259.5cqw;  height: 184.55cqw; filter: brightness(0); }

#card-showcase .cs-px__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34cqw;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* ========================================================================
   Controls
   ===================================================================== */

#card-showcase .cs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pagination — plain round dots, matching the Figma (10px, 16px gap). */
#card-showcase .cs-pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: auto;
}

#card-showcase .cs-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  background: #3a3a3a;
  opacity: 1;
  transition: background 0.25s ease;
}

#card-showcase .cs-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  #card-showcase .cs-card-wrap {
    max-width: 86vw;
  }
}