.sc-outer {
    position: relative;
    overflow: hidden;
    overflow-x: clip;
    box-sizing: border-box;
    width: 100%;
}
.sc-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
           padding-left: 24px;
        padding-right: 24px;
    }
@media (max-width: 767px) {
    .sc-inner {
        padding-left: 20px;
		padding-right: 20px;
    }
}

.sc-inner .sc-inner {
        padding-left: 0;
		padding-right: 0;
    }

/* ── Shape float animation ─────────────────────────────────────────────────────
   Uses the CSS `translate` property (Level 2 Transforms) so it layers on top
   of the inline transform:rotate() per shape without overriding it.        */
@keyframes sc-float {
    0%, 100% { translate: 0 0px; }
    50%       { translate: 0 -22px; }
}

.sc-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    animation: sc-float 6s ease-in-out infinite;
}
.sc-shape svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Stagger animation delays — shapes move out of phase for a natural look */
.sc-shape:nth-child(1) { animation-delay:    0s; }
.sc-shape:nth-child(2) { animation-delay: -1.8s; }
.sc-shape:nth-child(3) { animation-delay: -3.6s; }
.sc-shape:nth-child(4) { animation-delay: -0.9s; }
.sc-shape:nth-child(5) { animation-delay: -2.7s; }
.sc-shape:nth-child(n+6) { animation-delay: -1.4s; }

/* ── Breakpoint visibility toggles ────────────────────────────────────────── */
@media (max-width: 767px) {
    .sc-shape.sc-shape--hidden-mobile  { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .sc-shape.sc-shape--hidden-tablet  { display: none; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
    .sc-shape.sc-shape--hidden-desktop { display: none; }
}