/* ===================================
 * Hero Animated Background Styles
 * Particle network + geometric elements
 * =================================== */

#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: radial-gradient(120% 100% at 22% 30%, #232E3D 0%, #1A2330 45%, #0E131B 100%);
    overflow: hidden;
}

#hero .hero-hexlayer {
    position: absolute;
    inset: 0;
    opacity: 0.09;
    pointer-events: none;
    z-index: 1;
}

#hero .hero-ringlayer {
    position: absolute;
    right: -6%;
    bottom: -10%;
    width: 46vw;
    height: 46vw;
    max-width: 560px;
    max-height: 560px;
    pointer-events: none;
    z-index: 1;
}

#hero .hero-canvas {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

#hero .hero-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,22,31,0.15) 0%, rgba(16,22,31,0) 30%, rgba(16,22,31,0) 60%, rgba(16,22,31,0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

#hero .hero-frame {
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(237,230,218,0.08);
    pointer-events: none;
    z-index: 2;
}

#hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 26, 46, 0.3), rgba(26, 43, 74, 0.5));
    z-index: 3;
}

#hero .hero-content {
    position: relative;
    z-index: 4;
}

#hero .scroll-down {
    z-index: 4;
}