:root {
    --bg: #0b0f12;
    /* Fundo base */
    --panel: #0f141a;
    /* Painéis/Cartões */
    --ink: #e8fff4;
    /* Texto principal */
    --muted: #a6c7b5;
    /* Texto secundário */
    --neon: #00ff85;
    /* Verde neon principal */
    --neon-soft: #24ffa0;
    /* Variação */
    --line: #1a2426;
    /* Linhas leves */
    --shadow: 0 10px 30px rgba(0, 255, 133, .15);
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 255, 133, .12), transparent 40%),
        radial-gradient(800px 400px at 10% 10%, rgba(0, 255, 133, .08), transparent 50%),
        var(--bg);
    letter-spacing: .1px;
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

/* Utilitários */
.container {
    width: min(1200px, 92%);
    margin-inline: auto;
    margin-top: 20px;
}

.grid {
    display: grid;
    gap: 24px
}

.btn {
    position: relative;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .25s ease;
    isolation: isolate
}

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

.linkedin a {
  display: inline-flex;       /* mantém ícone e texto lado a lado */
  align-items: center;        /* centraliza verticalmente */
  text-decoration: none;
  color: #0a66c2;
  font-weight: bold;
  font-size: 1rem;            /* tamanho ajustável */
}

.linkedin a:hover {
  text-decoration: underline;
}

.icon-linkedin {
  width: 70px;    /* tamanho fixo em desktop */
  height: 70px;
  margin-left: 140px;
  padding-left: -500px;
}

/* 🔹 Responsivo para telas menores */
@media (max-width: 480px) {
  .linkedin a {
    font-size: 0.9rem;  /* texto menor */
  }

  .icon-linkedin {
    width: 78px;  /* reduz o ícone */
    height: 78px;
    margin-left: -10px;
  }
}



.btn:after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: conic-gradient(from 0deg, rgb(4, 255, 0), rgba(0, 255, 133, .6), rgba(3, 241, 126, 0.756));
    filter: blur(12px);
    z-index: -1;
    opacity: .7
}

.btn--primary {
    background: linear-gradient(180deg, var(--neon-soft), var(--neon));
    color: #052d1b;
    box-shadow: var(--shadow)
}

.btn--ghost {
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(0, 255, 133, .35)
}

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background: rgba(11, 15, 18, .6);
    border-bottom: 1px solid rgba(0, 255, 133, .06);
    margin-top: -50px;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}



.nav-links {
    display: flex;
    gap: 18px;
    align-items: center
}

.nav-links a {
    opacity: .9
}

.nav-links a:hover {
    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 255, 133, .7)
}

/* ===== PATCH: header só com a logo (sem texto e sem bolinha) ===== */

/* some com qualquer estilo antigo de "bolinha" */
.logo {
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* garante alinhamento da marca */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* tamanho da imagem da logo */
.logo-img {
  height: 36px !important; /* ajuste aqui */
  width: auto !important;
  display: block !important;
}

/* remove o texto */
.brand-name {
  display: none !important;
}

@media (max-width: 980px) {
  .logo-img {
    height: 30px;    /* menor no mobile */
  }
}


/* Foto com brilho neon pulsando */
.foto-sistema {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* brilha ao redor do recorte da PNG */
  filter:
    drop-shadow(0 0 4px  rgba(0,255,133,.60))
    drop-shadow(0 0 10px rgba(0,255,133,.45));
  animation: glow-pulse 2.2s ease-in-out infinite alternate;
  will-change: filter, transform;
}

/* animação do glow */
@keyframes glow-pulse {
  from {
    filter:
      drop-shadow(0 0 6px  rgba(0,255,133,.60))
      drop-shadow(0 0 10px rgba(0,255,133,.45));
    transform: translateZ(0);
  }
  to {
    filter:
      drop-shadow(0 0 10px rgba(0,255,133,.95))
      drop-shadow(0 0 20px rgba(0,255,133,.75));
  }
}

/* efeito extra no hover (desktop) */
@media (hover:hover) {
  .foto-sistema:hover {
    transform: translateY(-2px) scale(1.4);
  }
}


/* Hero */


/* ==========================
   NAV TOGGLE (HAMBÚRGUER)
========================== */
.nav-toggle {
    display: none; /* aparece no mobile */
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 255, 133, .35);
    border-radius: 12px;
    background: rgba(0, 0, 0, .4);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .25s ease;
}

.nav-toggle:hover {
    transform: translateY(-1px);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: var(--neon);
    border-radius: 2px;
    transition: .3s ease;
    box-shadow: 0 0 8px rgba(0,255,133,.6);
}

.nav-toggle__bar {
    position: relative;
}

.nav-toggle__bar::before {
    position: absolute;
    top: -6px;
}

.nav-toggle__bar::after {
    position: absolute;
    top: 6px;
}

/* Estado ABERTO (aplicado via JS com .is-open no botão) */
.nav-toggle.is-open .nav-toggle__bar {
    background: transparent;
    box-shadow: none;
}
.nav-toggle.is-open .nav-toggle__bar::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar::after {
    top: 0;
    transform: rotate(-45deg);
}
/* menu hamburguer*/



@media (max-width: 980px){
    .hero { padding: 64px 0 40px; }
    .hero-wrap { grid-template-columns: 1fr; gap: 18px; }

    /* Mostra o botão e transforma o menu em “gaveta” */
    .nav-toggle { display: inline-flex; }

    .nav-links {
        position: fixed;
        top: 70px;           /* abaixo do header */
        right: 18px;
        left: 18px;
        display: none;       /* escondido por padrão */
        flex-direction: column;
        gap: 14px;
        background: var(--panel);
        border: 1px solid rgba(0,255,133,.18);
        border-radius: 16px;
        padding: 16px;
        box-shadow: var(--shadow);
        z-index: 60;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .25s ease, transform .25s ease;
    }

    /* Quando o menu estiver aberto (classe .open aplicada via JS) */
    .nav-links.open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* Links ocupam largura total e ficam “clicáveis” */
    .nav-links a {
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(0,0,0,.25);
        border: 1px solid rgba(0,255,133,.12);
    }

    /* Esconde a versão desktop */
    /* (no seu CSS original já escondia .nav-links; agora controlamos com a classe .open) */
}


.hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(0, 255, 133, .10), rgba(0, 255, 133, 0) 30%);
    pointer-events: none
}

.hero-wrap {
    display: grid;
    gap: 28px;
    grid-template-columns: 1.1fr .9fr;
    align-items: center
}

.kicker {
    color: var(--neon);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px
}

.title {
    font-family: Orbitron, Inter, sans-serif;
    font-size: clamp(32px, 4.2vw, 64px);
    line-height: 1.05;
    margin: 10px 0
}

.neon-span {
    text-shadow: 0 0 18px rgba(0, 255, 133, .8)
}

.subtitle {
    color: var(--muted);
    font-size: clamp(15px, 1.5vw, 18px)
}

.cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

.screen {
    position: relative;
    overflow: hidden
}

.scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0, 255, 133, .05) 0 2px, transparent 2px 4px);
    animation: scan 6s linear infinite
}

@keyframes scan {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(100%)
    }
}

.glow-ring {
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    border: 1px solid rgba(0, 255, 133, .35);
    box-shadow: 0 0 30px rgba(0, 255, 133, .25), inset 0 0 20px rgba(0, 255, 133, .15)
}

.code {
    position: absolute;
    inset: 0;
    padding: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: #9fffd3;
    opacity: .85;
    white-space: pre;
    overflow: auto
}

/* Seções genéricas */
section {
    padding: 70px 0;
    position: relative
}

.section-title {
    font-family: Orbitron, Inter, sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 34px);
    margin: 0 0 8px
}

.section-sub {
    color: var(--muted);
    margin: 0 0 26px
}

/* Serviços */
.service {
    background: linear-gradient(180deg, rgba(0, 255, 133, .04), rgba(0, 255, 133, .01));
    border: 1px solid rgba(0, 255, 133, .18);
    border-radius: 18px;
    padding: 22px;
    position: relative;
    overflow: hidden
}

.service:before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -40px;
    top: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 133, .18), transparent 60%)
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 133, .25);
    background: rgba(0, 255, 133, .07)
}

/* Portfólio */
.folio {
    border-radius: 18px;
    background: linear-gradient(180deg, #0c1310, #0a100e);
    border: 1px solid rgba(0, 255, 133, .18);
    overflow: hidden
}

.folio .thumb{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1310;
}

/* Imagem de fundo via CSS var */
.folio .thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--thumb); /* ex.: url('img/site1.jpg') */
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* Overlay/efeito neon suave */
.folio .thumb::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,255,133,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.25));
  pointer-events:none;
}

/* Hover */
.folio:hover .thumb::before{ transform: scale(1.06); }
.folio .meta {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.folio .meta h4 {
    margin: 0;
    font-size: 16px
}

.folio .meta a {
    font-size: 13px;
    opacity: .9;
    border-bottom: 1px dashed rgba(0, 255, 133, .4)
}

/* Depoimentos */
.quote {
    border-left: 3px solid var(--neon);
    padding-left: 14px;
    color: var(--muted)
    marg
}

/* FAQ */
.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    cursor: pointer
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease
}


/* Contato */


.service {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-photo {
  width: 260px;      /* <<< CONTROLE AQUI */
  max-width: 100%;
  height: auto;
  margin-bottom: 24px;
}



form {
    display: grid;
    gap: 14px
}

input,
textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: #0f1512;
    border: 1px solid rgba(0, 255, 133, .18);
    color: var(--ink)
}

input::placeholder,
textarea::placeholder {
    color: #83b89e
}

/* Rodapé */
footer {
    border-top: 1px solid rgba(0, 255, 133, .08);
    padding: 28px 0;
    color: var(--muted)
}

.footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}


/* Grids específicas */
.grid-cols-services {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.grid-cols-portfolio {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.grid-cols-testis {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.grid-cols-contact {
    grid-template-columns: 1.1fr .9fr
}

/* Botão flutuante WhatsApp */
.zap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--neon-soft), var(--neon));
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 255, 133, .5)
}

/* Responsivo */
@media (max-width: 980px) {
    .hero {
        padding: 64px 0 40px
    }

    .hero-wrap {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .nav-links {
        display: none
    }

    .grid-cols-contact {
        grid-template-columns: 1fr
    }
}

/* --- MOBILE: foto acima dos textos no HERO --- */
@media (max-width: 980px) {
  .hero-wrap {
    display: flex !important;        /* sobrescreve o grid */
    flex-direction: column-reverse;  /* inverte: imagem primeiro, texto depois */
    gap: 18px;
  }

  /* bloco da imagem (segundo filho no desktop) */
  .hero-wrap > :last-child {
    order: 1;
    text-align: center;
  }

  /* garante a responsividade da imagem dentro da .screen */
  .screen img,
  .hero-image img,
  .foto-sistema {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
    
  }
}
@media (max-width: 980px) {
  .hero-wrap { display: flex !important; flex-direction: column-reverse; gap: 18px; }
  .hero-image { text-align: center; }
  .hero-image img { max-width: 90%; height: auto; margin: 0 auto; }
}


/* ===== MARQUEE / FAIXA ANIMADA ===== */
.marquee {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid #e6e6e6;
}

.marquee__inner {
  display: flex;
  width: max-content;
  animation: marquee-scroll 12s linear infinite;
}

.marquee span {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000;
  padding: 10px 24px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animação contínua */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Mobile */
@media (max-width: 980px) {
  .marquee span {
    font-size: 12px;
    padding: 8px 16px;
  }
}