/*=====================================================
 FELIX HERO V3
 Premium AI SaaS Hero
 Version : 1.0
======================================================*/



/*=====================================================
ROOT VARIABLES
======================================================*/

:root{

    --hero-bg:#07111f;

    --hero-primary:#00d4ff;

    --hero-secondary:#7c5cff;

    --hero-white:#ffffff;

    --hero-text:#cfd9e8;

    --hero-border:rgba(255,255,255,.08);

    --hero-card:rgba(255,255,255,.05);

    --hero-radius:28px;

    --hero-shadow:
        0 25px 60px rgba(0,0,0,.35);

}



/*=====================================================
SECTION
======================================================*/

.hero-v3{

    position:relative;

    min-height:100vh;

    overflow:visible;

    background:transparent;

    display:flex;

    align-items:center;

}



/*=====================================================
BACKGROUND
======================================================*/

.hero-v3-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}



.hero-v3-bg-gradient{

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(0,212,255,.12),
        transparent 45%),

        radial-gradient(circle at 85% 30%,
        rgba(124,92,255,.10),
        transparent 40%),

        radial-gradient(circle at 50% 100%,
        rgba(0,212,255,.08),
        transparent 55%);

}



.hero-v3-bg-grid{

    position:absolute;

    inset:0;

    opacity:.15;

    background-image:

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

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

    background-size:60px 60px;

}



.hero-v3-bg-glow{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    filter:blur(120px);

}



.hero-v3-bg-glow-1{

    left:-180px;

    top:-180px;

    background:rgba(0,212,255,.10);

}



.hero-v3-bg-glow-2{

    right:-200px;

    bottom:-180px;

    background:rgba(124,92,255,.10);

}



.hero-v3-particles{

    position:absolute;

    inset:0;

}



/*=====================================================
CONTAINER
======================================================*/

.hero-v3-container{

    position:relative;

    z-index:5;

    width:min(1480px,96%);

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(620px,1fr) 820px;

    align-items:center;

    gap:40px;

    overflow:visible;

    isolation:isolate;

}

/*=====================================================
LEFT
======================================================*/

.hero-v3-left{

    max-width:720px;

}



.hero-v3-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

    border:1px solid var(--hero-border);

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

}



.hero-v3-badge-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--hero-primary);

    box-shadow:

        0 0 18px var(--hero-primary);

}



.hero-v3-title{

    margin:0;

    color:#fff;

    font-size:74px;

    font-weight:800;

    line-height:1.05;

}



.hero-v3-title span{

    display:block;

}



.hero-v3-description{

    margin:34px 0;

    max-width:620px;

    color:var(--hero-text);

    font-size:20px;

    line-height:1.8;

}



/*=====================================================
BUTTONS
======================================================*/

.hero-v3-actions{

    display:flex;

    gap:18px;

    margin-top:40px;

}



.hero-v3-btn{

    text-decoration:none;

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}



.hero-v3-btn-primary{

    color:#07111f;

    background:var(--hero-primary);

}



.hero-v3-btn-secondary{

    color:#fff;

    border:1px solid var(--hero-border);

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

}



.hero-v3-btn:hover{

    transform:translateY(-4px);

}



/*=====================================================
STATS
======================================================*/

.hero-v3-stats{

    display:flex;

    gap:48px;

    margin-top:55px;

}



.hero-v3-stat{

    display:flex;

    flex-direction:column;

}



.hero-v3-stat-number{

    color:#fff;

    font-size:34px;

    font-weight:800;

}



.hero-v3-stat-label{

    color:var(--hero-text);

    font-size:15px;

}



/*=====================================================
RIGHT
======================================================*/

.hero-grid{
    overflow:visible;
}

.hero-image{
    overflow:visible;
}

.hero-section{
    overflow:visible;
}

.container{
    overflow:visible;
}



/*=====================================================
CORE
======================================================*/

.hero-v3-core{

    position:absolute;

    left:50%;

    top:56%;

    transform:translate(-50%,-50%);

    z-index:50;

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

@keyframes heroCoreFloat{

    0%,100%{
        transform:translate(-50%,-50%) translateY(0);
    }

    50%{
        transform:translate(-50%,-50%) translateY(-8px);
    }

}

.hero-v3-core::after{

    animation:heroCorePulse 3s ease-in-out infinite;

}

@keyframes heroCorePulse{

    0%,100%{
        opacity:.45;
        transform:scale(1);
    }

    50%{
        opacity:.9;
        transform:scale(1.15);
    }

}



.hero-v3-core-glow{

    position:absolute;

    inset:0;

    margin:auto;

    width:150px;

    height:150px;

    border-radius:50%;

    background:var(--hero-primary);

    filter:blur(32px);

    opacity:.55;

}



.hero-v3-core-logo{

    position:absolute;

    inset:0;

    margin:auto;
    
    left:50%;
    top:50%;

    width:105px;

    height:105px;

    border-radius:50%;

    display:flex;
    transform:translate(-50%,-50%);
    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--hero-primary),
            var(--hero-secondary)
        );

    box-shadow:

        0 0 50px rgba(0,212,255,.35);

}

.hero-v3-core-logo img{

    width:64px;

    display:block;

}



/*=====================================================
RINGS
======================================================*/

.hero-v3-ring{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(0,212,255,.18);

    animation:heroRing 6s linear infinite;

}



.hero-v3-ring-1{

    width:180px;

    height:180px;

}



.hero-v3-ring-2{

    width:250px;

    height:250px;

    animation-delay:1.5s;

}



.hero-v3-ring-3{

    width:320px;

    height:320px;

    animation-delay:3s;

}



@keyframes heroRing{

    0%{

        opacity:.15;

        transform:
            translate(-50%,-50%)
            scale(.96);

    }

    50%{

        opacity:.45;

    }

    100%{

        opacity:.15;

        transform:
            translate(-50%,-50%)
            scale(1.04);

    }

}

/*=====================================================
NETWORK SVG
======================================================*/

.hero-v3-network{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:15;

    overflow:visible;

    pointer-events:none;

}

@keyframes heroLineFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-250;

    }

}



/*=====================================================
FLOATING CARDS
======================================================*/

.hero-v3-card{

    position:absolute;

    width:225px;
    min-height:118px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:22px;

    border-radius:26px;

    animation:heroCardFloat 6s ease-in-out infinite;

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

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

    backdrop-filter:blur(18px);

    z-index:20;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.hero-v3-card-ai{animation-delay:0s;}
.hero-v3-card-web{animation-delay:.8s;}
.hero-v3-card-cloud{animation-delay:1.6s;}
.hero-v3-card-whatsapp{animation-delay:2.4s;}
.hero-v3-card-mobile{animation-delay:3.2s;}
.hero-v3-card-seo{animation-delay:4s;}

@keyframes heroCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.hero-v3-card:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:rgba(0,212,255,.35);

    box-shadow:
        0 0 35px rgba(0,212,255,.22);

}

.hero-v3-card-whatsapp:hover{

    transform:translateX(-50%) translateY(-8px) scale(1.03);

}

.hero-v3-card-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    flex-shrink:0;

    background:

        linear-gradient(

            135deg,

            rgba(0,212,255,.22),

            rgba(124,92,255,.22)

        );

}



.hero-v3-card-content{

    flex:1;

}



.hero-v3-card-content h4{

    margin:0 0 8px;

    color:#fff;

    font-size:20px;

    font-weight:700;

}



.hero-v3-card-content p{

    margin:0;

    color:var(--hero-text);

    font-size:14px;

    line-height:1.6;

}

/*=====================================================
FINAL RADIAL GEOMETRY
======================================================*/

/* AI */
.hero-v3-card-ai{

    left:268px;
    top:10px;

}

/* WEBSITE */
.hero-v3-card-web{

    right:-15px;
    top:135px;

}

/* CLOUD */
.hero-v3-card-cloud{

    right:-15px;
    bottom:135px;

}

/* WHATSAPP */
.hero-v3-card-whatsapp{

    bottom:35px;
    left:36%;
    transform:translateX(-50%);

}

/* MOBILE */
.hero-v3-card-mobile{

    bottom:135px;
    left:-10px;

}

/* SEO */
.hero-v3-card-seo{

    top:135px;
    left:-10px;

}

/*=====================================================
NETWORK NODES
======================================================*/

.hero-v3-node{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--hero-primary);

    box-shadow:

        0 0 20px var(--hero-primary);

    z-index:8;

    animation:heroNodePulse 2.6s ease-in-out infinite;

}

@keyframes heroNodePulse{

    0%,100%{
        transform:scale(1);
        opacity:.6;
    }

    50%{
        transform:scale(1.8);
        opacity:1;
    }

}

.hero-v3-node-core{

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}

.hero-v3-node-ai{

    left:50%;

    top:120px;

    transform:translateX(-50%);

}

.hero-v3-node-web{

    right:135px;

    top:195px;

}



.hero-v3-node-cloud{

    right:135px;

    bottom:200px;

}



.hero-v3-node-whatsapp{

    left:50%;

    bottom:115px;

    transform:translateX(-50%);

}



.hero-v3-node-mobile{

    left:135px;

    bottom:200px;

}



.hero-v3-node-seo{

    left:135px;

    top:195px;

}



/*=====================================================
ENERGY DOTS
======================================================*/

.hero-v3-energy{

    position:absolute;

    inset:0;

    pointer-events:none;

}



.hero-v3-energy-dot{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#fff;

    box-shadow:

        0 0 18px var(--hero-primary);

    animation:

        heroEnergy 2.5s linear infinite;

}



.hero-v3-energy-ai{

    left:50%;

    top:200px;

}



.hero-v3-energy-web{

    right:230px;

    top:230px;

    animation-delay:.3s;

}



.hero-v3-energy-cloud{

    right:230px;

    bottom:230px;

    animation-delay:.6s;

}



.hero-v3-energy-whatsapp{

    left:50%;

    bottom:185px;

    animation-delay:.9s;

}



.hero-v3-energy-mobile{

    left:230px;

    bottom:230px;

    animation-delay:1.2s;

}



.hero-v3-energy-seo{

    left:230px;

    top:230px;

    animation-delay:1.5s;

}



/*=====================================================
FLOAT ANIMATION
======================================================*/

@keyframes heroCardFloat{

    0%{

        transform:

            translateY(0px);

    }

    50%{

        transform:

            translateY(-12px);

    }

    100%{

        transform:

            translateY(0);

    }

}



@keyframes heroEnergy{

    0%{

        opacity:0;

        transform:scale(.5);

    }

    50%{

        opacity:1;

        transform:scale(1.2);

    }

    100%{

        opacity:0;

        transform:scale(.5);

    }

}



/*=====================================================
SCREEN READER
======================================================*/

.screen-reader-text{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

}



/*=====================================================
RESPONSIVE
======================================================*/

@media (max-width:1200px){

    .hero-v3-container{

        grid-template-columns:1fr;

        gap:80px;

    }

    .hero-v3-left{

        text-align:center;

        margin:auto;

    }

    .hero-v3-actions{

        justify-content:center;

    }

    .hero-v3-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

}



@media (max-width:768px){

    .hero-v3{

        padding:100px 0;

    }

    .hero-v3-title{

        font-size:48px;

    }

    .hero-v3-description{

        font-size:18px;

    }

    .hero-v3-cluster{

        transform:scale(.72);

        transform-origin:center;

    }

}



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

    *{

        animation:none!important;

        transition:none!important;

    }

}




.hero-v3-left{
    position:relative;
    z-index:5;
}

/*=====================================================
FLOWING NETWORK LINES
======================================================*/

.hero-v3-line{

    fill:none;

    stroke:url(#heroV3Gradient);

    stroke-width:2;

    opacity:.28;

    stroke-linecap:round;

    stroke-dashoffset:0;

    animation:heroNetworkFlow 12s linear infinite;

    stroke-dasharray:12 16;

}

@keyframes heroNetworkFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-500;

    }

}

.hero-v3-cluster{

    position:relative;

    width:760px;

    height:760px;

    margin:auto;

    overflow:visible;

    transform:translateY(-70px);

}

.hero-v3-right{

    position:relative;

    width:820px;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:visible;

    flex-shrink:0;

    z-index:20;

    transform:translateY(-70px);

}