/* =========================================================
   BUSINESS OPERATING SYSTEM
========================================================= */

.business-os{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:
        radial-gradient(circle at top,#203f73 0%,#0f172a 40%,#060b16 100%);
}

/* background */

.business-os::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.25;

    pointer-events:none;
}

.business-os::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:#2563eb;

    filter:blur(180px);

    opacity:.12;

    top:-250px;

    left:50%;

    transform:translateX(-50%);
}

.section-title{

    max-width:900px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;
}

.section-title .eyebrow{

    display:inline-block;

    color:#4f8cff;

    letter-spacing:2px;

    font-weight:700;

    font-size:13px;

    text-transform:uppercase;

    margin-bottom:18px;
}

.section-title h2{

    font-size:58px;

    line-height:1.1;

    color:#fff;

    margin-bottom:25px;
}

.section-title p{

    color:#93a4bf;

    font-size:20px;

    line-height:1.8;
}

.os-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:28px;

    transition:.35s;

    display:flex;

    gap:18px;

    align-items:flex-start;

    position:relative;

    overflow:hidden;
}

.os-card::before{

    content:"";

    position:absolute;

    left:-40%;

    top:0;

    width:40%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transition:.8s;
}

.os-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:

        0 30px 60px rgba(0,0,0,.35);
}

.os-card:hover::before{

    left:140%;
}

.os-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(135deg,#2563eb,#38bdf8);

    color:#fff;

    font-size:26px;

    flex-shrink:0;
}

.os-content h3{

    color:#fff;

    margin-bottom:10px;

    font-size:22px;
}

.os-content p{

    color:#93a4bf;

    line-height:1.7;
}

.os-center{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;
}

.core-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#2563eb;

    opacity:.15;

    filter:blur(120px);

    animation:pulseGlow 5s infinite ease-in-out;
}

.core-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:500px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    border-radius:34px;

    padding:55px;

    text-align:center;

    box-shadow:

        0 40px 80px rgba(0,0,0,.45);
}

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    display:inline-block;

    margin-bottom:15px;

    box-shadow:

        0 0 20px #22c55e;

    animation:livePulse 1.6s infinite;
}

.core-card small{

    color:#7dd3fc;

    letter-spacing:2px;

    display:block;

    margin-bottom:18px;
}

.core-card h2{

    color:#fff;

    font-size:48px;

    margin-bottom:10px;
}

.core-card h4{

    color:#94a3b8;

    font-size:20px;

    font-weight:400;
}

.divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:35px 0;
}

.stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;
}

.stat{

    text-align:center;
}

.number{

    display:block;

    color:#fff;

    font-size:42px;

    font-weight:700;
}

.stat label{

    color:#94a3b8;

    font-size:14px;

    margin-top:8px;

    display:block;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* ==========================================
   Bottom Modules
========================================== */

.bottom-grid{

    margin-top:90px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;
}

.mini-card{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.35s;
}

.mini-card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:
        0 30px 60px rgba(0,0,0,.35);
}

.mini-card::before{

    content:"";

    position:absolute;

    left:-120px;

    top:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:#2563eb;

    opacity:.12;

    filter:blur(60px);
}

.mini-card i{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#38bdf8);

    color:#fff;

    font-size:28px;

    margin-bottom:22px;
}

.mini-card h4{

    color:#fff;

    font-size:28px;

    margin-bottom:15px;
}

.mini-card p{

    color:#94a3b8;

    line-height:1.8;
}

.os-card,
.mini-card,
.core-card{

    will-change:transform;

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;
}

.os-card:hover{

    transform:translateY(-12px) scale(1.02);
}

.mini-card:hover{

    transform:translateY(-10px);
}

.core-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 45px 90px rgba(37,99,235,.22);
}

/* ==========================================
   Animation
========================================== */

@keyframes pulseGlow{

    0%{

        transform:scale(.92);

        opacity:.08;

    }

    50%{

        transform:scale(1.05);

        opacity:.18;

    }

    100%{

        transform:scale(.92);

        opacity:.08;

    }

}

@keyframes livePulse{

    0%{

        opacity:.4;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

    100%{

        opacity:.4;

        transform:scale(.8);

    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.business-os .reveal{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;
}

.business-os .reveal.show{

    opacity:1;

    transform:none;
}

@media (max-width:1200px){

.os-layout{

    grid-template-columns:1fr;

    gap:45px;

}

.os-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);

}

.core-card{

    max-width:650px;

    margin:auto;

}

}

@media (max-width:768px){

.business-os{

    padding:90px 0;

}

.section-title h2{

    font-size:38px;

}

.section-title p{

    font-size:17px;

}

.os-column{

    grid-template-columns:1fr;

}

.bottom-grid{

    grid-template-columns:1fr;

}

.stats{

    grid-template-columns:1fr;

}

.core-card{

    padding:35px;

}

.core-card h2{

    font-size:36px;

}

.number{

    font-size:34px;

}

.os-card{

    padding:22px;

}

.mini-card{

    padding:26px;

}

}