/* =========================================================
   RE-PLANT PROTOCOL — CYBER ECO INTERFACE
========================================================= */

:root{

    --neon-green:#39ff14;
    --cyber-green:#53ff7a;
    --dark-bg:#020402;

    --glass-bg:rgba(255,255,255,0.03);
    --glass-border:rgba(255,255,255,0.08);

    --soft-shadow:
        0 0 40px rgba(57,255,20,0.06);

    --green-glow:
        0 0 15px rgba(57,255,20,0.35),
        0 0 30px rgba(57,255,20,0.12);

}

/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100vh;

    background:
        radial-gradient(circle at top,
        rgba(57,255,20,0.04),
        transparent 35%),
        radial-gradient(circle at bottom,
        rgba(57,255,20,0.03),
        transparent 45%),
        #010302;

    color:white;

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

    overflow-x:hidden;
}

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

body::before{

    content:"";

    position:fixed;
    inset:0;

    background-image:
        radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);

    background-size:4px 4px;

    opacity:0.05;

    pointer-events:none;

    z-index:1;
}

/* =========================================================
   MAIN
========================================================= */

.main-container{
    position:relative;
    z-index:2;

    width:100%;
    min-height:100vh;
}

/* =========================================================
   LOADING SCREEN
========================================================= */

#loading-screen{

    position:fixed;
    inset:0;

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

    background:
        radial-gradient(circle at center,
        rgba(57,255,20,0.06),
        transparent 35%),
        linear-gradient(
            180deg,
            #020402 0%,
            #000 100%
        );

    z-index:9999;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

/* FRAME */

#loading-screen::after{

    content:"";

    position:absolute;

    width:92%;
    height:88%;

    border:1px solid rgba(57,255,20,0.08);

    border-radius:32px;

    pointer-events:none;
}

/* =========================================================
   LOGO FRAME
========================================================= */

.logo-frame{

    width:430px;
    max-width:88vw;

    padding:32px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.015)
        );

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

    backdrop-filter:blur(14px);

    box-shadow:
        var(--soft-shadow),
        inset 0 0 50px rgba(57,255,20,0.03);

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

    position:relative;

    overflow:hidden;

    margin-bottom:35px;
}

.logo-frame::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at center,
        rgba(57,255,20,0.08),
        transparent 70%);

    opacity:.7;
}

/* =========================================================
   LOGO
========================================================= */

.logo-loading{

    width:260px;
    max-width:70vw;

     border-radius:50px; /* arredonda */

    overflow:hidden;


    position:relative;
    z-index:2;

    filter:
        drop-shadow(0 0 15px rgba(57,255,20,0.25))
        drop-shadow(0 0 40px rgba(57,255,20,0.12));

    animation:
        pulse 2.5s infinite ease-in-out;
}

/* =========================================================
   LABEL
========================================================= */

.protocol-label{

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

    font-size:.72rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--neon-green);

    margin-bottom:22px;

    opacity:.85;
}

/* =========================================================
   SEEDLINGS
========================================================= */

.seedlings-container{

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

    gap:14px;

    margin-bottom:22px;

    min-height:50px;
}

.seedling{

    font-size:2rem;

    opacity:.12;

    transform:
        translateY(10px)
        scale(.9);

    transition:
        transform .4s ease,
        opacity .4s ease,
        filter .4s ease;
}

.seedling.planted{

    opacity:1;

    transform:
        translateY(0)
        scale(1.15);

    filter:
        drop-shadow(0 0 10px var(--neon-green))
        drop-shadow(0 0 20px rgba(57,255,20,0.25));
}

/* =========================================================
   PROGRESS BAR
========================================================= */

.load-bar{

    width:340px;
    max-width:80vw;

    height:6px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(57,255,20,0.08);

    position:relative;
}

.load-fill{

    width:0%;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #173f11 0%,
            var(--cyber-green) 45%,
            var(--neon-green) 100%
        );

    box-shadow:
        0 0 12px rgba(57,255,20,0.6),
        0 0 25px rgba(57,255,20,0.2);

    transition:width .3s ease;
}

/* =========================================================
   STATUS TEXT
========================================================= */

.load-text{

    margin-top:18px;

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

    letter-spacing:4px;

    font-size:.78rem;

    color:var(--neon-green);

    text-transform:uppercase;

    text-align:center;

    opacity:.9;

    animation:
        textBlink 1.8s infinite;
}

/* =========================================================
   SELECT SCREEN
========================================================= */

#select-screen{

    width:100%;
    min-height:100vh;

    display:none;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:80px 24px;

    text-align:center;

    animation:fadeIn 1s ease;
}

/* =========================================================
   TITLE
========================================================= */

.hud-title{

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

    font-size:1.4rem;

    letter-spacing:4px;

    color:var(--cyber-green);

    margin-bottom:22px;

    text-shadow:
        0 0 12px rgba(57,255,20,0.25);
}

/* =========================================================
   INTRO TEXT
========================================================= */

.protocol-description{

    max-width:850px;

    color:#9a9a9a;

    line-height:1.8;

    font-size:1rem;

    margin-bottom:55px;
}

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

.choice-container{

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

    gap:22px;

    width:100%;
    max-width:1200px;
}

/* =========================================================
   CARD
========================================================= */

.choice-card{

    width:320px;
    min-height:320px;

    padding:35px 28px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.015)
        );

    border:1px solid rgba(57,255,20,0.14);

    backdrop-filter:blur(14px);

    position:relative;

    overflow:hidden;

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

    cursor:pointer;

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

    text-align:center;
}

.choice-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            130deg,
            rgba(57,255,20,0.08),
            transparent,
            transparent
        );

    opacity:0;

    transition:.35s;
}

.choice-card:hover{

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

    border-color:
        rgba(57,255,20,0.35);

    box-shadow:
        0 0 30px rgba(57,255,20,0.08);
}

.choice-card:hover::before{
    opacity:1;
}

/* =========================================================
   CARD ICON
========================================================= */

.card-icon{

    width:78px;
    height:78px;

    border-radius:24px;

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

    background:
        rgba(57,255,20,0.06);

    border:
        1px solid rgba(57,255,20,0.08);

    margin-bottom:28px;

    font-size:2rem;

    color:var(--neon-green);

    box-shadow:
        inset 0 0 20px rgba(57,255,20,0.03);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.choice-card h3{

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

    color:var(--neon-green);

    font-size:1.05rem;

    line-height:1.5;

    letter-spacing:2px;

    margin-bottom:18px;

    text-transform:uppercase;
}

.choice-card p{

    color:#9d9d9d;

    font-size:.98rem;

    line-height:1.8;

    max-width:240px;
}

.choice-card span{

    margin-top:26px;

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

    padding:12px 18px;

    border-radius:12px;

    background:
        rgba(57,255,20,0.05);

    border:
        1px solid rgba(57,255,20,0.15);

    color:var(--neon-green);

    font-size:.72rem;

    letter-spacing:3px;

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

    text-transform:uppercase;
}

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

.mvp-info{

    margin-top:70px;

    max-width:980px;

    padding:40px;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.01)
        );

    border:
        1px solid rgba(57,255,20,0.08);

    backdrop-filter:blur(12px);

    text-align:left;
}

.mvp-info h2{

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

    color:var(--neon-green);

    margin-bottom:20px;

    letter-spacing:2px;
}

.mvp-info p{

    color:#a0a0a0;

    line-height:2;

    font-size:1rem;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pulse{

    0%,100%{

        transform:scale(1);

        filter:
            drop-shadow(0 0 15px rgba(57,255,20,0.25))
            drop-shadow(0 0 35px rgba(57,255,20,0.1));
    }

    50%{

        transform:scale(1.04);

        filter:
            drop-shadow(0 0 25px rgba(57,255,20,0.45))
            drop-shadow(0 0 50px rgba(57,255,20,0.18));
    }
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes textBlink{

    0%,100%{
        opacity:.5;
    }

    50%{
        opacity:1;
    }
}

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

@media(max-width:900px){

    #select-screen{
        padding:60px 20px;
    }

    .protocol-description{
        font-size:.95rem;
    }

    .choice-container{
        flex-direction:column;
        align-items:center;
    }

    .choice-card{
        width:100%;
        max-width:360px;
    }

    .mvp-info{
        padding:30px 24px;
    }
}

@media(max-width:600px){

    .logo-frame{
        width:92vw;
        padding:24px;
    }

    .logo-loading{
        width:210px;
    }

    .seedling{
        font-size:1.6rem;
    }

    .load-text{
        font-size:.65rem;
        letter-spacing:2px;
        padding:0 20px;
    }

    .hud-title{
        font-size:1rem;
    }

    .protocol-description{
        font-size:.9rem;
        line-height:1.7;
    }

    .choice-card{
        min-height:auto;
        padding:30px 24px;
    }

    .card-icon{
        width:68px;
        height:68px;
        font-size:1.6rem;
    }

    .choice-card h3{
        font-size:.95rem;
    }

    .choice-card p{
        font-size:.9rem;
    }

    .mvp-info{
        margin-top:50px;
        border-radius:24px;
    }

    .mvp-info p{
        font-size:.92rem;
    }
}

/* =========================================================
   FOOTER
========================================================= */

.footer-replant{

    width:100%;

    margin-top:80px;

    padding:30px 20px 40px;

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

    position:relative;

    z-index:2;
}

.footer-line{

    width:180px;
    height:1px;

    margin-bottom:20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,255,20,0.5),
            transparent
        );
}

.footer-replant p{

    color:#6e6e6e;

    font-size:0.9rem;

    letter-spacing:1px;

    text-align:center;
}

.footer-replant span{

    color:var(--neon-green);

    text-shadow:
        0 0 10px rgba(57,255,20,0.15);
}

/* =========================================================
   RESPONSIVO FOOTER
========================================================= */

@media(max-width:600px){

    .footer-replant{

        margin-top:60px;

        padding:25px 15px 35px;
    }

    .footer-replant p{

        font-size:0.78rem;

        line-height:1.7;
    }
}

/* ESTILO DO BOTÃO CYBER-GREEN RE-PLANT */
.btn-cyber-register {
  /* Layout e Tipografia */
  padding: 3px 3px;
  background-color: #000000; /* Fundo preto absoluto */
  color: #00ff41; /* Verde neon puro */
  font-family: 'Space Grotesk', sans-serif; /* Ou sua fonte tech */
  font-size: 1.1rem;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 2px solid #00ff41; /* Contorno verde neon */
  border-radius: 4px; /* Cantos levemente retos, estilo chip */
  
  /* Efeito de Brilho (Neon Glow) */
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.5), /* Brilho suave externo */
              0 0 20px rgba(0, 255, 65, 0.3), /* Brilho médio externo */
              inset 0 0 5px rgba(0, 255, 65, 0.2); /* Brilho suave interno */
  
  /* Animação e Interação */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* EFEITO AO PASSAR O MOUSE (HOVER - Modelo 2 da imagem) */
.btn-cyber-register:hover {
  background-color: #00ff41; /* O botão "preenche" de verde */
  color: #000000; /* O texto fica preto */
  
  /* Brilho Intenso de Energia */
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.8), /* Brilho forte */
              0 0 45px rgba(0, 255, 65, 0.6); /* Brilho máximo */
}



.btn-cyber-login {
  /* Layout e Tipografia */
  padding: 3px 3px;
  background-color: #000000; /* Fundo preto absoluto */
  color: #00ff41; /* Verde neon puro */
  font-family: 'Space Grotesk', sans-serif; /* Ou sua fonte tech */
  font-size: 1.1rem;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 2px solid #00ff41; /* Contorno verde neon */
  border-radius: 4px; /* Cantos levemente retos, estilo chip */
  
  /* Efeito de Brilho (Neon Glow) */
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.5), /* Brilho suave externo */
              0 0 20px rgba(0, 255, 65, 0.3), /* Brilho médio externo */
              inset 0 0 5px rgba(0, 255, 65, 0.2); /* Brilho suave interno */
  
  /* Animação e Interação */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* EFEITO AO PASSAR O MOUSE (HOVER - Modelo 2 da imagem) */
.btn-cyber-login:hover {
  background-color: #00ff41; /* O botão "preenche" de verde */
  color: #000000; /* O texto fica preto */
  
  /* Brilho Intenso de Energia */
  box-shadow: 0 0 25px rgba(0, 255, 65, 0.8), /* Brilho forte */
              0 0 45px rgba(0, 255, 65, 0.6); /* Brilho máximo */
}

/* CONTAINER COMPORTA O BOTÃO NO TOPO DIREITO */
.top-nav-cyber {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Empurra o botão totalmente para a direita */
    padding: 20px 40px; /* Cria um espaçamento interno para ele não grudar nas bordas da tela */
    box-sizing: border-box;
}

/* CONTAINER DO TOPO - ADAPTADO PARA MOBILE E DESKTOP */
.top-nav-cyber {
    width: 100%;
    display: flex;
    justify-content: center; /* No celular ele fica centralizado por padrão para dar equilíbrio */
    padding: 20px 20px;
    box-sizing: border-box;
}

/* O BOTÃO AJUSTADO COM FONTE FLUIDA */
.btn-cyber-register {
    padding: 10px 20px;
    background-color: #000000;
    color: #00ff41;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem; /* Diminuímos um pouco para telas menores */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid #00ff41;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: auto; /* Garante que ele não estique no celular */
}

.btn-cyber-login {
    padding: 10px 20px;
    background-color: #000000;
    color: #00ff41;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem; /* Diminuímos um pouco para telas menores */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid #00ff41;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: auto; /* Garante que ele não estique no celular */
}


/* 📱 MEDIA QUERY: REGRAS EXCLUSIVAS PARA MONITORES / COMPUTADORES (Telas maiores que 768px) */
@media (min-width: 768px) {
    .top-nav-cyber {
        justify-content: flex-end; /* No computador, ele volta a ir para a extrema direita */
        padding: 25px 40px;
    }
    .btn-cyber-register {
        font-size: 0.95rem; /* No PC a letra pode ser um pouco maior */
        padding: 12px 26px;
    }
    .btn-cyber-login {
        font-size: 0.95rem; /* No PC a letra pode ser um pouco maior */
        padding: 12px 26px;
    }
}

/* FUNDO ESCURO QUE ATRAVESSA A TELA TODA */
.modal-cyber-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

/* CAIXA CENTRAL DO MODAL */
.modal-cyber-content {
    background: #020617; /* Dark escuro igual ao ecossistema */
    border: 2px solid #00ff41;
    padding: 30px 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 950px;
    max-height: 90vh;
    overflow-y: auto; /* Se o celular for muito pequeno, cria rolagem interna para não travar a tela */
    position: relative;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
}

.modal-title {
    font-family: 'Orbitron', sans-serif;
    color: #00ff41;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.modal-subtitle {
    font-family: 'Rajdhani', sans-serif;
    color: #888;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

/* CARDS DE SELEÇÃO - SE ADAPTAM DE UMA COLUNA (CELULAR) PARA TRÊS (PC) */
.triagem-cards {
    display: grid;
    grid-template-columns: 1fr; /* Padrão Mobile: um embaixo do outro */
    gap: 20px;
}

.card-opcao {
    background: #0b1329;
    border: 1px solid #1e293b;
    padding: 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: left;
}

.card-opcao:hover {
    border-color: #00ff41;
    background: #011c06;
    transform: translateY(-2px);
}

.card-icon { font-size: 2rem; margin-bottom: 10px; }
.card-opcao h3 { font-family: 'Orbitron', sans-serif; color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.card-opcao p { color: #94a3b8; font-size: 0.9rem; line-height: 1.4; margin-bottom: 15px; }
.card-link { font-family: 'Rajdhani', sans-serif; color: #00ff41; font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; }

.btn-close-modal {
    position: absolute; top: 15px; right: 20px;
    background: none; border: none;
    color: #00ff41; font-size: 1.8rem; cursor: pointer;
}

/* 📱 RESPONSIVIDADE PARA TELAS MAIORES (COMPUTADOR) */
@media (min-width: 768px) {
    .modal-cyber-content { padding: 40px; }
    .modal-title { font-size: 2rem; }
    .triagem-cards {
        grid-template-columns: repeat(3, 1fr); /* No PC fica lado a lado em 3 colunas */
    }
}


/* CONFIGURAÇÃO FORÇADA DO GRID B2B */
.corp-solutions-grid {
    display: flex;
    flex-direction: column; /* Padrão para celular (um embaixo do outro) */
    gap: 25px;
    margin: 40px 0;
    width: 100%;
}

/* ESTILO DOS CARDS QUE ESTAVAM QUEBRADOS */
.corp-card {
    background-color: #050b14 !important; /* Força o fundo escuro dentro do card */
    padding: 25px;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left;
}

/* BORDAS EM NEON EXTENSION */
.border-green { 
    border: 1px solid #00ff41 !important; 
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.15); 
}
.border-blue { 
    border: 1px solid #00d2ff !important; 
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.15); 
}

/* REGRAS INTERNAS DOS CARDS */
.corp-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.icon-hud {
    font-size: 1.4rem;
}
.corp-card-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: 1px;
}
.corp-card-desc {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.data-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.data-features li {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.border-green .check { color: #00ff41; font-weight: bold; }
.border-blue .check { color: #00d2ff; font-weight: bold; }

/* 🖥️ SE FOR EXIBIDO EM TELA GRANDE (PC), ADICIONA LADO A LADO */
@media (min-width: 768px) {
    .corp-solutions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Divide em duas colunas perfeitas */
        gap: 30px;
    }
}