/* =====================================================
   KNOW SERVICES
   COMPONENTS
===================================================== */


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

.header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:var(--header-height, 80px);

    display:flex;
    align-items:center;

    z-index:1000;

    background:rgba(7,16,24,.75);
    border-bottom:1px solid rgba(255,255,255,.05);

    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition);
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

/* Compatibilidade com as duas possíveis classes do JavaScript */
.header.scrolled,
.header.header-scrolled{
    background:rgba(7,16,24,.92);
    border-bottom-color:rgba(255,255,255,.08);

    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);

    box-shadow:0 10px 30px rgba(0,0,0,.25);
}


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

.logo{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.logo:hover{
    transform:translateY(-2px);
    opacity:.92;
}

.logo img{
    display:block;
    width:auto;
    height:42px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.navigation{
    display:flex;
    align-items:center;
    gap:36px;
}

.navigation a{
    position:relative;
    z-index:2;

    color:var(--text);

    font-size:.95rem;
    font-weight:500;
    line-height:1;

    text-decoration:none;

    transition:color var(--transition-fast);
}

.navigation a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:100%;
    height:2px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);
    transform-origin:center;

    transition:transform var(--transition-fast);
}

.navigation a:hover,
.navigation a.active{
    color:var(--primary);
}

.navigation a:hover::after,
.navigation a.active::after{
    transform:scaleX(1);
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle{
    display:none;

    width:46px;
    height:46px;

    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    flex-shrink:0;

    color:var(--text);
    background:rgba(255,255,255,.04);

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

    cursor:pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.menu-toggle:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(87,196,106,.35);
}

.menu-toggle span{
    display:block;

    width:21px;
    height:2px;

    border-radius:999px;

    background:currentColor;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


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

.btn{
    position:relative;
    z-index:2;

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

    min-height:50px;
    padding:14px 26px;

    overflow:hidden;

    border:1px solid transparent;
    border-radius:12px;

    font-weight:600;
    line-height:1;
    text-align:center;
    text-decoration:none;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

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

.btn:hover{
    transform:translateY(-3px);
}

.btn-primary{
    color:#071018;

    background:var(--primary);
    border-color:var(--primary);

    box-shadow:var(--shadow-primary);
}

.btn-primary:hover{
    color:#071018;

    background:var(--primary-hover);
    border-color:var(--primary-hover);

    box-shadow:
        0 0 18px rgba(87,196,106,.35),
        0 12px 28px rgba(0,0,0,.25);
}

/* Reflexo luminoso */
.btn-primary::before{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:70%;
    height:100%;

    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:skewX(-20deg);

    transition:left .65s ease;
}

.btn-primary:hover::before{
    left:140%;
}

.btn-secondary{
    color:var(--text);

    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.13);
}

.btn-secondary:hover{
    color:var(--text);

    background:rgba(255,255,255,.07);
    border-color:rgba(53,167,255,.45);

    box-shadow:
        0 0 18px rgba(53,167,255,.20),
        0 12px 28px rgba(0,0,0,.20);
}


/* =====================================================
   BADGES
===================================================== */

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

    width:fit-content;

    padding:9px 14px;

    color:var(--primary);
    background:rgba(87,196,106,.08);

    border:1px solid rgba(87,196,106,.18);
    border-radius:999px;

    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.07em;
    text-transform:uppercase;
}


/* =====================================================
   TAGS
===================================================== */

.tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 13px;

    color:var(--text-muted);
    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;

    font-size:.82rem;
    font-weight:600;
    line-height:1;

    -webkit-tap-highlight-color:transparent;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.tag:hover{
    color:var(--primary);

    background:rgba(87,196,106,.10);
    border-color:rgba(87,196,106,.45);

    transform:translateY(-3px);
}


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

.card{
    position:relative;

    padding:32px;

    overflow:hidden;

    background:rgba(21,28,38,.78);

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

    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.card:hover{
    transform:translateY(-6px);

    border-color:rgba(87,196,106,.30);

    box-shadow:var(--shadow-primary);
}


/* =====================================================
   PROJECT CARDS POLISH
===================================================== */

.solution-card,
.about-card,
.advantage-card,
.flow-item,
.stat-card{
    position:relative;

    overflow:hidden;

    -webkit-tap-highlight-color:transparent;

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

/* Reflexo interno */
.solution-card::before,
.about-card::before,
.advantage-card::before,
.flow-item::before,
.stat-card::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.05),
        transparent 42%
    );

    opacity:0;

    transition:opacity .35s ease;
}

.solution-card:hover::before,
.about-card:hover::before,
.advantage-card:hover::before,
.flow-item:hover::before,
.stat-card:hover::before{
    opacity:1;
}

/* Linha decorativa superior */
.solution-card::after,
.advantage-card::after,
.stat-card::after{
    content:"";

    position:absolute;
    top:0;
    left:12%;

    width:76%;
    height:1px;

    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(87,196,106,.65),
        transparent
    );

    opacity:0;

    transition:opacity .35s ease;
}

.solution-card:hover::after,
.advantage-card:hover::after,
.stat-card:hover::after{
    opacity:1;
}


/* =====================================================
   CARD TITLES AND TEXT
===================================================== */

.solution-card h3,
.about-card h3,
.advantage-card h3,
.flow-item h3{
    transition:color .3s ease;
}

.solution-card:hover h3,
.about-card:hover h3,
.advantage-card:hover h3,
.flow-item:hover h3{
    color:var(--primary);
}

.solution-card p,
.about-card p,
.advantage-card p,
.flow-item p,
.stat-card p{
    line-height:1.7;
}


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

.solution-icon,
.advantage-icon,
.flow-icon{
    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.solution-card:hover .solution-icon,
.advantage-card:hover .advantage-icon,
.flow-item:hover .flow-icon{
    transform:scale(1.08) rotate(3deg);

    background:rgba(87,196,106,.16);

    box-shadow:0 0 22px rgba(87,196,106,.18);
}


/* =====================================================
   FEATURE CHECK
===================================================== */

.feature-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    width:24px;
    height:24px;

    color:#071018;
    background:var(--primary);

    border-radius:50%;

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


/* =====================================================
   SECTION HEADER DECORATION
===================================================== */

.section-header{
    position:relative;
}

.section-header::after{
    content:"";

    display:block;

    width:64px;
    height:3px;

    margin:20px auto 0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}


/* =====================================================
   TYPOGRAPHY HELPERS
===================================================== */

.hero-title,
.section-title{
    text-wrap:balance;
}

.hero-description,
.section-description,
.section-text{
    text-wrap:pretty;
}


/* =====================================================
   COMPATIBILITY
===================================================== */

/* Impede que o header cubra o início das seções */
section[id]{
    scroll-margin-top:110px;
}

/* Mantém links acima dos efeitos decorativos */
.footer a{
    position:relative;
    z-index:2;

    text-decoration:none;
}

/* O desenho não deve bloquear mouse ou seleção */
.hero-network,
.network-svg{
    pointer-events:none;
    user-select:none;
}


/* =====================================================
   TEXT SELECTION
===================================================== */

::selection{
    color:#071018;
    background:var(--primary);
}


/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080d13;
}

::-webkit-scrollbar-thumb{
    background:rgba(87,196,106,.45);

    border:2px solid #080d13;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(87,196,106,.70);
}

html{
    scrollbar-width:thin;
    scrollbar-color:rgba(87,196,106,.55) #080d13;
}