:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#8aa0b6;
  --text:#e7effa;
  --accent: #60a5fa;  /* azul */
  --accent2:#34d399; /* verde */
  --border:#223148;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text); background:var(--bg); overflow-x:hidden;
}

/* Canvas ocupa tudo */
#bg{
  position:fixed; inset:0; width:100%; height:100%; z-index:-2;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.10), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, rgba(94,234,212,.10), transparent 60%),
              var(--bg);
}

/* Glow suave no topo */
.top-glow{
  position:fixed; inset: -40px -40px auto -40px; height: 220px; z-index:-1;
  background: radial-gradient(60% 140% at 50% -20%, rgba(99,102,241,.18), transparent 55%);
  filter: blur(4px);
}

.container{ width:min(1100px, 92%); margin-inline:auto }

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}

.brand img.logo {
  height: 60px;          /* ajuste para o tamanho desejado */
  display: block;
  object-fit: contain;   /* garante que não distorça */
}

.brand .dot{
  inline-size:10px; block-size:10px; border-radius:50%;
  background:linear-gradient(180deg, #14b8a6, #38bdf8);
  box-shadow: 0 0 10px rgba(56,189,248,.35);
}

.nav a{ color:var(--text); text-decoration:none;  font-weight:600; }
.nav a:hover{ color:var(--accent); }

:root { --below-hero: 160px; } /* ajuste o valor que quiser */

.hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
  padding: 36px 0 12px;
  margin-bottom: var(--below-hero);
}

.hero__text h1{
  font-size: clamp(36px, 2vw, 58px);
  line-height:1.05; margin:0 0 10px;

  position: relative;
  /*left: 20px;   /* move para a direita */
  /*top: 20px;    /* move para baixo */
}

@media (min-width: 861px) {
  .hero__text {
    position: relative;
    top: 70px; /* aumenta ou diminui conforme precisar */
  }
}

.subtitle{ color:var(--muted); font-weight:600; margin:0 0 20px; }


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

.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text); padding:12px 16px; border-radius:12px; font-weight:700;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn.primary{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(94,234,212,.18));
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(56,189,248,.12);
  border-color:#2b3b52;
}
.btn.ghost{ background:transparent }

/* Foto */
.hero__photo{
  display:flex; justify-content:center; align-items:center;
  position: relative;
  /* offsets padrão */
  --dx: 0px;   /* esquerda(−) / direita(+) */
  --dy: 0px;   /* cima(−) / baixo(+) */
}

.hero__photo img {
  width: min(250px, 60%);
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  object-fit: cover;
  transform: translate(var(--dx), var(--dy));
  transition: transform .15s ease;
  border-color: #38bdf8;
  box-shadow: 0 0 25px rgba(56,189,248,.6);
  transform: translate(var(--dx), var(--dy));
}

/* SKILLS */
.card.skill{
  display: inline-flex;        /* vira um chip flexível */
  align-items: center;         /* alinha verticalmente */
  gap: 20px;                   /* <<< espaço entre ícone e texto */
  /* o resto do estilo do .card você já tem */
}

/* tamanho/ajuste de baseline dos ícones */
.card.skill i{
  font-size: 32px;             /* 26–28 se preferir maior */
  line-height: 1;
  transform: translateY(1px);  /* corrige a “quedinha” do devicon */
}

/* evita quebra esquisita do texto do chip */
.card.skill span{
  white-space: nowrap;
}

.card.contact-actions {
  position: relative;
  transform: translate(1040px, 15px); /* → direita 40px, ↓ baixo 15px */
}

.muted {
  color: var(--muted); /* Mantém a cor global do tema */
  margin: 0 0 18px;
}

.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.card{
  background: rgba(15,23,42,.7);
  border:1px solid var(--border);
  padding:16px 18px; border-radius:16px; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  position:relative; isolation:isolate;
}
.card:before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background: radial-gradient(60% 180% at 10% 0%, rgba(56,189,248,.18), transparent 50%),
              radial-gradient(60% 180% at 90% 110%, rgba(94,234,212,.14), transparent 40%);
  opacity:.0; transition: opacity .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(56,189,248,.10);
  border-color:#2b3b52;
}
.card:hover:before{ opacity:.8 }

/* CONTATO */
.contact{ padding: 40px 0 60px }
.contact-actions{ display:flex; gap:12px; flex-wrap:wrap }

/* Footer */
.footer{ padding: 16px 0 40px; color:var(--muted); font-size:14px; text-align:center }

.footer {
  padding: 16px 0 40px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin-top: 20px;                /* Espaço ANTES da linha */
  border-top: 1px solid var(--border);  /* A linha separadora */
  padding-top: 40px;               /* Espaço DEPOIS da linha */
}

/* REVEAL animations */
.reveal{ opacity:0; transform: translateY(14px); transition: all .6s cubic-bezier(.2,.75,.2,1) }
.reveal.visible{ opacity:1; transform:none }

/* Responsivo */
@media (max-width: 880px){
  .hero{ grid-template-columns: 1fr; }
  .hero_photo img{ margin:20px 0 0 }
}

/* === Neon lateral + hover suave azul (reutilizável) === */
:root{
  --accent: #38bdf8;                  /* azul ciano */
  --accent-soft: rgba(56,189,248,.14);/* fundo leve no hover */
  --accent-border: rgba(56,189,248,.45);
  --accent-glow: rgba(56,189,248,.18);
}

/* aplique a classe .neon em qualquer botão/pílula que quiser esse efeito */
.neon{
  position: relative;
  isolation: isolate;                 /* garante o blend só no botão */
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease;
  /* NÃO mexo no padding/border-radius atuais pra manter seu formato */
}

/* “barras” de neon nas laterais */
.neon::before,
.neon::after{
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 3px;                         /* largura inicial do brilho */
  border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  filter: blur(6px);
  opacity: .85;
  transition: width .25s ease, filter .25s ease, opacity .2s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}
.neon::before{ left: -1px; }
.neon::after { right: -1px; }

/* hover: fundo suave translúcido + borda um pouco mais azul + glow discreto */
.neon:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2)),
    var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.12) inset,
    0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.neon:hover::before,
.neon:hover::after{
  width: 6px;                         /* cresce só um pouco */
  filter: blur(10px);                  /* brilho mais soft */
  opacity: 1;
}

/* clique: sem saltar demais */
.neon:active{
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(56,189,248,.22) inset, 0 0 18px rgba(56,189,248,.12);
}

/* evita qualquer repetição do fundo ao esticar/encolher */
body{
  background-repeat: no-repeat;
  background-size: cover;
}

/* ====== MOBILE / JANELA ESTREITA ====== */
@media (max-width: 860px){
  /* herói vira uma coluna só, com espaços menores */
  .hero{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 0 0;
    margin-bottom: 24px; /* espaço pro bloco de baixo */
  }

  /* zera quaisquer deslocamentos manuais no mobile */
  .hero__text{
    position: static;   /* cancela top/left do desktop */
    text-align: center; /* centraliza título, texto e botões */
  }

  .cta{
    justify-content: center;
    gap: 10px;
    position: static;   /* evita offsets se você colocou top/left nela */
  }

  .hero__photo{
    order: -1;          /* foto sobe antes do texto */
    padding-top: 0;
    --dx: 0px;          /* zera os “empurrões” da foto no mobile */
    --dy: 0px;
    justify-content: center;
  }

  .hero__photo img{
    width: min(75vw, 320px);
    aspect-ratio: 1 / 1;  /* mantém quadrada */
    transform: translate(0, 0);
  }

  /* grid das skills fica 2 colunas (se você ainda usar a seção) */
  .skills{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* contato ocupa largura toda; nada de “encaixado” à direita */
  #contato{
    text-align: left; /* ou center se preferir */
  }
  #contato .contact-card{
    width: 100%;
    margin: 0;
  }
}

/* ====== DESKTOP FINO AJUSTE (mantém o texto mais baixo) ====== */
@media (min-width: 861px){
  .hero__text{
    position: relative;
    top: 60px; /* ajuste aqui para alinhar com a linha da foto */
  }
  /* se quiser empurrar o bloco abaixo do herói de forma estável */
  .hero{ margin-bottom: 140px; } /* ajuste à vontade */
}