/* Hero Background Container */
.product-hero {
    position: relative;
    overflow: hidden;
    background: #ffffff; /* Or your preferred base color */
}

/* The Interactive Canvas */
#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the text */
    pointer-events: none; /* Allows mouse events to pass through to the listener */
}

/* Ensure text stays above canvas and is readable */
.product-hero .section-title,
.product-hero .section-subtitle {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}