:root {
    --bg-color: #f0f4ff;     
    --shape-color: #e1e9ff;
    --shape-width: 160px;
    --row-height: 160px;
}


/* 背景容器：相对于 hero container 定位 */
#bg-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 250vw;
    height: 250vh;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%) rotate(45deg);
    background:var(--bg-color);
    z-index: -1;
    pointer-events: none;
}

.row {
    display: flex;
    height: var(--row-height);
    will-change: transform;
    transform: translateZ(0);
}

.shape {
    width: var(--shape-width);
    height: var(--row-height);
    flex-shrink: 0;
    fill: var(--shape-color);
    display: block;
    shape-rendering: geometricPrecision;
}