/* Section HERO*/
:root{
    --bg-primary:#030712;
    --card-bg:#09111f;
    --accent:#00d9ff;
    --text-soft:#94a3b8;
}

.hero-section{
    min-height:540px;
    margin-top:74px;

    display:grid;
    grid-template-columns: 1.45fr 0.85fr 190px;
    gap:28px;

    padding:24px 40px 10px 40px;
}

/* esquerda */
.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-badge{
    display:inline-block;
    width:fit-content;

    padding:7px 14px;
    border-radius:999px;

    background:rgba(0,217,255,.07);
    color:var(--accent);

    font-size:9px;
    font-weight:600;
    letter-spacing:1px;

    margin-bottom:18px;
}

.hero-left h1{
    font-size:38px;
    line-height:1.15;
    font-weight:600;
    letter-spacing:-1px;
    max-width:500px;
}

.hero-left h1 span{
    color:var(--accent);
}

.hero-left p{
    margin-top:16px;
    max-width:500px;

    color:var(--text-soft);
    font-size:13px;
    line-height:1.65;
    font-weight:300;
}

/* botões */
.hero-buttons{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:22px;
}

.primary-btn,
.secondary-btn{
    padding:11px 16px;
    border-radius:10px;

    cursor:pointer;
    font-size:11px;
    font-weight:600;
}

.primary-btn{
    background:var(--accent);
    border:none;
}

.secondary-btn{
    background:transparent;
    color:white;
    border:1px solid rgba(255,255,255,.08);
}

.hero-social{
    width:34px;
    height:34px;

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

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

    text-decoration:none;
    color:white;
    font-size:10px;
}

/* centro */
.hero-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.photo-card{
    width:220px;
    height:290px;

    border-radius:18px;
    overflow:hidden;

    border:1px solid rgba(0,217,255,.10);
    background:#07101d;
}

.photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* direita */
.hero-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    width:180px;
}

.metric-line{
    display:flex;
    flex-direction:column;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.metric-number{
    color:var(--accent);
    font-size:18px;
    font-weight:600;
    line-height:1;
}

.metric-label{
    margin-top:5px;
    color:#94a3b8;
    font-size:11px;
    font-weight:400;
    line-height:1.4;
}

/* HERO INITIAL STATE */
.hero-left,
.hero-center,
.hero-right{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

/* WHEN LOADED */
.hero-loaded .hero-left{
    opacity:1;
    transform:translateY(0);
    transition-delay:.15s;
}

.hero-loaded .hero-center{
    opacity:1;
    transform:translateY(0);
    transition-delay:.35s;
}

.hero-loaded .hero-right{
    opacity:1;
    transform:translateY(0);
    transition-delay:.55s;
}

/* PHOTO */
.photo-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.photo-card:hover{
    box-shadow:0 20px 40px rgba(0,217,255,.12);
    border-color:rgba(0,217,255,.35);
}

@media (max-width: 768px){

    .hero-left p{
        font-size:14px;
        line-height:1.5;
        max-width:100%;
        text-align:center;
        padding:0 10px;
    }
    
    .hero-buttons{
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:10px;
        flex-wrap:nowrap;
        width:100%;
    }

    .secondary-btn{
        padding:10px 14px;
        font-size:12px;
        white-space:nowrap;
    }

    .hero-social{
        width:42px;
        height:42px;
        flex-shrink:0;
    }


}