/* ===========================================================
   OSITronix
   style.css
   Version 3.0
   Autor  : Luís Veiga
   =========================================================== */

/* ===========================================================
   Variáveis
   =========================================================== */

:root{

    --bg:#050505;
    --bg-secondary:#101010;

    --panel:#171717;

    --text:#e7e7e7;

    --gold:#d6a320;
    --gold-hover:#f1c14a;

    --silver:#d6d6d6;

    --border:#2c2c2c;

}

:root[data-theme="light"]{

    --bg:#f7f7f7;
    --bg-secondary:#ffffff;

    --panel:#ffffff;

    --text:#202020;

    --gold:#b8860b;
    --gold-hover:#d5a021;

    --silver:#5f5f5f;

    --border:#d4d4d4;

}

/* ===========================================================
   Reset
   =========================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

    line-height:1.6;

}

/* ===========================================================
   Canvas
   =========================================================== */

#network-canvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:-1;

    pointer-events:none;

}

/* ===========================================================
   Navbar
   =========================================================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:72px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:0 6%;

    backdrop-filter:blur(12px);

    background:rgba(0,0,0,.35);

    border-bottom:1px solid rgba(255,255,255,.06);

    z-index:9999;

}

:root[data-theme="light"] .navbar{

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

}

/* ===========================================================
   Menu
   =========================================================== */

#menu{

    display:flex;

    gap:34px;

    list-style:none;

}

#menu li{

    list-style:none;

}

#menu a{

    color:var(--text);

    text-decoration:none;

    transition:.3s;

}

#menu a:hover{

    color:var(--gold);

}

#menu-toggle{

    display:none;

    cursor:pointer;

    border:none;

    background:none;

    color:var(--gold);

    font-size:2rem;

}

/* ===========================================================
   Hero
   =========================================================== */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 30px 40px;

}

.hero-logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:40px;

}

/* ===========================================================
   Logo
   =========================================================== */

.company-logo{

    width:min(90vw,520px);

    height:auto;

    display:block;

    transition:

        transform .4s,

        filter .4s;

    filter:

        drop-shadow(0 0 18px rgba(214,163,32,.18));

}

.company-logo:hover{

    transform:scale(1.02);

    filter:

        drop-shadow(0 0 25px rgba(214,163,32,.45));

}

/* ===========================================================
   Botão
   =========================================================== */

.button-primary{
    display:inline-block;
    padding:15px 34px;
    color:var(--gold);
    text-decoration:none;
    transition:.35s;

}

.button-primary:hover{
   /* background:var(--gold); */ 
    color:var(--bg);
}


#theme-toggle{
    background:var(--gold);
    outline: none;
    border: none;
}

#theme-toggle:focus,
#theme-toggle:focus-visible,
#theme-toggle:active{
    background:black;
    outline: none;
    box-shadow: none;
}

/* ===========================================================
   Sections
   =========================================================== */

section{

    width:min(1280px,92%);

    margin:auto;

    padding:90px 0;

}

section h2{
    font-family:"Orbitron",sans-serif;
    color:var(--gold);
    margin-bottom:10px;
}

section h4{
    font-family:"Orbitron",sans-serif;
    color:var(--gold);
    margin-bottom:20px;
}

section p{

    max-width:900px;

}

/* ===========================================================
   Cards
   =========================================================== */

.cards,

.tech-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.card,

.tech-grid div{

    background:var(--panel);

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

    border-radius:12px;

    padding:24px;

    transition:.35s;

}

.card:hover,

.tech-grid div:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

}

/* ===========================================================
   Footer
   =========================================================== */

footer{

    text-align:center;

    padding:40px;

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

}
/* ===========================================================
   SITE-EVIDÊNCIA — estilos de marketing (v3.1)
   Anexado: hero (2 camadas), eyebrow, cards com título, método,
   resultados, contato. Usa as variáveis de tema existentes.
   =========================================================== */

/* ---- Tese do hero ---- */

/* ---- Hero de duas camadas: headline de escopo + sub-linha ---- */

.hero-headline{

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

    font-weight:700;

    font-size:clamp(1.8rem,5vw,3.2rem);

    letter-spacing:.02em;

    color:var(--text);

    line-height:1.1;

}

.hero-scope{
font-size:1rem;
/* ---- color: #d6a320; ---- */
color: hsl(43, 74%, 48%);
}

/* ---- Lema do Método (tese epistemológica) ---- */

.method-motto{

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

    font-size:clamp(1.1rem,3vw,1.5rem);

    color:var(--gold);

    letter-spacing:.03em;

    margin-bottom:32px;

    /* deslocamento sutil para ler como assinatura da seção */
    opacity:.9;

}

/* ---- Eyebrow (rótulo acima de cada h2) ---- */

.eyebrow{

    display:block;

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

    font-size:.72rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--silver);

    margin-bottom:10px;

}

/* ---- Cards de competência: título + parágrafo ---- */

.card h3{

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

    font-size:1.05rem;

    color:var(--gold);

    margin-bottom:12px;

}

.card p{

    font-size:.95rem;

    color:var(--text);

    line-height:1.55;

}

/* ---- Método: 3 princípios numerados ---- */

.method-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}

.method-item{

    position:relative;

    padding:28px 24px;

    border-left:2px solid var(--gold);

    background:var(--panel);

    border-radius:0 12px 12px 0;

}

.method-index{

    display:block;

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

    font-size:1.6rem;

    font-weight:700;

    color:var(--gold);

    opacity:.55;

    margin-bottom:10px;

}

.method-item h3{

    font-size:1.05rem;

    color:var(--text);

    margin-bottom:10px;

}

.method-item p{

    font-size:.92rem;

    color:var(--silver);

    line-height:1.55;

}

/* ---- Resultados: métrica em destaque + prova ---- */

.proof-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

.proof-item{

    padding:30px 26px;

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

    border-radius:12px;

    background:var(--bg-secondary);

    transition:border-color .35s;

}

.proof-item:hover{

    border-color:var(--gold);

}

.proof-metric{

    display:block;

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

    font-size:2.4rem;

    font-weight:900;

    color:var(--gold);

    line-height:1;

    margin-bottom:16px;

}

.proof-item p{

    font-size:.92rem;

    color:var(--text);

    line-height:1.55;

}

/* ---- Contato ---- */

.contact-lead{

    max-width:620px;

    font-size:1.1rem;

    color:var(--text);

    margin-bottom:28px;

}

.contact-links{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.contact-links a{

    display:inline-block;

    padding:12px 24px;

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

    border-radius:8px;

    color:var(--gold);

    text-decoration:none;

    transition:

        background-color .3s,

        color .3s;

}

.contact-links a:hover{

    background:var(--gold);

    color:var(--bg);

}

.suporte-links{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.suporte-links a{

    display:inline-block;

    padding:12px 24px;

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

    border-radius:8px;

    color:var(--gold);

    text-decoration:none;

    transition:

        background-color .3s,

        color .3s;

}

.suporte-links a:hover{

    background:var(--gold);

    color:var(--bg);

}

/* ===========================================================
   TRAJETÓRIA — timeline de eras (v3.2)
   Linha vertical dourada com marcos. Sem detalhe técnico:
   o ano e a era; a longevidade é o argumento de venda.
   =========================================================== */

.journey-lead{

    max-width:640px;

    font-size:1.1rem;

    color:var(--text);

    margin-bottom:36px;

    line-height:1.55;

}

.timeline{

    list-style:none;

    position:relative;

    padding-left:34px;

    margin:0;

}

/* linha vertical contínua ligando os marcos */

.timeline::before{

    content:"";

    position:absolute;

    left:9px;

    top:6px;
    bottom:6px;

    width:2px;

    background:linear-gradient(

        var(--gold),

        rgba(214,163,32,.15)

    );

}

.tl-item{

    position:relative;

    padding:0 0 26px 0;

}

/* nó dourado sobre a linha */

.tl-item::before{

    content:"";

    position:absolute;

    left:-30px;

    top:4px;

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--bg);

    border:2px solid var(--gold);

}

/* marco "Hoje" preenchido, para ancorar o presente */

.tl-now::before{

    background:var(--gold);

}

.tl-year{

    display:inline-block;

    min-width:80px;

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

    font-weight:700;

    color:var(--gold);

    margin-right:14px;

}

.tl-label{

    color:var(--text);

    font-size:.98rem;

}
/* ===========================================================
   ADIÇÕES v3.3 — nota de parceria + coerência de Reversões
   =========================================================== */

/* nota factual de parceria (item 1), discreta sob o h2 */

.capabilities-note{

    max-width:720px;

    font-size:.95rem;

    color:var(--silver);

    margin-bottom:36px;

    line-height:1.55;

}

.container {
max-width: 500px;
width: 100%;
margin: 0 auto;
color:var(--gold);

input[type=text],
input[type=email],
textarea {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    border: 1px solid #ccc;
    color: black;
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    box-sizing: border-box;
    background-color: #fefefe;
}

input[type=submit] {
background-color:var(--gold);
color: black;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}