/* Extracted reusable styles for hero visual slider/cards */
:root {
  --ghost-white: #f2effb;
}

/* ---------------------------------------------------------------------------
   Proof banner wrapper.
   The card labels/heading use white text, so the banner sits on a dark
   section. These rules replace the original Tailwind utility classes
   (max-w-7xl / text-center / mx-auto / pt-12 / text-sm / text-white-70 / mb-8)
   so the component works without loading Tailwind.
   --------------------------------------------------------------------------- */
.proof-banner-section {
  background: #1D1D1F;
  padding: 80px 0 64px;
  overflow: hidden;
}

.proof-banner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 24px 0;
  text-align: center;
}

/* Use the site-standard section heading, recolored white for the dark banner */
.proof-banner-section .section-heading {
  color: var(--dark-text);
  margin-bottom: 2rem;
}

/* Render the stat-card row at full width (matching the live reference)
   and slightly tighten the label type, so the longer client labels
   ("New Transaction Revenue Annually", etc.) fit on one line instead of
   wrapping and overlapping the value below. Desktop only — at <=991px the
   cards switch to the stacked layout in the media queries below. */
@media screen and (min-width: 992px) {
  .proof-banner .hero-visual-top { width: 100%; }
  .proof-banner .card-upper-text { font-size: 0.9em; }
}

/* Smooth cross-fade as the slider rotates between brand slides */
.hero-visual.is-home .hero_item {
  transition: opacity 0.6s ease;
}

.hero-visual {
  width:76.2911%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  transform: perspective(3200px) rotate(0);
}

.hero-visual.is-home {
  height: 41em;
}

.hero-images {
  width: 60.375em;
  padding-top: 40%;
  position: relative;
}

.image-small {
  width: 12.0625em;
  transform-style: preserve-3d;
  position: absolute;
  top: 3%;
  bottom: auto;
  left: 4.2em;
  right: auto;
  transform: translateZ(-50px);
}

.image-small.is-right {
  left: auto;
  right: 4.2em;
}

.image-small.image-fast { top: -4%; left: 16%; transform: translate(0); }
.image-small.image-fast.is-right { z-index: 2; left: 45%; }
.image-small.image-fast.is-right.a-pl { top: -7%; right: 45%; }
.image-small.image-fast.a-pl { width: 37%; top: -7%; right: 16%; transform: none; }

.image-small.flip { border-radius: .9375em; overflow: visible; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }

.image-medium {
  z-index: 5;
  width: 14.375em;
  transform-style: preserve-3d;
  position: absolute;
  top: -3%;
  bottom: auto;
  left: 12.1em;
  right: auto;
  transform: translateZ(18px);
}

.image-medium.is-right { left: auto; right: 12.1em; }
.image-medium.is-right.flip { border-radius: 1.25em; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-medium.is-right.flip.is-we-work { top: -7%; left: auto; right: -1em; }
.image-medium.fast-2 { top: -11%; left: 22%; }
.image-medium.fast-2.a-pl { width: 40%; left: 21%; right: 21%; }
.image-medium.fast-1 { top: -11%; left: 36%; }
.image-medium.fast-1.a-pl { width: 40%; left: 38%; right: 38%; }
.image-medium.flip { border-radius: 1.25em; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-medium.flip.is-we-work { width: 23.1875em; top: -7%; left: 1em; }

.image-big {
  z-index: 10;
  width: 18.75em;
  position: absolute;
  top: -15%;
  bottom: auto;
  left: auto;
  right: auto;
}
.image-big.creatives-fast-item-1 { width: 45%; right: 50%; }
.image-big.flip { z-index: 20; transform-style: preserve-3d; border-radius: 1.5625em; transform: translateZ(40px); box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-big.flip.is-work { width: 28.0625em; }

.hero-item-rotate {
  z-index: 100;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  margin-top: 6em;
  display: flex;
  position: relative;
  transform: perspective(5000px) rotate(0);
}

.hero_item {
  width: 100%;
  opacity: 1;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}
.hero_item.is--1 { z-index: 6; opacity: 1; }

.hero-visual-top {
  z-index: 200;
  width: 80%;
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(255, 255, 255, .5);
  border: .8px solid #fff;
  border-radius: 1.875em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  padding: .625rem;
  display: grid;
  position: relative;
}

.hero-top-card {
  height: 6.875rem;
  text-align: center;
  background-color: #fff;
  border-radius: 1.25em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 1.625rem;
  padding-left: 1.75em;
  padding-right: 1.75em;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-top-card.flip { border-radius: 1.5625em; box-shadow: 14px 14px 60px rgba(30, 21, 65, .06); }

.card-feature {
  width: 85%;
  background-color: var(--ghost-white);
  text-align: center;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-top: .3125em;
  padding-bottom: 5px;
  font-weight: 600;
  position: absolute;
  top: 3px;
  bottom: auto;
  left: 50%;
  right: 0%;
  transform: translate(-50%);
  color: #6b7280; /* ensure label text visible on light bg */
}

.card-upper-text {
  color : #000;
  font-size: 1em;
}

.tesla-logo { width: 6.4375em; }

.card-information { color: #0f172a; font-size: 1.125em; font-weight: 600; line-height: 1.4; }
.card-information.is-2 { font-size: 1em; }
.text-span { font-weight: 500; color: #64748b; }
.card-information h3 { font-size: 1.25rem !important; }
.card-information h3+span { font-size: 0.75rem; }

.hero-arrow {
  z-index: -1;
  width: .8em;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 50%;
  right: 0%;
  transform: translate(-50%, 100%);
}
.mobile-tesla {
  display: none
}

/* Responsive adjustments */
@media screen and (min-width: 1280px) {
  .hero-visual.is-home { max-width: 63em; }
}

@media screen and (max-width: 991px) {
  .hero-visual { width: 90%; }
  .hero-visual.is-home { height: 40rem; }
  .hero-item-rotate { display: none; }
  .hero_item.is--1 { align-items: center; display: flex; }
  .hero-visual-top { width: 50%; grid-template-columns: 1fr; }
  .hero-top-card.flip { height: 2.3rem; flex-direction: column; justify-content: space-between; align-items: center; padding-top: 0; height: initial !important; padding: 1rem; }
  .card-feature { width: auto; background-color: transparent; font-size: .9rem; position: static; transform: none; }
  .card-information, .card-information.is-2 { text-align: right; font-size: .7rem; }

  
  .mobile-tesla {
    max-width: none;
    object-fit: contain;
    display: block;
    position: relative;
    top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .image-small.is-right.flip { top: 10%; bottom: 0%; left: auto; right: 0%; }
  .image-small.flip { top: 10%; }
  .image-medium.is-right.flip { top: 0%; bottom: 0%; left: auto; right: 11%; }
  .image-medium.is-right.flip.is-we-work { width: 20em; top: -6%; left: 60%; }
  .image-medium.flip { top: 0%; left: 13%; }
  .image-medium.flip.is-we-work { width: 21em; top: -6%; left: -12%; }
  .image-big.flip.is-work { width: 25em; }
  .hero_item.is--1 { align-items: center; display: flex; }
  .hero-visual-top { width: 80%; }
}

@media screen and (max-width: 1920px) {
  /* keep space for future large-screen overrides if needed */
}