/* "Who We Serve" section — copy column + a hexagonal ring of six
   audience nodes around a drifting data-wave background. */

.lp-serve.has-background:before { background: var(--accent-deep); }

.lp-serve .section-title { --accent-color: var(--decorative-color); }

.lp-serve .section-content .content,
.lp-serve .stat-label {
    color: var(--accent-light);
}

.lp-serve .section-container {
    display: flex;
    align-items: center;
    gap: 4.375em;
}

.lp-serve .serve-copy {
    flex: 0 1 34.375em;
    min-width: 0;
}

.lp-serve .serve-hex {
    flex: 1 1 30em;
}

/* reveal-on-scroll, matching the rest of the site's has-animation sections */
.lp-serve .serve-stats,
.lp-serve .serve-hex {
    transform: translateY(3.75em);
    opacity: 0;
    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
}

.lp-serve .serve-stats { transition-delay: 700ms; }
.lp-serve .serve-hex { transition-delay: 500ms; }

.lp-serve.has-reveal .serve-stats,
.lp-serve.has-reveal .serve-hex {
    transform: none;
    opacity: 1;
}

.serve-stats {
    display: flex;
    gap: 2.1875em;
    margin-top: 2.5em;
    padding-top: 2.1875em;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.stat-item .stat-icon {
    display: flex;
    width: 2em;
    height: 2em;
    color: var(--decorative-color);
    margin-bottom: .625em;
}

.stat-item .stat-icon svg {
    width: 100%;
    height: 100%;
}

.stat-item .stat-number {
    margin: 0;
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.stat-item .stat-label {
    margin: .4375em 0 0;
    font-size: .8125em;
    line-height: 1.4;
}

.serve-hex {
    position: relative;
    width: 100%;
    max-width: 33.75em;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.serve-wave {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    z-index: 0;
    background:
        radial-gradient(ellipse 65% 30% at 30% 55%, rgba(45, 212, 199, .22), transparent 70%),
        radial-gradient(ellipse 60% 26% at 68% 45%, rgba(167, 139, 250, .2), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10px);
    filter: blur(.5px);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
    mask-image: radial-gradient(circle, #000 55%, transparent 78%);
    animation: serve-wave-drift 14s ease-in-out infinite;
}

@keyframes serve-wave-drift {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: .85; }
    50% { transform: rotate(4deg) scale(1.04); opacity: 1; }
}

.hex-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hex-outline {
    fill: none;
    stroke: rgba(255, 255, 255, .22);
    stroke-width: .25;
}

.hex-bead {
    fill: rgba(255, 255, 255, .55);
    animation: hex-bead-glow 3.2s ease-in-out infinite;
}

@keyframes hex-bead-glow {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

.hex-node {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 8.75em;
    text-align: center;
}

.hex-node.is-gov { top: 18%; left: 50%; color: #4C8DFF; }
.hex-node.is-reg { top: 34%; left: 77.7%; color: #A78BFA; }
.hex-node.is-infra { top: 66%; left: 77.7%; color: #FF7A50; }
.hex-node.is-intl { top: 82%; left: 50%; color: #2DD4C7; }
.hex-node.is-exec { top: 66%; left: 22.3%; color: #C48BFA; }
.hex-node.is-inv { top: 34%; left: 22.3%; color: #6C7BFF; }

.hex-node .hex-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 0 auto .625em;
    border-radius: 50%;
    background: rgba(2, 10, 44, .7);
    box-shadow: 0 0 0 1px currentColor, 0 0 2em .125em currentColor;
    animation: hex-pulse 4s infinite ease-in-out;
}

.hex-node .hex-icon svg {
    width: 2.25em;
    height: 2.25em;
}

@keyframes hex-pulse {
    0%, 100% { box-shadow: 0 0 0 1px currentColor, 0 0 1.25em .0625em currentColor; }
    50% { box-shadow: 0 0 0 1px currentColor, 0 0 2.375em .1875em currentColor; }
}

.hex-node .hex-title {
    margin: 0;
    font-size: .875em;
    font-weight: 700;
    color: #fff;
}

@media screen and (max-width: 1199px) {
    .lp-serve .section-container {
        flex-direction: column;
        gap: 3.125em;
    }

    .lp-serve .serve-copy {
        flex: 1 1 auto;
        width: 100%;
    }

    .lp-serve .serve-hex {
        flex: none;
        width: 100%;
    }
}

@media screen and (max-width: 899px) {
    .serve-stats {
        flex-direction: column;
        gap: 1.25em;
    }

    .serve-hex {
        max-width: 26em;
    }

    .hex-node {
        width: 6.25em;
    }

    .hex-node .hex-icon {
        width: 3.75em;
        height: 3.75em;
    }

    .hex-node .hex-icon svg {
        width: 1.75em;
        height: 1.75em;
    }

    .hex-node .hex-title {
        font-size: .75em;
    }
}