.showcase-vitrine { background: rgb(250, 249, 247); overflow: hidden; }
.sv-heading { position: absolute; top: 5%; left: 2%; right: 2%; text-align: center; z-index: 2; }
.sv-heading p { font-size: calc(var(--u)*16); letter-spacing: calc(var(--u)*6); color: rgb(105, 113, 129); font-weight: 600; }
.sv-heading h2 { font-size: calc(var(--u)*64); letter-spacing: calc(var(--u)*-2.8); line-height: 1.04; margin: calc(var(--u)*22) 0 calc(var(--u)*8); font-weight: 750; }
.sv-heading em { color: rgb(255, 98, 0); font-style: normal; }
.sv-heading > span { font-size: calc(var(--u)*27); font-weight: 500; color: rgb(113, 121, 136); }
.sv-decoration { position: absolute; background: rgb(255, 98, 0); pointer-events: none; transform: rotate(-43deg); border-radius: calc(var(--u)*65); }
.sv-decoration-top { width: calc(var(--u)*170); height: calc(var(--u)*520); right: calc(var(--u)*-90); top: calc(var(--u)*-230); }
.sv-decoration-bottom { width: calc(var(--u)*250); height: calc(var(--u)*460); left: calc(var(--u)*170); bottom: calc(var(--u)*-380); background: linear-gradient(90deg, rgb(255, 98, 0), rgb(255, 189, 141)); }
.sv-stage { position: absolute; inset: 22% 3% 12%; }
.sv-screen { position: absolute; margin: 0px; overflow: hidden; border-radius: calc(var(--u)*18); box-shadow: 0 calc(var(--u)*18) calc(var(--u)*38) #51311a26; background: rgb(255, 255, 255); }
.sv-screen > img { width: 100%; height: 100%; display: block; object-fit: fill; }
.sv-stock { left: 0px; top: 8%; width: 42%; height: 74%; transform: perspective(1800px) rotateY(3deg) rotateZ(1deg); z-index: 1; }
.sv-store { right: 0px; top: 0px; width: 55%; height: 86%; transform: perspective(1800px) rotateY(-3deg) rotateZ(-1deg); z-index: 1; }
.sv-brand { position: absolute; left: 0px; top: 0px; width: 17%; height: 10%; background: rgb(12, 14, 15); display: grid; place-items: center; }
.sv-brand img { width: 90%; height: auto; }
.sv-connection { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.sv-connection > path { fill: none; stroke: rgb(255, 98, 0); stroke-width: 2.5; stroke-linecap: round; }
.sv-badge { position: absolute; z-index: 4; left: 42%; top: 40%; display: flex; align-items: center; gap: calc(var(--u)*10); background: rgb(255, 98, 0); color: rgb(255, 255, 255); border-radius: 999px; padding: calc(var(--u)*10) calc(var(--u)*16); font-size: calc(var(--u)*15); line-height: 1.1; box-shadow: 0 calc(var(--u)*8) calc(var(--u)*18) #ff620035; }
.sv-badge span { border-radius: 50%; background: rgb(255, 255, 255); color: rgb(255, 98, 0); width: calc(var(--u)*28); height: calc(var(--u)*28); display: grid; place-items: center; font-weight: bold; }
.sv-action { position: absolute; left: 0px; right: 0px; bottom: 2%; display: grid; justify-items: center; gap: calc(var(--u)*12); }
.sv-action .rd-cta { font-size: calc(var(--u)*18); min-width: calc(var(--u)*425); justify-content: center; gap: calc(var(--u)*35); }
.sv-action small { font-size: calc(var(--u)*13); color: rgb(123, 130, 138); }
@media (prefers-reduced-motion: no-preference) {
  .sv-connection > path { stroke-dasharray: 1700; animation: 3s ease-out 0s 1 normal both running sv-draw; }
  .sv-badge { animation: 0.6s ease-out 0.5s 1 normal both running sv-badge-in; }
  @keyframes sv-draw {
  0% { stroke-dashoffset: 1700; }
  100% { stroke-dashoffset: 0; }
}
  @keyframes sv-badge-in {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
}
@media (max-width: 1199px) {
  .showcase-vitrine { display: block; padding: 65px 22px 55px !important; height: auto !important; }
  .sv-heading { position: relative; inset: auto; }
  .sv-heading p { font-size: 11px; letter-spacing: 3px; }
  .sv-heading h2 { font-size: clamp(32px, 8vw, 48px); letter-spacing: -1.5px; margin: 18px 0px 12px; }
  .sv-heading > span { display: block; font-size: 16px; line-height: 1.4; }
  .sv-stage { position: relative; inset: auto; display: flex; flex-direction: column; gap: 40px; margin-top: 35px; }
  .sv-screen { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 2 / 1; transform: none; border-radius: 12px; }
  .sv-stock { width: 82%; align-self: flex-start; }
  .sv-store { width: 100%; }
  .sv-connection { display: none; }
  .sv-badge { top: 40%; left: auto; right: 0px; font-size: 12px; padding: 8px 12px; }
  .sv-badge span { width: 24px; height: 24px; }
  .sv-action { position: relative; inset: auto; margin-top: 28px; gap: 12px; }
  .sv-action .rd-cta { width: 100%; min-width: 0px; font-size: 15px; gap: 18px; }
  .sv-action small { font-size: 11px; }
  .sv-decoration-top { width: 90px; height: 260px; right: -75px; top: -100px; }
  .sv-decoration-bottom { display: none; }
}
@media (min-width: 1200px) {
  .sv-stock, .sv-store { height: auto; aspect-ratio: 2 / 1; }
  .sv-stock { top: 17%; }
  .sv-store { top: 8%; }
}
@media (min-width: 1200px) {
  .showcase-vitrine .sv-stage { inset: 20% 0px 10%; }
  .showcase-vitrine .sv-stock { width: 45%; top: 15%; }
  .showcase-vitrine .sv-store { width: 57%; top: 6%; }
  .showcase-vitrine .sv-badge { left: 43%; top: 39%; }
  .showcase-vitrine .sv-action { bottom: 3%; }
}
@media (min-width: 1200px) {
  .showcase-vitrine { overflow: visible; }
  .showcase-vitrine .sv-stage { left: -4%; right: -4%; }
  .showcase-vitrine .sv-stock { width: 43%; left: 0px; }
  .showcase-vitrine .sv-store { width: 52%; right: 0px; }
  .showcase-vitrine .sv-badge { left: 44.5%; }
}
.sv-store>.sv-brand{left:3%;width:21.5%;}
@media (min-width: 1200px) { .showcase-vitrine .sv-badge { left: 41.5%; top: 58%; } }