/* ══════════════════════════════════════════════════════════
   CHANNEL PARTNER PROGRAM — floating tech/blueprint background
   Deep navy base + blue/orange glow orbs + building wireframes
   + drifting particle mesh, inspired by reference art.
   ══════════════════════════════════════════════════════════ */

.cpp-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse 120% 90% at 15% 10%, #0d2a5c 0%, transparent 55%),
                radial-gradient(ellipse 120% 90% at 85% 90%, #0d2450 0%, transparent 55%),
                linear-gradient(160deg, #071a3a 0%, #050f26 55%, #04091c 100%);
}

.cpp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cpp-bg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* glow orbs */
.cpp-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: cppDrift 14s ease-in-out infinite;
}
.cpp-glow.cpp-glow-orange-l {
    width: 260px; height: 260px; left: -90px; top: 28%;
    background: radial-gradient(circle, rgba(243,111,52,.55), transparent 70%);
    animation-delay: -2s;
}
.cpp-glow.cpp-glow-orange-r {
    width: 300px; height: 300px; right: -110px; bottom: 8%;
    background: radial-gradient(circle, rgba(243,111,52,.45), transparent 70%);
    animation-delay: -7s;
}
.cpp-glow.cpp-glow-blue {
    width: 340px; height: 340px; right: 12%; top: -140px;
    background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%);
    animation-delay: -4s;
}

@keyframes cppDrift {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(14px,-16px) scale(1.05); }
}

/* ring outlines (thin circle borders) */
.cpp-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 197, 255, .35);
    animation: cppFloat 9s ease-in-out infinite;
}
.cpp-ring.cpp-ring-blue {
    width: 300px; height: 300px; right: 6%; top: -150px;
    border-color: rgba(96, 165, 250, .5);
}
.cpp-ring.cpp-ring-orange {
    width: 230px; height: 230px; right: -90px; bottom: 12%;
    border-color: rgba(243, 111, 52, .55);
    animation-delay: -3s;
}
.cpp-ring.cpp-ring-sm {
    width: 150px; height: 150px; left: 34%; bottom: -60px;
    border-color: rgba(96, 165, 250, .3);
    animation-delay: -6s;
}

@keyframes cppFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* wireframe skyline blocks */
.cpp-skyline {
    position: absolute;
    opacity: .55;
    animation: cppFloatSlow 11s ease-in-out infinite;
}
.cpp-skyline.cpp-skyline-tl { left: -10px; bottom: -6px; width: 260px; }
.cpp-skyline.cpp-skyline-br { right: -10px; top: -6px; width: 300px; transform: scaleX(-1) scaleY(-1); }

@keyframes cppFloatSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.cpp-skyline.cpp-skyline-br { animation-delay: -5s; }

/* dotted mesh wave corners */
.cpp-mesh {
    position: absolute;
    opacity: .5;
    animation: cppFloatSlow 13s ease-in-out infinite;
}
.cpp-mesh.cpp-mesh-tl { left: -40px; top: -40px; width: 340px; }
.cpp-mesh.cpp-mesh-br { right: -40px; bottom: -40px; width: 380px; transform: rotate(180deg); animation-delay: -6s; }

/* twinkling stars */
.cpp-star {
    position: absolute;
    border-radius: 50%;
    animation: cppTwinkle 3.4s ease-in-out infinite;
}
@keyframes cppTwinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: 1; transform: scale(1.15); }
}

/* ── content overrides so text reads on the dark bg ─────── */
.cpp-section .container { position: relative; z-index: 2; }
.cpp-section .section-label {
    color: var(--tp-orange, #F36F34);
    background: rgba(255,255,255,.06);
}
.cpp-section h2 { color: #ffffff; }
.cpp-section .section-desc { color: rgba(226, 238, 255, .78); }
.cpp-section .title-line { background: linear-gradient(90deg, #38bdf8, #F36F34); }

@media (max-width: 768px) {
    .cpp-skyline { width: 170px !important; }
    .cpp-mesh { width: 220px !important; }
    .cpp-glow.cpp-glow-blue, .cpp-ring.cpp-ring-blue { width: 200px !important; height: 200px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .cpp-glow, .cpp-ring, .cpp-skyline, .cpp-mesh, .cpp-star { animation: none !important; }
}