/**
 * Background transparan bercorak teknologi & jaringan — halaman landing publik
 * Hanya lapisan dekoratif fixed; tidak mengubah position shell (topbar, sticky nav).
 */

.landing-page {
    --lp-tech-brand: #1e5aa8;
    --lp-tech-line: rgba(30, 90, 168, 0.055);
    --lp-tech-node: rgba(30, 90, 168, 0.13);
    --lp-tech-hex: rgba(30, 90, 168, 0.035);
}

/* Lapisan dekoratif — fixed di belakang, tanpa mempengaruhi layout */
.landing-page .lp-tech-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Aurora lembut — depth tanpa menutupi konten */
.landing-page .lp-tech-bg__aurora {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background:
        radial-gradient(ellipse 85% 50% at 12% -5%, rgba(30, 90, 168, 0.11) 0%, transparent 58%),
        radial-gradient(ellipse 65% 42% at 88% 8%, rgba(74, 139, 201, 0.09) 0%, transparent 54%),
        radial-gradient(ellipse 50% 35% at 50% 100%, rgba(30, 90, 168, 0.06) 0%, transparent 62%);
}

/* Hex mesh halus — nuansa infrastruktur FTTH */
.landing-page .lp-tech-bg__hex {
    position: absolute;
    inset: 0;
    opacity: 0.38;
    background-image:
        linear-gradient(30deg, var(--lp-tech-hex) 12%, transparent 12.5%, transparent 87%, var(--lp-tech-hex) 87.5%, var(--lp-tech-hex) 100%),
        linear-gradient(150deg, var(--lp-tech-hex) 12%, transparent 12.5%, transparent 87%, var(--lp-tech-hex) 87.5%, var(--lp-tech-hex) 100%),
        linear-gradient(90deg, var(--lp-tech-hex) 12%, transparent 12.5%, transparent 87%, var(--lp-tech-hex) 87.5%, var(--lp-tech-hex) 100%);
    background-size: 44px 76px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}

/* Dot mesh — selaras lpg-hero-mesh */
.landing-page .lp-tech-bg__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(30, 90, 168, 0.07) 1px, transparent 0),
        linear-gradient(var(--lp-tech-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-tech-line) 1px, transparent 1px);
    background-size: 28px 28px, 56px 56px, 56px 56px;
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* Topologi circuit — node & jalur koneksi */
.landing-page .lp-tech-bg__circuit {
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%231e5aa8' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M24 48h72v48h96v72h96'/%3E%3Cpath d='M24 192h120v48h120'/%3E%3Cpath d='M192 24v72h48v120'/%3E%3Cpath d='M264 264h72v48'/%3E%3Cpath d='M48 264h72v24h48'/%3E%3C/g%3E%3Cg fill='%231e5aa8'%3E%3Ccircle cx='24' cy='48' r='2.5' fill-opacity='.14'/%3E%3Ccircle cx='96' cy='48' r='2' fill-opacity='.11'/%3E%3Ccircle cx='96' cy='96' r='2' fill-opacity='.11'/%3E%3Ccircle cx='192' cy='96' r='2' fill-opacity='.11'/%3E%3Ccircle cx='192' cy='168' r='2.5' fill-opacity='.13'/%3E%3Ccircle cx='288' cy='168' r='2' fill-opacity='.11'/%3E%3Ccircle cx='24' cy='192' r='2' fill-opacity='.11'/%3E%3Ccircle cx='144' cy='240' r='2.5' fill-opacity='.13'/%3E%3Ccircle cx='264' cy='264' r='2' fill-opacity='.11'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 360px 360px;
}

/* Node jaringan + garis data diagonal */
.landing-page .lp-tech-bg__network {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        radial-gradient(circle at center, var(--lp-tech-node) 1.5px, transparent 1.6px),
        linear-gradient(125deg, transparent 47.5%, rgba(30, 90, 168, 0.05) 48.5%, rgba(30, 90, 168, 0.05) 51.5%, transparent 52.5%),
        linear-gradient(55deg, transparent 47.5%, rgba(30, 90, 168, 0.04) 48.5%, rgba(30, 90, 168, 0.04) 51.5%, transparent 52.5%);
    background-size: 72px 72px, 144px 144px, 144px 144px;
    background-position: 0 0, 0 0, 36px 36px;
}

@media (prefers-reduced-motion: no-preference) {
    .landing-page .lp-tech-bg__network {
        animation: lp-tech-network-drift 160s linear infinite;
    }

    .landing-page .lp-tech-bg__circuit {
        animation: lp-tech-circuit-drift 200s linear infinite reverse;
    }

    .landing-page .lp-tech-bg__glow--a {
        animation: lp-tech-glow-pulse 18s ease-in-out infinite alternate;
    }

    .landing-page .lp-tech-bg__glow--b {
        animation: lp-tech-glow-pulse 22s ease-in-out infinite alternate-reverse;
    }
}

@keyframes lp-tech-network-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-72px, -72px, 0); }
}

@keyframes lp-tech-circuit-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(48px, 48px, 0); }
}

@keyframes lp-tech-glow-pulse {
    from { opacity: 0.42; transform: scale(1); }
    to { opacity: 0.62; transform: scale(1.06); }
}

/* Aksen cahaya lembut */
.landing-page .lp-tech-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.5;
}

.landing-page .lp-tech-bg__glow--a {
    width: min(520px, 74vw);
    height: min(520px, 74vw);
    top: -16%;
    right: -12%;
    background: rgba(30, 90, 168, 0.09);
}

.landing-page .lp-tech-bg__glow--b {
    width: min(380px, 60vw);
    height: min(380px, 60vw);
    left: -10%;
    bottom: 6%;
    background: rgba(74, 139, 201, 0.07);
}

.landing-page .lp-tech-bg__glow--c {
    width: min(220px, 38vw);
    height: min(220px, 38vw);
    right: 22%;
    top: 42%;
    background: rgba(30, 90, 168, 0.05);
    opacity: 0.35;
}

/* Konten utama — tidak override background section/card existing */
.landing-page #content:not(.lpg-page):not(.ph-page),
.landing-page main#content:not(.lpg-page):not(.ph-page) {
    background: transparent;
}

/* Guard — lapisan dekoratif tidak boleh menimpa positioning shell & nav */
.landing-page .skip-link {
    position: absolute;
    z-index: 1000;
}

.landing-page .scroll-progress,
.landing-page .lpg-ref-progress {
    position: fixed;
    z-index: 120;
}

.landing-page .topbar-group {
    position: sticky;
    top: 0;
    z-index: 110;
}

.landing-page .lpg-ref-sticky-nav {
    position: fixed;
    z-index: 95;
}

.landing-page .nav-backdrop {
    position: fixed;
    z-index: 940;
}

.landing-page .mobile-menu {
    position: fixed;
    z-index: 950;
}