.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:80px;

    background:

        radial-gradient(circle at top right,#A678FF22,transparent 35%),

        radial-gradient(circle at bottom left,#1D173F22,transparent 40%),

        var(--background);

}

.hero .container{

    width:min(1500px,94%);

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero-badge{

    display:inline-block;

    background:var(--surface-2);

    color:var(--secundaria);

    padding:10px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.hero h1{

    font-size:5rem;

    margin-bottom:25px;

    line-height:1.1;

    text-wrap:balance;

}

.hero p{

    font-size:1.3rem;

    margin-bottom:40px;

    max-width:680px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-visual{

    position:relative;

    width:690px;

    height:690px;

    margin:auto;

}

.circle{

    position:absolute;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:white;

    box-shadow:var(--shadow);

}

.circle i{

    font-size:2.6rem;

    color:var(--secundaria);

    pointer-events:none;

}

.central{

    width:250px;

    height:250px;

    top:220px;

    left:220px;

    background:linear-gradient(

        135deg,

        var(--primaria),

        var(--secundaria)

    );

    padding:0;

    border:4px solid var(--surface);

    overflow:hidden;

    cursor:pointer;

    z-index:2;

    transition:transform .2s ease;

}

.central:active{

    transform:scale(.94);

}

.central img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    pointer-events:none;

}

/* ===== Ícones ao redor, posicionados por "slot" (giram suavemente) ===== */

.hero-visual .circle[data-icone]{

    width:115px;

    height:115px;

    cursor:pointer;

    transition:

        top .8s cubic-bezier(.4,0,.2,1),

        left .8s cubic-bezier(.4,0,.2,1),

        box-shadow var(--transition);

}

.hero-visual .circle[data-icone]:hover{

    box-shadow:0 15px 35px rgba(var(--acento-rgb,166,120,255),.3);

}

.slot-top{

    top:23px;

    left:288px;

    animation:flutuar 3.2s infinite ease-in-out;

}

.slot-right{

    top:288px;

    left:552px;

    animation:flutuar 4.1s infinite ease-in-out;

}

.slot-bottom{

    top:552px;

    left:288px;

    animation:flutuar 3.8s infinite ease-in-out;

}

.slot-left{

    top:288px;

    left:23px;

    animation:flutuar 3.5s infinite ease-in-out;

}

.central{

    animation:flutuar 4s infinite ease-in-out;

}

/* ===== Efeitos individuais ao clicar em cada ícone =====
   Cada ícone tem cor própria e fixa, independente da área
   selecionada em "Como Trabalhamos" (--acento muda lá embaixo,
   aqui no hero cada efeito tem sua identidade). */

/* --- Apps: badge de notificação --- */

.notif-badge{

    position:absolute;

    top:-4px;

    right:2px;

    min-width:22px;

    height:22px;

    padding:0 6px;

    border-radius:50%;

    background:#EF4444;

    color:#FFFFFF;

    font-size:.75rem;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 12px rgba(239,68,68,.4);

    opacity:0;

    transform:scale(0);

    pointer-events:none;

}

.notif-badge.tocado{

    animation:badgePop 1.3s cubic-bezier(.34,1.56,.64,1) forwards;

}

@keyframes badgePop{

    0%{ opacity:0; transform:scale(0); }

    35%{ opacity:1; transform:scale(1.3); }

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

    65%{ transform:scale(1.05); }

    85%{ opacity:1; transform:scale(1); }

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

}

/* --- Web: bits piscando ao redor (verde, como o código) --- */

.bit{

    position:absolute;

    font-family:monospace;

    font-weight:700;

    font-size:.8rem;

    color:#3ED598;

    opacity:0;

    pointer-events:none;

}

.b1{ top:-12px; left:8px; }

.b2{ bottom:-12px; right:2px; }

.b3{ top:50%; right:-20px; transform:translateY(-50%); }

.bit.tocado{

    animation:bitPop .9s ease forwards;

}

.b2.tocado{ animation-delay:.1s; }

.b3.tocado{ animation-delay:.2s; }

@keyframes bitPop{

    0%{ opacity:0; transform:translateY(6px); }

    30%{ opacity:1; transform:translateY(0); }

    100%{ opacity:0; transform:translateY(-14px); }

}

/* --- Design: tinta escorrendo do topo até embaixo do círculo --- */

.gota{

    position:absolute;

    top:0;

    width:10px;

    height:0;

    border-radius:8px 8px 8px 8px;

    opacity:0;

    pointer-events:none;

}

.g1{ top:8px; left:14px; background:#3B82F6; }

.g2{ top:1px; left:32px; width:12px; background:#FBBF24; }

.g3{ top:2px; left:52px; background:#EF4444; }

.g4{ top:11px; left:70px; width:9px; background:#22C55E; }

.gota.tocado{

    animation:escorrer 1.4s ease-in forwards;

}

.g2.tocado{ animation-delay:.1s; }

.g3.tocado{ animation-delay:.22s; }

.g4.tocado{ animation-delay:.32s; }

@keyframes escorrer{

    0%{ height:0; opacity:0; border-radius:8px 8px 8px 8px; }

    8%{ opacity:1; }

    75%{ height:118px; opacity:1; border-radius:8px 8px 50% 50%; }

    100%{ height:128px; opacity:0; border-radius:8px 8px 50% 50%; }

}

/* --- Marketing: seta atravessando o círculo (estilo "stonks") --- */

.stonks{

    position:absolute;

    bottom:4px;

    left:4px;

    font-size:1.9rem;

    color:var(--sucesso);

    opacity:0;

    pointer-events:none;

}

.stonks.tocado{

    animation:atravessarStonks 1.1s cubic-bezier(.3,0,.4,1) forwards;

}

@keyframes atravessarStonks{

    0%{ opacity:0; transform:translate(0,0) scale(.5) rotate(0deg); }

    18%{ opacity:1; }

    100%{ opacity:0; transform:translate(88px,-118px) scale(1.7) rotate(-6deg); }

}

@media(max-width:992px){

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero p{

        margin:auto;

        margin-bottom:40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-visual{

        display:none;

    }

}

@media(max-width:480px){

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:1rem;

    }

}

.feedback{

    background:

        radial-gradient(circle at top right,#A678FF33,transparent 45%),

        radial-gradient(circle at bottom left,#A678FF1a,transparent 40%),

        var(--primaria);

}