/*
|--------------------------------------------------------------------------
| HardKing
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
| Release 4.0
|--------------------------------------------------------------------------
*/

:root{

    --hk-hero-height:420px;

    --hk-hero-overlay:
        linear-gradient(
            90deg,
            rgba(5,8,10,.94) 0%,
            rgba(5,8,10,.84) 28%,
            rgba(5,8,10,.58) 55%,
            rgba(5,8,10,.20) 78%,
            rgba(5,8,10,.05) 100%
        );

    --hk-hero-green:#39d400;

    --hk-hero-green-dark:#1e7e18;

    --hk-hero-text:#ffffff;

    --hk-hero-text-soft:#d6d6d6;

    --hk-hero-radius:18px;

}

/* ==========================================================
   HERO
========================================================== */

.hk-hero{

    position:relative;

    overflow:hidden;

    width:100%;

    height:var(--hk-hero-height);

    min-height:var(--hk-hero-height);

    background:#05080a;

    display:flex;

    align-items:center;

}

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

.hk-hero-background{

    position:absolute;

    inset:0;

    background-repeat:no-repeat;

    background-position:right center;

    background-size:cover;

    z-index:1;

    transform:scale(1.02);

}

/* ==========================================================
   OVERLAY
========================================================== */

.hk-hero-overlay{

    position:absolute;

    inset:0;

    background:var(--hk-hero-overlay);

    z-index:2;

}

/* ==========================================================
   GLOW
========================================================== */

.hk-hero-glow{

    position:absolute;

    width:420px;

    height:420px;

    right:-140px;

    bottom:-170px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(57,212,0,.30),

            rgba(57,212,0,.12),

            transparent 70%

        );

    filter:blur(60px);

    animation:hkGlowPulse 8s ease-in-out infinite;

    z-index:2;

}

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

.hk-hero .container{

    position:relative;

    z-index:10;

}

/* ==========================================================
   GRID
========================================================== */

.hk-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:30px;

    height:var(--hk-hero-height);

}

/* ==========================================================
   COLUNA ESQUERDA
========================================================== */

.hk-hero-content{

    max-width:560px;

}

/* ==========================================================
   BADGE
========================================================== */

.hk-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:6px 14px;

    margin-bottom:14px;

    border-radius:50px;

    background:rgba(57,212,0,.12);

    border:1px solid rgba(57,212,0,.28);

    color:#8dff83;

    font-size:11px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.hk-hero-badge i{

    color:var(--hk-hero-green);

    font-size:13px;

}

/* ==========================================================
   TÍTULO
========================================================== */

.hk-hero-title{

    font-size:32px;
    line-height:0.95;

    font-weight:900;

    letter-spacing:0px;

    color:#fff;

    max-width:700px;

    margin-bottom:28px;

}
/*.hk-hero-title{

    margin:0 0 16px;

    color:#fff;

    font-size:2.45rem;

    line-height:1.12;

    font-weight:800;

    letter-spacing:-1px;

}
*/
.hk-hero-title strong{

    color:var(--hk-hero-green);

}

/* ==========================================================
   DESCRIÇÃO
========================================================== */
.hk-hero-description{

    max-width:500px;

    margin:0;

    color:var(--hk-hero-text-soft);

    font-size:15px;

    line-height:1.7;

}

.hk-highlight{

    color:#56ff00;

    text-shadow:
        0 0 10px rgba(86,255,0,.25);

}

/* ==========================================================
   BOTÕES
========================================================== */

.hk-hero-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:24px;

}

.hk-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:44px;

    padding:0 22px;

    border-radius:50px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.30s ease;

    overflow:hidden;

}

.hk-btn i{

    font-size:16px;

}

.hk-btn-primary{

    background:var(--hk-hero-green);

    color:#ffffff;

    box-shadow:

        0 8px 25px rgba(57,212,0,.22);

}

.hk-btn-primary:hover{

    transform:translateY(-2px);

    background:#48ee0b;

    color:#ffffff;

}

.hk-btn-outline{

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

    color:#ffffff;

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

    backdrop-filter:blur(12px);

}

.hk-btn-outline:hover{

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

    color:#ffffff;

    transform:translateY(-2px);

}

/* ==========================================================
   BENEFÍCIOS
========================================================== */

.hk-hero-benefits{

    display:grid;

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

    gap:12px;

    margin-top:24px;

}

.hk-hero-benefit{

    display:flex;

    align-items:center;

    gap:10px;

    color:#f1f1f1;

    font-size:13px;

    font-weight:500;

}

.hk-hero-benefit i{

    color:var(--hk-hero-green);

    font-size:15px;

}

/* ==========================================================
   COLUNA DIREITA
========================================================== */

.hk-hero-visual{
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    height:100%;
    overflow:visible;
}

/* ==========================================================
   IMAGEM DA SCENE
========================================================== */

.hk-hero-scene{
    position:absolute;
    right:0;
    bottom:0;
    z-index:10;
}

.hk-scene-image{
    display:block;
    width:850px;
    height:auto;
}

/* ==========================================================
   FIBRA ÓPTICA
========================================================== */

.hk-hero-fiber{
    position:absolute;
    right:-20px;
    bottom:-50px; /* antes -90px */
    width:650px;
    z-index:20;

}
.hk-fiber-glow{
    position:absolute;
    right:40px;
    bottom:40px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,255,100,.25) 0%,
        rgba(0,255,100,.08) 45%,
        transparent 75%
    );

    filter:blur(30px);

    animation:glowPulse 4s ease-in-out infinite;
}

.hk-hero-fiber img{
    width:100%;
    height:auto;
    display:block;
}


/* ==========================================================
   NOISE
========================================================== */

.hk-hero-noise{

    position:absolute;

    inset:0;

    background-repeat:repeat;

    background-size:220px;

    opacity:.03;

    z-index:12;

    pointer-events:none;

}

/* ==========================================================
   OVERLAYS
========================================================== */

.hk-hero-overlay-top{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:70px;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.22),

            transparent

        );

    z-index:15;

}

.hk-hero-overlay-bottom{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:40px;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.18),

            transparent

        );

    z-index:15;

}
/* ==========================================================
   LIGHT RAYS
========================================================== */

.hk-hero-light-rays{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:3;

}

.hk-hero-light-rays span{

    position:absolute;

    display:block;

    width:2px;

    height:220px;

    background:linear-gradient(

        to bottom,

        rgba(57,212,0,0),

        rgba(57,212,0,.45),

        rgba(57,212,0,0)

    );

    filter:blur(.5px);

    transform:rotate(18deg);

}

.hk-hero-light-rays span:nth-child(1){

    left:58%;

    top:-30px;

    animation:hkRay01 6s linear infinite;

}

.hk-hero-light-rays span:nth-child(2){

    left:68%;

    top:10px;

    animation:hkRay02 7s linear infinite;

}

.hk-hero-light-rays span:nth-child(3){

    left:78%;

    top:-10px;

    animation:hkRay03 8s linear infinite;

}

.hk-hero-light-rays span:nth-child(4){

    left:88%;

    top:20px;

    animation:hkRay04 6.5s linear infinite;

}

.hk-hero-light-rays span:nth-child(5){

    left:96%;

    top:-20px;

    animation:hkRay05 7.5s linear infinite;

}

/* ==========================================================
   PARTÍCULAS
========================================================== */

.hk-hero-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:4;

    overflow:hidden;

}

.hk-hero-particles::before,

.hk-hero-particles::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(circle,rgba(57,212,0,.25) 1px,transparent 1px);

    background-size:90px 90px;

    opacity:.22;

}

.hk-hero-particles::before{

    animation:hkParticlesOne 30s linear infinite;

}

.hk-hero-particles::after{

    background-size:130px 130px;

    opacity:.12;

    animation:hkParticlesTwo 45s linear infinite;

}

/* ==========================================================
   TRANSIÇÕES
========================================================== */

.hk-hero-content{

    animation:hkFadeUp .8s ease forwards;

}

.hk-hero-visual{

    animation:hkFadeUp 1s ease forwards;

}

/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width:1200px){

    :root{

        --hk-hero-height:400px;

    }

    .hk-hero-wrapper{

        gap:20px;

    }

    .hk-hero-title{

        font-size:2.15rem;

    }

    .hk-hero-scene{

        display:none;

        position:absolute;

        right:20px;

        bottom:0;

    }

    .hk-hero-fiber{

        display:none;
        
        width:190px;

    }

}

@media (max-width:992px){

    :root{

        --hk-hero-height:auto;

    }

    .hk-hero{

        padding:30px 0;

        height:auto;

        min-height:auto;

    }

    .hk-hero-wrapper{

        grid-template-columns:1fr;

        gap:25px;

        text-align:center;

        height:auto;

    }

    .hk-hero-content{

        margin:auto;
    

    }

    .hk-hero-description{

        margin:auto;

    }

    .hk-hero-buttons{

        justify-content:center;

    }

    .hk-hero-benefits{

        justify-items:center;

    }

    .hk-hero-visual{

        justify-content:center;

    }

    .hk-hero-scene img{

        max-width:320px;

    }

    .hk-hero-fiber{

        right:50%;

        transform:translateX(50%);

        bottom:-10px;

    }

}
/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes hkFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes hkGlowPulse{

    0%,100%{

        opacity:.45;

        transform:scale(.95);

    }

    50%{

        opacity:.85;

        transform:scale(1.05);

    }

}

@keyframes hkSceneFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

@keyframes hkFiberFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}

@keyframes glowPulse{

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

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

@keyframes hkParticlesOne{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

@keyframes hkParticlesTwo{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-180px);

    }

}

@keyframes hkRay01{

    0%,100%{

        opacity:.10;

    }

    50%{

        opacity:.45;

    }

}

@keyframes hkRay02{

    0%,100%{

        opacity:.15;

    }

    50%{

        opacity:.55;

    }

}

@keyframes hkRay03{

    0%,100%{

        opacity:.12;

    }

    50%{

        opacity:.50;

    }

}

@keyframes hkRay04{

    0%,100%{

        opacity:.08;

    }

    50%{

        opacity:.40;

    }

}

@keyframes hkRay05{

    0%,100%{

        opacity:.18;

    }

    50%{

        opacity:.60;

    }

}
/* ==========================================================
   MOBILE
========================================================== */



@media (max-width:768px){

    .hk-hero-wrapper{

        grid-template-columns:1fr;

        height:auto;

        gap:20px;

}
    
    
    .hk-hero{

        padding:28px 0;

    }

    .hk-hero-title{

        font-size:1.75rem;

        line-height:1.20;

    }

    .hk-hero-description{

        font-size:14px;

    }

    .hk-hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hk-btn{

        width:100%;

        max-width:300px;

    }

    .hk-hero-benefits{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:18px;

    }

      .hk-hero-scene{
        position:relative;
        right:auto;
        bottom:auto;
        max-width:320px;
        margin:0 auto;
    }

    .hk-hero-scene img{

        width:100%;
        max-width:320px;
        max-height:none;
        height:auto;

    }

    .hk-hero-fiber{

        width:220px;

        bottom:-6px;

    }

}

@media (max-width:576px){

    .hk-hero{

        padding:22px 0;

    }

    .hk-hero-title{

        font-size:1.55rem;

    }

    .hk-hero-description{

        font-size:13px;

        line-height:1.6;

    }

    .hk-hero-badge{

        font-size:10px;

        padding:5px 12px;

    }

    .hk-hero-scene img{

        width:100%;
        max-width:360px;
        max-height:none;
        height:auto;

    }

    .hk-btn{

        height:40px;

        font-size:13px;

    }

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.hk-hero,
.hk-hero *{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

.hk-hero-background,
.hk-hero-glow,
.hk-hero-scene img,
.hk-hero-fiber{

    will-change:

        transform,

        opacity;

}

/* ==========================================================
   ACESSIBILIDADE
========================================================== */

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

    .hk-hero *{

        animation:none !important;

        transition:none !important;

    }

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    .hk-hero{

        display:none;

    }

}

/* ==========================================================
   NOTEBOOK HD
   1366x768 / 1440x900
========================================================== */

@media (max-width:1400px){

    /* ==========================
       HEADER
    ========================== */

    .hk-header{

        padding:10px 0;

    }

    .hk-logo img{

        max-height:42px;

    }

    .hk-nav{

        gap:18px;

    }

    /* ==========================
       HERO
    ========================== */

    :root{

        --hk-hero-height:380px;

    }

    .hk-hero-wrapper{

        gap:20px;

    }

    .hk-hero-content{

        max-width:500px;

    }

    .hk-hero-title{

        font-size:28px;

        margin-bottom:18px;

    }

    .hk-hero-description{

        font-size:14px;

        line-height:1.6;

    }

    .hk-hero-buttons{

        margin-top:18px;

    }

    .hk-hero-benefits{

        margin-top:18px;

        gap:10px;

    }

    .hk-hero-benefit{

        font-size:12px;

    }

    .hk-scene-image{

        width:700px;

    }

    .hk-hero-fiber{

        width:540px;

        right:-10px;

    }

    /* ==========================
       PLANOS
    ========================== */

    .hk-plans{

        padding:45px 0 55px;

    }

    .hk-plans-header{

        margin-bottom:12px;

    }

    .hk-plans-title{

        font-size:2.3rem;

        margin-bottom:0;

    }

    .hk-plan-tabs{

        margin-bottom:15px;

    }

    .hk-plan-tab{

        height:34px;

        padding:0 18px;

        font-size:.9rem;

    }

    .hk-plans-layout{

        grid-template-columns:
            1fr
            220px;

        gap:15px;

    }

    .hk-plan-card{

        min-height:470px;

        padding:18px;

    }

    .hk-plan-name{

        font-size:1.7rem;

    }

    .hk-plan-speed{

        font-size:2.3rem;

    }

    .infinity .hk-plan-speed{

        font-size:1.9rem;

    }

    .hk-plan-text{

        height:55px;

        font-size:.88rem;

        margin-bottom:15px;

    }

    .hk-plan-features li{

        font-size:.88rem;

        margin-bottom:8px;

    }

    .hk-plan-price{

        font-size:2rem;

    }

    .hk-plan-badge{

        top:-18px;

        padding:6px 14px;

        font-size:.7rem;

    }

    /* ==========================
       CONFIGURADOR
    ========================== */

    .hk-config-card{

        width:220px;

        margin-top:-25px;

        padding:16px;

    }

    .hk-config-card h3{

        font-size:1.3rem;

        text-align:center;

        margin-bottom:10px;

    }

    .hk-selected-plan{

        padding:8px 10px;

        font-size:.85rem;

    }

    .hk-addon-option{

        gap:8px;

    }

    .hk-addon-option img{

        max-height:28px;

    }

    .hk-config-total{

        margin-top:8px;

        padding-top:8px;

    }

    .hk-config-total strong{

        font-size:1.8rem;

    }

    .hk-plan-btn{

        height:44px;

        margin-top:8px;

    }

    /* ==========================
       BENEFÍCIOS GERAIS
    ========================== */

    .hk-plan-benefits{

        padding:15px 18px;

        gap:15px;

    }

    .hk-plan-benefits span{

        font-size:.85rem;

    }

    /* MENU */

    .hk-nav{

        gap:15px;

    }

    .hk-header-btn{

        padding:0 16px;

        font-size:.9rem;

    }

    /* BADGE INFINITY */

    .hk-plan-badge{

        top:-18px;

        font-size:.7rem;

        padding:6px 14px;

    }

    .hk-plan-header{

        margin-top:12px;

    }

}



/* ==========================================================
   END HERO
========================================================== */