/* Cloud Backup — showcase animations (external file, cache-bust with ?v=) */
.cb-showcase {
    background: linear-gradient(160deg, #051428 0%, #0a2240 40%, #0e3660 100%);
    padding: 3rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}
.cb-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 30%, rgba(79,157,255,.12), transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 70%, rgba(255,139,61,.10), transparent 50%);
    pointer-events: none;
}
.cb-showcase__inner { position: relative; z-index: 1; }
.cb-showcase__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffb37d;
    margin-bottom: .75rem;
}
.cb-showcase__live {
    width: 9px; height: 9px; border-radius: 50%;
    background: #52c41a;
    animation: cbShowLive 1.4s ease-in-out infinite;
}
@keyframes cbShowLive {
    0%, 100% { box-shadow: 0 0 0 0 rgba(82,196,26,.7); }
    50% { box-shadow: 0 0 0 10px rgba(82,196,26,0); }
}
.cb-showcase__title {
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 800;
    margin: 0 0 .5rem;
    line-height: 1.25;
}
.cb-showcase__lead {
    color: rgba(255,255,255,.78);
    font-size: 1.02rem;
    max-width: 640px;
    margin: 0 auto 2rem;
}
.cb-showcase__board {
    background: linear-gradient(145deg, rgba(8,22,44,.95) 0%, rgba(12,35,68,.88) 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    padding: 1.75rem 1.25rem 1.5rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.cb-flow {
    display: grid;
    grid-template-columns: 100px 1fr minmax(200px, 1.15fr);
    gap: 1rem 1.25rem;
    align-items: center;
}
.cb-flow__sources {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.cb-flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .7rem .4rem;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    color: #cfe0f7;
    border: 2px solid rgba(79,157,255,.5);
    background: rgba(79,157,255,.1);
    min-height: 64px;
}
.cb-flow__node i { font-size: 1.15rem; margin-bottom: .3rem; color: #4f9dff; }
.cb-flow__node--router {
    border-color: #ff8b3d;
    background: rgba(255,139,61,.14);
    animation: cbRouterGlow 2s ease-in-out infinite;
}
.cb-flow__node--router i { color: #ffb37d; }
@keyframes cbRouterGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,139,61,.4); }
    50% { box-shadow: 0 0 20px 4px rgba(255,139,61,.25); }
}
.cb-flow__rails {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: .5rem 0;
}
.cb-flow__rail {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: visible;
}
.cb-flow__rail::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    background-size: 48px 100%;
    animation: cbRailShine .55s linear infinite;
}
@keyframes cbRailShine {
    from { background-position: 0 0; }
    to { background-position: 48px 0; }
}
.cb-flow__rail--boxis { box-shadow: inset 0 0 0 1px rgba(82,196,26,.35); }
.cb-flow__rail--s3 { box-shadow: inset 0 0 0 1px rgba(255,153,0,.35); }
.cb-flow__rail--azure { box-shadow: inset 0 0 0 1px rgba(0,120,212,.35); }
.cb-flow__rail--swift { box-shadow: inset 0 0 0 1px rgba(149,222,100,.3); }
.cb-flow__pkt {
    position: absolute;
    top: 50%;
    left: 0;
    width: 32px;
    height: 20px;
    margin-top: -10px;
    border-radius: 5px;
    z-index: 3;
    animation: cbPktMove var(--cb-dur, 2.2s) linear infinite;
    animation-delay: var(--cb-delay, 0s);
    box-shadow: 0 0 14px currentColor;
}
@keyframes cbPktMove {
    0% { left: 0; opacity: .15; transform: scale(.8); }
    6% { opacity: 1; transform: scale(1); }
    94% { opacity: 1; }
    100% { left: calc(100% - 32px); opacity: .15; transform: scale(.8); }
}
.cb-flow__pkt--boxis { background: #52c41a; color: #52c41a; }
.cb-flow__pkt--s3 { background: #ff9900; color: #ff9900; }
.cb-flow__pkt--azure { background: #0078d4; color: #4fa3e8; }
.cb-flow__pkt--swift { background: #73d13d; color: #95de64; }
.cb-flow__dests {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.cb-flow__dest {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    border-radius: 11px;
    border: 2px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #fff;
    animation: cbDestPulse 2.4s ease-in-out infinite;
    animation-delay: var(--cb-pulse, 0s);
}
@keyframes cbDestPulse {
    0%, 100% { transform: scale(1); border-color: rgba(255,255,255,.12); }
    50% { transform: scale(1.03); border-color: rgba(255,139,61,.45); }
}
.cb-flow__dest strong { display: block; font-size: .82rem; line-height: 1.2; }
.cb-flow__dest small { display: block; font-size: .65rem; opacity: .75; }
.cb-flow__dest--boxis { border-color: rgba(82,196,26,.55); background: rgba(82,196,26,.12); --cb-pulse: 0s; }
.cb-flow__dest--boxis i { color: #52c41a; font-size: 1rem; }
.cb-flow__dest--s3 { --cb-pulse: -.5s; border-color: rgba(255,153,0,.4); }
.cb-flow__dest--azure { --cb-pulse: -1s; border-color: rgba(0,120,212,.4); }
.cb-flow__dest--swift { --cb-pulse: -1.5s; border-color: rgba(115,209,61,.35); }
.cb-flow__dest-icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800; flex-shrink: 0;
}
.cb-flow__dest-icon--s3 { background: #ff9900; color: #fff; }
.cb-flow__dest-icon--azure { background: #0078d4; color: #fff; }
.cb-flow__dest-icon--swift { background: #389e0d; color: #fff; }
.cb-showcase__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin-top: 1.25rem;
    font-size: .75rem;
    color: rgba(255,255,255,.55);
}
.cb-showcase__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cb-showcase__legend i { font-size: .5rem; }
.cb-showcase__legend .dot-boxis { color: #52c41a; }
.cb-showcase__legend .dot-s3 { color: #ff9900; }
.cb-showcase__legend .dot-azure { color: #4fa3e8; }
.cb-showcase__legend .dot-swift { color: #95de64; }

/* Hub mini showcase */
.hub-showcase {
    background: linear-gradient(135deg, #071736 0%, #0b3660 100%);
    border-radius: 20px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid rgba(255,255,255,.1);
}
.hub-showcase .cb-flow { grid-template-columns: 72px 1fr minmax(140px, 1fr); gap: .5rem .75rem; }
.hub-showcase .cb-flow__node { min-height: 52px; font-size: .62rem; padding: .45rem .3rem; }
.hub-showcase .cb-flow__rail { height: 7px; }
.hub-showcase .cb-flow__pkt { width: 22px; height: 14px; margin-top: -7px; }
.hub-showcase .cb-flow__dest { padding: .4rem .55rem; }
.hub-showcase .cb-flow__dest strong { font-size: .72rem; }

@media (max-width: 767px) {
    .cb-flow {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .cb-flow__sources {
        flex-direction: row;
        justify-content: center;
    }
    .cb-flow__node { min-width: 88px; }
}