/* =========================================
   Section (white background)
========================================= */
.integrations-simple {
    background: #fff;
    padding: 60px 0;
}

.integrations-simple .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   Grid scaffold
========================================= */
.ip-surface {
    --hub: 120px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 40px;
    overflow: visible;
    /* so hub pulse can breathe */
}

.ip-col {
    display: grid;
    gap: 22px;
    justify-items: center;
}

/* =========================================
   System tiles (glassy grey + bigger)
========================================= */
.logo-tile {
    width: 108px;
    height: 108px;
    border-radius: 24px;
    display: grid;
    place-items: center;

    /* frosted glass on white */
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(244, 246, 249, .66));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(28, 35, 45, .14);

    /* outer depth + inner shine */
    box-shadow:
        0 14px 28px rgba(20, 27, 45, .12),
        0 6px 14px rgba(20, 27, 45, .08),
        inset 0 1px 0 rgba(255, 255, 255, .88),
        inset 0 -8px 18px rgba(17, 24, 39, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}

.logo-tile:hover {
    box-shadow:
        0 18px 34px rgba(20, 27, 45, .16),
        0 8px 18px rgba(20, 27, 45, .10),
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -10px 20px rgba(17, 24, 39, .075);
    transform: translateY(-1px);
}

.logo-tile img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* =========================================
   Hub (purple pulse + deeper shadow)
========================================= */
.ip-hub {
    width: var(--hub);
    height: var(--hub);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 247, 255, .92));
    border: 1px solid rgba(16, 24, 40, .10);
    /* richer drop + inner depth */
    box-shadow:
        0 24px 50px rgba(32, 14, 90, .22),
        0 10px 24px rgba(32, 14, 90, .18),
        0 2px 6px rgba(0, 0, 0, .10),
        inset 0 10px 22px rgba(255, 255, 255, .45),
        inset 0 -14px 24px rgba(90, 42, 160, .18);
    position: relative;
    isolation: isolate;
    --pulse: 168, 85, 247;
    /* PURPLE (R,G,B) */
}

.ip-hub img {
    width: 58%;
    height: 58%;
    object-fit: contain;
}

/* base aura */
.ip-hub::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background: radial-gradient(60% 60% at 50% 50%, rgba(var(--pulse), .22), transparent 70%);
    filter: blur(12px);
    z-index: -1;
}

/* pulse ring + breathing */
.ip-hub::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        0 0 0 0 rgba(var(--pulse), .45),
        inset 0 0 24px rgba(var(--pulse), .25);
    filter: blur(1px);
    animation: hub-pulse 2.2s ease-in-out infinite, hub-breathe 2.2s ease-in-out infinite;
    z-index: -1;
}

@keyframes hub-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--pulse), .45), inset 0 0 24px rgba(var(--pulse), .25);
        opacity: .9;
    }

    55% {
        box-shadow: 0 0 0 22px rgba(var(--pulse), .12), inset 0 0 24px rgba(var(--pulse), .25);
        opacity: .5;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--pulse), .00), inset 0 0 24px rgba(var(--pulse), .25);
        opacity: .9;
    }
}

@keyframes hub-breathe {

    0%,
    100% {
        transform: scale(1);
        filter: blur(1px);
    }

    50% {
        transform: scale(1.06);
        filter: blur(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ip-hub::after {
        animation: none;
    }
}

/* =========================================
   Beams (SVG) – behind tiles/hub
   (JS draws the paths; gradients must exist in <defs>)
========================================= */
.ip-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* sits under tiles/hub */
}

.ip-wire {
    fill: none;
    stroke-linecap: round;
}

/* neon beam layers */
.ip-wire--core {
    stroke: url(#beam-grad);
    /* defined in SVG <defs> by your JS */
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(124, 136, 255, .55));
}

.ip-wire--glow {
    stroke: url(#beam-grad-soft);
    stroke-width: 12;
    opacity: .6;
    filter: blur(5px);
}

.ip-wire--shimmer {
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 2;
    stroke-dasharray: 14 22;
    animation: beam-shimmer 1.6s linear infinite;
    mix-blend-mode: screen;
}

@keyframes beam-shimmer {
    to {
        stroke-dashoffset: -36;
    }
}

/* beam dots */
.ip-dot {
    fill: #fff;
    opacity: .98;
}

.ip-dot-halo {
    fill: #9cc4ff;
    opacity: .8;
    filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {

    .ip-dot,
    .ip-dot-halo {
        display: none;
    }
}

/* =========================================
   Stacking order
========================================= */
.logo-tile,
.ip-col,
.ip-hub {
    position: relative;
    z-index: 1;
}

.ip-hub {
    z-index: 2;
}

/* hub above tiles */
.ip-hub::before,
.ip-hub::after {
    z-index: -1;
}

/* =========================================
   Responsive tweaks
========================================= */
@media (max-width: 700px) {
    .ip-surface {
        --hub: 96px;
        gap: 28px;
    }

    .logo-tile {
        width: 92px;
        height: 92px;
        border-radius: 20px;
    }
}