.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: var(--sc-pt, 60px) var(--sc-pr, 20px) var(--sc-pb, 60px) var(--sc-pl, 20px);
}
@media (max-width: 767px) {
    .sc-inner {
        padding: var(--sc-pt-m, var(--sc-pt, 60px)) var(--sc-pr-m, var(--sc-pr, 20px)) var(--sc-pb-m, var(--sc-pb, 60px)) var(--sc-pl-m, var(--sc-pl, 20px));
    }
}

/* ── 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; }
}