html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:'Montserrat',sans-serif;

    background:#050816;

    position:relative;
}

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(37,99,235,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(37,99,235,.08),
            transparent 40%
        );

    pointer-events:none;

    z-index:0;
}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");

    pointer-events:none;

    z-index:1;
}

/* =========================================================
   DASHBOARD FUTURISTA PREMIUM
========================================================= */

.tech-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(circle at 70% 50%, black, transparent 65%);
    opacity:.45;
}

.hero-glow{
    position:absolute;
    width:500px;
    height:500px;
    right:12%;
    top:25%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.35), transparent 65%);
    filter:blur(40px);
    pointer-events:none;
}

.main-case-card{
    position:relative;
    z-index:5;
    width:420px;
    min-height:270px;
    box-shadow:
        0 40px 120px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.05);
}

.case-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:30px;
}

.case-label{

    color:#2563eb;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;
}

.case-top h3{

    margin-top:12px;

    font-size:46px;

    line-height:1;
}

.case-info{

    display:flex;
    flex-direction:column;

    gap:14px;

    margin-bottom:28px;
}

.info-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.info-row span{

    color:#64748b;

    font-size:14px;
}

.info-row strong{

    color:white;

    font-size:14px;

    font-weight:600;
}

.case-progress-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:12px;

    color:#94a3b8;
}

.case-progress-header strong{

    color:white;

    font-size:28px;
}

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 25px rgba(34,197,94,.9);
}

.main-case-card h3{
    font-size:44px;
    margin-bottom:30px;
}

.case-metric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#94a3b8;
    margin-bottom:12px;
}

.case-metric strong{
    color:#fff;
    font-size:28px;
}

.progress-track{
    width:100%;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    margin-bottom:26px;
}

.progress-fill{
    width:24%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb,#60a5fa);
    box-shadow:0 0 30px rgba(37,99,235,.8);
}

.case-details p{
    font-size:14px;
    margin-bottom:8px;
    color:#94a3b8;
}

.cta-core{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.45), transparent 65%);
    filter:blur(20px);
    animation:pulseCore 4s ease-in-out infinite;
}

@keyframes pulseCore{
    0%,100%{
        transform:scale(.9);
        opacity:.55;
    }
    50%{
        transform:scale(1.15);
        opacity:1;
    }
}

/* =========================================================
   Partículas flotantes
========================================================= */

.background-layer{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:1;
}

.floating-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    animation:floatOrb 18s ease-in-out infinite;
}

.orb-1{

    width:700px;
    height:700px;

    top:10%;
    left:5%;

    background:
    rgba(37,99,235,.25);
}

.orb-2{

    width:500px;
    height:500px;

    right:5%;
    top:55%;

    background:
    rgba(37,99,235,.18);
}

.orb-3{

    width:350px;
    height:350px;

    left:55%;
    top:20%;

    background:
    rgba(96,165,250,.15);
}

@keyframes floatOrb{

    0%{
        transform:
        translate(0,0)
        scale(1);
    }

    25%{
        transform:
        translate(60px,-40px)
        scale(1.08);
    }

    50%{
        transform:
        translate(-30px,50px)
        scale(.95);
    }

    75%{
        transform:
        translate(40px,25px)
        scale(1.05);
    }

    100%{
        transform:
        translate(0,0)
        scale(1);
    }
}

@keyframes particlesMove{

    0%{
        transform:
        translate(0,0);
    }

    50%{
        transform:
        translate(-40px,-80px);
    }

    100%{
        transform:
        translate(-80px,-160px);
    }
}

.particles{

    position:absolute;

    inset:-200px;

    opacity:.8;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.32) .8px, transparent 1.6px),
        radial-gradient(circle, rgba(96,165,250,.26) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.18) .7px, transparent 1.8px),
        radial-gradient(circle, rgba(37,99,235,.22) 1.2px, transparent 2.4px);

    background-size:
        137px 193px,
        211px 157px,
        173px 241px,
        283px 199px;

    background-position:
        13px 29px,
        97px 43px,
        41px 119px,
        151px 73px;

    animation:
        particlesDrift 90s linear infinite;

    will-change:transform;
}

@keyframes particlesDrift{

    0%{
        transform:translate3d(0,0,0);
    }

    100%{
        transform:translate3d(-283px,-241px,0);
    }
}

.flow-lines{

    position:absolute;
    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 140px,
        rgba(37,99,235,.03) 141px,
        transparent 142px
    );

    animation:
        flowMove 12s linear infinite;

    opacity:.8;
}

@keyframes flowMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-140px);
    }
}

.scan-light{

    position:absolute;

    width:500px;
    height:100%;

    left:-500px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.03),
        transparent
    );

    animation:
        scanMove 18s linear infinite;
}

@keyframes scanMove{

    from{
        left:-500px;
    }

    to{
        left:120%;
    }
}


.panel{

    position:relative;

    overflow:hidden;
}

.panel-bg{

    position:absolute;

    z-index:0;

    pointer-events:none;

    transition:
        opacity .8s ease;

    filter:
        grayscale(1)
        brightness(.8);
    
    transition:
        opacity .8s ease;

    animation:
        panelFloat 40s ease-in-out infinite;
}

.panel-bg-justice{

    width:900px;

    right:-250px;

    top:50%;

    transform:
        translateY(-50%);
}

.panel-bg-columns{

    width:850px;

    left:-180px;

    bottom:-120px;
}

.panel-bg-scale{

    width:500px;

    right:80px;

    top:80px;
}

@keyframes panelFloat{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-20px);
    }

    100%{

        transform:
        translateY(0px);
    }
}