:root{
    --bg:#f7f9fc;
    --surface:#ffffff;
    --surface-soft:#fbfcff;

    --text:#0c1323;
    --muted:#6e7b90;

    --line:#e0e6ef;
    --line-strong:#d2dcea;

    --blue:#1764ff;
    --blue-soft:#eef4ff;
    --violet:#655cff;

    --dark:#0c1423;

    --shadow:
        0 18px 50px rgba(31,55,102,.07);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--text);

    background:
        radial-gradient(
            circle at 76% 0%,
            rgba(55,91,255,.065),
            transparent 24%
        ),
        var(--bg);
}

a{
    color:inherit;
}


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

.eco-header{
    position:sticky;
    top:0;
    z-index:1000;

    height:74px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:0 5.5%;

    border-bottom:1px solid rgba(221,227,237,.9);

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

    backdrop-filter:blur(18px);
}

.eco-nav-left,
.eco-nav-right{
    display:flex;
    align-items:center;
    gap:25px;
}

.eco-nav-right{
    justify-content:flex-end;
}

.eco-header a{
    text-decoration:none;
}

.eco-nav-link{
    color:#101827;

    font-size:.67rem;
    font-weight:850;

    white-space:nowrap;
}

.eco-nav-link:hover,
.eco-nav-link.active{
    color:var(--blue);
}

.eco-brand{
    display:flex;
    align-items:center;
    width:220px;
    height:70px;
    background:url('../images/labio-network-logo.png') center/220px auto no-repeat;
}

.eco-brand>span{display:none}

.eco-brand-mark{
    position:relative;

    width:25px;
    height:25px;

    transform:rotate(45deg);

    border:3px solid var(--blue);
    border-radius:3px;
}

.eco-brand-mark::after{
    content:"";

    position:absolute;
    inset:4px;

    border:2px solid var(--violet);
}

.eco-login,
.eco-signup{
    min-height:39px;

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

    padding:0 15px;

    border-radius:10px;

    font-size:.69rem;
    font-weight:850;
}

.eco-login{
    border:1px solid #d8e0eb;
    background:#fff;
}

.eco-signup{
    color:#fff;

    background:var(--blue);

    box-shadow:
        0 8px 20px rgba(23,100,255,.18);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.eco-container{
    width:min(1280px,calc(100% - 60px));
    margin:auto;
}

.eco-breadcrumb{
    padding-top:35px;

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

    color:#8390a2;

    font-size:.61rem;
    font-weight:750;
}

.eco-breadcrumb a{
    text-decoration:none;
}

.eco-breadcrumb a:hover{
    color:var(--blue);
}

.eco-hero{
    padding:75px 0 75px;

    text-align:center;
}

.eco-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 11px;

    border:1px solid #d5e1f6;
    border-radius:999px;

    background:#f3f7ff;

    color:#365fae;

    font-size:.61rem;
    font-weight:950;

    letter-spacing:.1em;
    text-transform:uppercase;
}

.eco-kicker::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--blue);
}

.eco-hero h1{
    max-width:1050px;

    margin:21px auto 20px;

    font-size:clamp(3.2rem,6.2vw,6.6rem);
    line-height:.89;

    letter-spacing:-.073em;

    font-weight:950;
}

.eco-hero p{
    max-width:700px;

    margin:0 auto;

    color:var(--muted);

    font-size:.88rem;
    line-height:1.75;
}

.eco-hero-actions{
    margin-top:28px;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;
}


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

.eco-btn{
    min-height:43px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:0 16px;

    border:1px solid #d8e0eb;
    border-radius:10px;

    background:#fff;

    color:#28354a;

    text-decoration:none;

    font-size:.68rem;
    font-weight:850;

    cursor:pointer;
}

.eco-btn:hover{
    border-color:#becce2;
}

.eco-btn.primary{
    border-color:var(--blue);

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--violet)
        );

    box-shadow:
        0 11px 24px rgba(42,88,255,.19);
}

.eco-btn.soft{
    border-color:#d7e2fa;

    color:var(--blue);

    background:#f3f7ff;
}


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

.eco-section{
    padding:70px 0;
}

.eco-section + .eco-section{
    border-top:1px solid #e5eaf1;
}

.eco-section-heading{
    display:grid;
    grid-template-columns:1fr .65fr;
    gap:55px;

    align-items:end;

    margin-bottom:34px;
}

.eco-section-heading small{
    display:block;

    margin-bottom:10px;

    color:var(--blue);

    font-size:.6rem;
    font-weight:950;

    letter-spacing:.14em;
}

.eco-section-heading h2{
    margin:0;

    font-size:clamp(2.25rem,4vw,4.3rem);
    line-height:.96;

    letter-spacing:-.06em;
}

.eco-section-heading p{
    margin:0;

    color:var(--muted);

    font-size:.76rem;
    line-height:1.68;
}


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

.eco-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    margin-bottom:45px;

    border:1px solid var(--line);
    border-radius:18px;

    background:#fff;
}

.eco-stat{
    padding:21px 23px;

    border-right:1px solid var(--line);
}

.eco-stat:last-child{
    border-right:0;
}

.eco-stat strong{
    display:block;

    font-size:1.35rem;

    letter-spacing:-.04em;
}

.eco-stat span{
    display:block;

    margin-top:4px;

    color:#7e899b;

    font-size:.61rem;
}


/* ============================================================
   ECOSYSTEM LANDING
   ============================================================ */

.eco-pillar-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:15px;
}

.eco-pillar{
    min-height:370px;

    display:flex;
    flex-direction:column;

    padding:29px;

    border:1px solid var(--line);
    border-radius:23px;

    background:
        radial-gradient(
            circle at 90% 7%,
            rgba(48,90,255,.055),
            transparent 29%
        ),
        #fff;

    text-decoration:none;

    box-shadow:
        0 10px 34px rgba(31,55,99,.035);

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

.eco-pillar:hover{
    transform:translateY(-5px);

    border-color:#c6d5eb;

    box-shadow:
        0 20px 48px rgba(31,59,112,.08);
}

.eco-pillar-icon{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:var(--blue-soft);

    color:var(--blue);

    font-size:.61rem;
    font-weight:950;
}

.eco-pillar h2{
    margin:39px 0 10px;

    font-size:1.75rem;

    letter-spacing:-.045em;
}

.eco-pillar p{
    margin:0;

    color:#788497;

    font-size:.73rem;
    line-height:1.62;
}

.eco-tags{
    margin-top:24px;

    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.eco-tag{
    padding:6px 8px;

    border:1px solid #e0e6ef;
    border-radius:7px;

    background:#fafbfe;

    color:#69778d;

    font-size:.54rem;
    font-weight:800;
}

.eco-pillar-footer{
    margin-top:auto;

    padding-top:30px;

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

    color:var(--blue);

    font-size:.64rem;
    font-weight:900;
}


/* ============================================================
   ECOSYSTEM FLOW
   ============================================================ */

.eco-flow{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:21px;

    background:#fff;
}

.eco-flow-step{
    position:relative;

    min-height:205px;

    padding:25px;

    border-right:1px solid var(--line);
}

.eco-flow-step:last-child{
    border-right:0;
}

.eco-flow-step small{
    color:var(--blue);

    font-size:.57rem;
    font-weight:950;

    letter-spacing:.1em;
}

.eco-flow-step h3{
    margin:48px 0 8px;

    font-size:1.08rem;

    letter-spacing:-.03em;
}

.eco-flow-step p{
    margin:0;

    color:#788497;

    font-size:.66rem;
    line-height:1.57;
}


/* ============================================================
   PUBLIC / WORKSPACE
   ============================================================ */

.eco-access-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:15px;
}

.eco-access-card{
    min-height:250px;

    padding:29px;

    border:1px solid var(--line);
    border-radius:20px;

    background:#fff;
}

.eco-access-card.workspace{
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(43,89,255,.08),
            transparent 32%
        ),
        #fff;
}

.eco-access-card small{
    color:var(--blue);

    font-size:.57rem;
    font-weight:950;

    letter-spacing:.12em;
}

.eco-access-card h3{
    margin:25px 0 9px;

    font-size:1.4rem;

    letter-spacing:-.04em;
}

.eco-access-card p{
    max-width:520px;

    margin:0;

    color:#778397;

    font-size:.69rem;
    line-height:1.65;
}


/* ============================================================
   FILTER BAR
   ============================================================ */

.eco-filter-bar{
    position:sticky;
    top:74px;
    z-index:50;

    margin-bottom:25px;

    display:flex;
    gap:10px;

    padding:12px;

    border:1px solid var(--line);
    border-radius:16px;

    background:rgba(247,249,252,.92);

    backdrop-filter:blur(14px);
}

.eco-search{
    flex:1;

    min-width:0;
    height:46px;

    padding:0 15px;

    border:1px solid #d8e1ec;
    border-radius:11px;

    outline:none;

    background:#fff;

    color:#243149;

    font:inherit;
    font-size:.72rem;
}

.eco-search:focus{
    border-color:#9eb8f1;

    box-shadow:
        0 0 0 3px rgba(23,100,255,.07);
}

.eco-select{
    min-width:200px;

    height:46px;

    padding:0 13px;

    border:1px solid #d8e1ec;
    border-radius:11px;

    background:#fff;

    color:#536177;

    font-size:.69rem;
}


/* ============================================================
   CATALOG CARDS
   ============================================================ */

.eco-catalog{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:13px;
}

.eco-catalog-card{
    min-height:285px;

    display:flex;
    flex-direction:column;

    padding:23px;

    border:1px solid var(--line);
    border-radius:18px;

    background:#fff;

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

.eco-catalog-card:hover{
    transform:translateY(-3px);

    border-color:#c7d5e9;

    box-shadow:
        0 15px 35px rgba(35,61,110,.065);
}

.eco-catalog-card.hidden{
    display:none;
}

.eco-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:12px;
}

.eco-category{
    width:max-content;

    padding:6px 9px;

    border-radius:999px;

    background:#f0f4fb;

    color:#607087;

    font-size:.53rem;
    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.eco-status{
    color:#8290a4;

    font-size:.54rem;
    font-weight:800;
}

.eco-catalog-card h3{
    margin:25px 0 8px;

    font-size:1.22rem;

    letter-spacing:-.035em;
}

.eco-catalog-card > p{
    margin:0;

    color:#798599;

    font-size:.68rem;
    line-height:1.58;
}

.eco-meta{
    margin-top:22px;

    display:grid;
    gap:7px;
}

.eco-meta-row{
    display:grid;
    grid-template-columns:72px 1fr;

    gap:8px;

    font-size:.59rem;
}

.eco-meta-row span:first-child{
    color:#98a2b1;
}

.eco-meta-row span:last-child{
    color:#58677d;
    font-weight:750;
}

.eco-card-actions{
    margin-top:auto;

    padding-top:23px;

    display:flex;
    flex-wrap:wrap;

    gap:7px;
}

.eco-card-link{
    min-height:34px;

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

    padding:0 10px;

    border:1px solid #dce4ee;
    border-radius:8px;

    background:#fff;

    color:#46556b;

    text-decoration:none;

    font-size:.59rem;
    font-weight:850;
}

.eco-card-link:hover{
    border-color:#bdcce2;
}

.eco-card-link.primary{
    border-color:#d5e1fb;

    color:var(--blue);

    background:#f3f7ff;
}


/* ============================================================
   WORKFLOWS
   ============================================================ */

.eco-workflow-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:14px;
}

.eco-workflow{
    min-height:340px;

    padding:25px;

    border:1px solid var(--line);
    border-radius:20px;

    background:#fff;
}

.eco-workflow-head{
    display:flex;
    justify-content:space-between;

    gap:15px;
}

.eco-workflow h3{
    margin:23px 0 8px;

    font-size:1.35rem;

    letter-spacing:-.04em;
}

.eco-workflow > p{
    max-width:580px;

    margin:0;

    color:#778397;

    font-size:.69rem;
    line-height:1.6;
}

.eco-workflow-path{
    margin-top:25px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:6px;
}

.eco-workflow-node{
    padding:7px 9px;

    border:1px solid #dfe6ef;
    border-radius:8px;

    background:#fafbfe;

    color:#647288;

    font-size:.56rem;
    font-weight:800;
}

.eco-workflow-arrow{
    color:#a0a9b7;

    font-size:.65rem;
}

.eco-workflow-tools{
    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #edf0f4;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;
}

.eco-workflow-tools strong{
    margin-right:5px;

    color:#8b96a7;

    font-size:.55rem;
}

.eco-tool{
    color:#52627a;

    font-size:.57rem;
    font-weight:800;
}


/* ============================================================
   INFORMATION PANEL
   ============================================================ */

.eco-info-panel{
    display:grid;
    grid-template-columns:.7fr 1.3fr;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:21px;

    background:#fff;
}

.eco-info-intro{
    padding:30px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(48,90,255,.08),
            transparent 33%
        ),
        #fbfcff;
}

.eco-info-intro small{
    color:var(--blue);

    font-size:.57rem;
    font-weight:950;

    letter-spacing:.12em;
}

.eco-info-intro h3{
    margin:23px 0 9px;

    font-size:1.55rem;

    letter-spacing:-.045em;
}

.eco-info-intro p{
    color:#758196;

    font-size:.69rem;
    line-height:1.65;
}

.eco-info-list{
    padding:12px 30px;
}

.eco-info-row{
    display:grid;
    grid-template-columns:175px 1fr;

    gap:20px;

    padding:19px 0;

    border-bottom:1px solid #edf0f4;
}

.eco-info-row:last-child{
    border-bottom:0;
}

.eco-info-row strong{
    font-size:.7rem;
}

.eco-info-row span{
    color:#778397;

    font-size:.67rem;
    line-height:1.55;
}


/* ============================================================
   DARK CTA
   ============================================================ */

.eco-dark{
    margin-top:70px;

    padding:65px;

    border-radius:26px;

    color:#fff;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(78,84,255,.25),
            transparent 27%
        ),
        var(--dark);
}

.eco-dark small{
    color:#8198ff;

    font-size:.58rem;
    font-weight:950;

    letter-spacing:.13em;
}

.eco-dark h2{
    max-width:800px;

    margin:15px 0;

    font-size:clamp(2.4rem,4.5vw,4.8rem);
    line-height:.94;

    letter-spacing:-.06em;
}

.eco-dark p{
    max-width:630px;

    color:#99a8bc;

    font-size:.72rem;
    line-height:1.67;
}


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

.eco-footer{
    margin-top:80px;

    display:flex;
    justify-content:space-between;

    padding:35px 0 45px;

    border-top:1px solid #e1e6ee;

    color:#818c9d;

    font-size:.61rem;
}


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

@media(max-width:1050px){

    .eco-pillar-grid,
    .eco-catalog{
        grid-template-columns:repeat(2,1fr);
    }

    .eco-flow{
        grid-template-columns:repeat(2,1fr);
    }

    .eco-flow-step{
        border-bottom:1px solid var(--line);
    }

}

@media(max-width:820px){

    .eco-section-heading,
    .eco-info-panel{
        grid-template-columns:1fr;
    }

    .eco-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .eco-workflow-grid{
        grid-template-columns:1fr;
    }

    .eco-access-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:680px){

    .eco-header{
        padding:0 16px;

        grid-template-columns:auto 1fr;
    }

    .eco-nav-left{
        display:none;
    }

    .eco-brand{
        justify-self:start;
        width:176px;
        height:62px;
        background-size:176px auto;
    }

    .eco-nav-right .eco-nav-link,
    .eco-login{
        display:none;
    }

    .eco-container{
        width:calc(100% - 26px);
    }

    .eco-pillar-grid,
    .eco-catalog,
    .eco-flow{
        grid-template-columns:1fr;
    }

    .eco-filter-bar{
        position:static;

        flex-direction:column;
    }

    .eco-select{
        width:100%;
    }

    .eco-stats{
        grid-template-columns:1fr 1fr;
    }

    .eco-dark{
        padding:34px 24px;
    }

    .eco-info-row{
        grid-template-columns:1fr;
        gap:7px;
    }

}


/* ==========================================================
   LABIO ECOSYSTEM — TYPOGRAPHY / VISUAL REFINEMENT
   ========================================================== */


/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

body{
    font-size:16px !important;
}


/* ----------------------------------------------------------
   CATÁLOGO — cards maiores e mais legíveis
   ---------------------------------------------------------- */

.eco-catalog{
    gap:16px !important;
}

.eco-catalog-card{
    min-height:310px !important;

    padding:27px !important;

    border-radius:20px !important;

    box-shadow:
        0 8px 28px rgba(34,58,103,.035) !important;
}

.eco-catalog-card:hover{
    transform:translateY(-4px) !important;

    box-shadow:
        0 18px 42px rgba(35,62,113,.085) !important;
}


/* categoria */

.eco-category{
    padding:7px 10px !important;

    font-size:.61rem !important;
    letter-spacing:.09em !important;
}


/* status */

.eco-status{
    font-size:.61rem !important;
}


/* nome do banco / aplicação */

.eco-catalog-card h3{
    margin:27px 0 11px !important;

    font-size:1.48rem !important;
    line-height:1.1 !important;

    letter-spacing:-.04em !important;
}


/* descrição */

.eco-catalog-card > p{
    font-size:.79rem !important;
    line-height:1.67 !important;

    color:#68768c !important;
}


/* ----------------------------------------------------------
   METADADOS
   ---------------------------------------------------------- */

.eco-meta{
    margin-top:25px !important;

    gap:10px !important;
}

.eco-meta-row{
    grid-template-columns:88px 1fr !important;

    gap:11px !important;

    font-size:.68rem !important;
}

.eco-meta-row span:first-child{
    color:#9aa6b8 !important;

    font-weight:600 !important;
}

.eco-meta-row span:last-child{
    color:#44546d !important;

    font-weight:800 !important;
}


/* ----------------------------------------------------------
   BOTÕES
   ---------------------------------------------------------- */

.eco-card-actions{
    padding-top:27px !important;

    gap:9px !important;
}

.eco-card-link{
    min-height:40px !important;

    padding:0 13px !important;

    border-radius:9px !important;

    font-size:.67rem !important;
}

.eco-card-link.primary{
    padding-left:15px !important;
    padding-right:15px !important;
}


/* ----------------------------------------------------------
   DATA HUB + WORKSPACE — painel inferior
   ---------------------------------------------------------- */

.eco-info-panel{
    min-height:310px !important;

    grid-template-columns:.72fr 1.28fr !important;

    border-radius:24px !important;

    border-color:#d7e0ee !important;

    box-shadow:
        0 14px 42px rgba(35,59,105,.055) !important;

    overflow:hidden !important;
}


/* lado esquerdo */

.eco-info-intro{
    padding:40px 38px !important;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(44,91,255,.11),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #f5f8ff,
            #fbfcff
        ) !important;
}

.eco-info-intro small{
    font-size:.65rem !important;

    letter-spacing:.14em !important;
}

.eco-info-intro h3{
    margin:25px 0 13px !important;

    font-size:1.8rem !important;
    line-height:1.08 !important;

    letter-spacing:-.05em !important;
}

.eco-info-intro p{
    max-width:410px !important;

    font-size:.79rem !important;
    line-height:1.72 !important;

    color:#68778e !important;
}


/* lado direito */

.eco-info-list{
    padding:15px 34px !important;

    background:#fff !important;
}

.eco-info-row{
    grid-template-columns:180px 1fr !important;

    gap:30px !important;

    padding:23px 0 !important;
}

.eco-info-row strong{
    font-size:.77rem !important;

    color:#111827 !important;

    letter-spacing:-.01em !important;
}

.eco-info-row span{
    font-size:.75rem !important;
    line-height:1.62 !important;

    color:#748197 !important;
}


/* número da etapa mais evidente */

.eco-info-row strong::first-letter{
    color:#1764ff;
}


/* ----------------------------------------------------------
   SECTION HEADINGS
   ---------------------------------------------------------- */

.eco-section-heading small{
    font-size:.66rem !important;
}

.eco-section-heading p{
    font-size:.82rem !important;
    line-height:1.72 !important;
}


/* ----------------------------------------------------------
   SEARCH / FILTER
   ---------------------------------------------------------- */

.eco-filter-bar{
    padding:14px !important;

    border-radius:18px !important;

    box-shadow:
        0 8px 25px rgba(31,55,100,.035) !important;
}

.eco-search,
.eco-select{
    height:50px !important;

    font-size:.76rem !important;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.eco-footer{
    padding-top:38px !important;
    padding-bottom:48px !important;

    font-size:.68rem !important;

    color:#78869a !important;
}


/* ----------------------------------------------------------
   MAIS ESPAÇO ENTRE BLOCOS
   ---------------------------------------------------------- */

.eco-section{
    padding-top:82px !important;
    padding-bottom:82px !important;
}


/* ----------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------- */

@media(max-width:820px){

    .eco-info-panel{
        grid-template-columns:1fr !important;
    }

    .eco-info-intro{
        padding:30px !important;
    }

    .eco-info-list{
        padding:10px 25px !important;
    }

}


@media(max-width:600px){

    .eco-catalog-card h3{
        font-size:1.32rem !important;
    }

    .eco-catalog-card > p{
        font-size:.76rem !important;
    }

    .eco-info-row{
        grid-template-columns:1fr !important;

        gap:8px !important;
    }

}