:root{
  --bg:#000; --panel:#0a0a0a; --txt:#e8f1fc; --muted:#8fa4bf;
  --accent:#00d9ff; --accent2:#007bff; --radius:16px;
  --maxw:1080px; --shadow:0 10px 30px rgba(0,170,255,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--txt);
  background:
    radial-gradient(1000px 600px at 100% -10%, rgba(0,217,255,.12), transparent 60%),
    radial-gradient(800px 600px at -10% 0%, rgba(0,123,255,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ===== FUNDO DE PARTÍCULAS ===== */
#bg-particles{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
}

/* Logo (AC sem fundo, brilho suave) */
.logo-mini{
  height:42px; width:auto; display:block; background:transparent;
  filter:
    drop-shadow(0 0 3px rgba(0,217,255,.55))
    drop-shadow(0 0 7px rgba(0,123,255,.35));
}

/* Header */
header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.6));
  border-bottom:1px solid rgba(0,217,255,.2)
}
.top{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--accent)}
.menu{display:flex;gap:18px;font-size:.95rem}
.menu a{opacity:.8;transition:.3s;padding:8px 0;border-bottom:2px solid transparent}
.menu a:hover{opacity:1;color:var(--accent);text-shadow:0 0 8px var(--accent),0 0 16px var(--accent2)}
.menu a.active{color:var(--accent);border-color:var(--accent)}

/* Hero */
.hero{padding:88px 0 44px;text-align:center}
h1{font-size:clamp(36px,6vw,56px);line-height:1.04;text-shadow:0 0 14px rgba(0,217,255,.5)}
.lead{max-width:760px;color:var(--muted);margin:14px auto 24px}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.badge{padding:8px 12px;border-radius:999px;border:1px solid rgba(0,217,255,.4);background:rgba(0,217,255,.08);color:var(--muted);font-size:.92rem}
.cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{padding:12px 16px;border-radius:12px;border:1px solid rgba(0,217,255,.4);transition:.3s;color:var(--txt);display:inline-flex;align-items:center;gap:6px;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001b33;font-weight:900;border:0;box-shadow:0 0 18px rgba(0,217,255,.6),0 0 32px rgba(0,217,255,.4)}
.btn:hover{background:var(--accent);color:#000;box-shadow:0 0 24px rgba(0,217,255,.8)}

/* Sections */
.section{padding:48px 0}
.section h2{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:16px;color:var(--accent);text-shadow:0 0 10px rgba(0,217,255,.5)}
.dash{width:28px;height:2px;background:var(--accent)}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.card{border:1px solid rgba(0,217,255,.25);border-radius:16px;background:rgba(255,255,255,.02);box-shadow:var(--shadow);overflow:hidden;transition:.3s;position:relative}
.card:hover{box-shadow:0 0 24px rgba(0,217,255,.6)}
.inner{padding:16px}
.muted{color:var(--muted)}
.pill{display:inline-block;font-size:.78rem;padding:4px 8px;border:1px solid rgba(0,217,255,.25);border-radius:999px;color:var(--muted);background:rgba(0,217,255,.06)}

/* Especialidades logos */
.thumb-wrapper{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb-wrapper::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,217,255,.18),transparent 70%)}
.thumb{max-width:60%;max-height:80%;z-index:1;object-fit:contain}

/* Ribbon PROJETOS */
.ribbon{position:absolute;top:12px;left:-40px;transform:rotate(-20deg);background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001b33;font-weight:900;padding:4px 40px;border-radius:6px;letter-spacing:.06em;z-index:2;animation:neonRibbon 1.5s infinite alternate ease-in-out;text-shadow:0 0 8px var(--accent2)}
@keyframes neonRibbon{0%{filter:brightness(1);box-shadow:0 0 6px rgba(0,217,255,.5),0 0 12px rgba(0,123,255,.3)}100%{filter:brightness(1.4);box-shadow:0 0 18px rgba(0,217,255,.9),0 0 30px rgba(0,123,255,.7)}}

/* Sobre */
.about {
  display: grid;
  grid-template-columns: 220px 1fr; /* dá espaço fixo p/ foto */
  gap: 30px;
  align-items: center;
  padding-left: 30px; /* respiro só na esquerda */
}

.about div { 
  text-align: left;                   /* força o texto a alinhar certinho */
}

.about h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: var(--accent);
}

.about p {
  margin-bottom: 10px;
}

@media(max-width:980px){.about{grid-template-columns:1fr;text-align:center}}
.photo {
  width: 220px;                     /* ajusta tamanho */
  height: 220px;
  border-radius: 16px;               /* mesmo raio dos seus cards */
  overflow: hidden;
  border: 2px solid var(--accent);   /* borda neon */
  box-shadow: 0 0 20px var(--accent), 0 0 40px rgba(0,217,255,.6);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* garante corte bonito */
}

/* Deixe a coluna esquerda mais larga p/ foto + certs */
.about {
  display: grid;
  grid-template-columns: 320px 1fr; /* ajuste se quiser */
  gap: 20px;
  align-items: start;
}

/* Empilha foto + certs */
.about-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Botões sociais */
.btn-social{
  width:30px;height:30px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#001b33;border:1px solid transparent;transition:.3s;
  box-shadow:0 0 12px rgba(0,217,255,.5),0 0 24px rgba(0,123,255,.3)
}
.btn-social:hover{
  background:transparent;color:var(--accent);border:1px solid var(--accent);
  box-shadow:0 0 18px rgba(0,217,255,.8);text-shadow:0 0 8px var(--accent),0 0 16px var(--accent2)
}

/* Serviços */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}
.service{border:1px solid rgba(0,217,255,.25);padding:16px;border-radius:12px;background:rgba(255,255,255,.02);box-shadow:var(--shadow)}
.service h3{color:var(--accent);margin-bottom:8px}
.price{font-size:1.05rem;color:var(--accent2);margin:6px 0}

/* Footer */
footer{padding:44px 0 64px;color:var(--muted);text-align:center}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-nav{display:flex;gap:16px;font-size:.9rem}
.footer-nav a{color:var(--muted);transition:.3s}
.footer-nav a:hover{color:var(--accent)}

/* Reveal (suave, sem pulo e sem flicker) */
.reveal{
  opacity: 0;
  visibility: hidden;              /* evita flicker na 1ª pintura */
  transform: translateY(10px);     /* leve deslocamento pra dar suavidade */
  transition:
    opacity .35s ease-out,
    transform .40s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform; /* sugere otimização ao compositor */
}

.reveal.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ajudinha pra grandes blocos não “repaintarem” o resto da página */
.section.reveal{
  contain: layout paint;
}

/* Respeita quem desativa animação no SO */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; transform: none; opacity: 1; visibility: visible; }
}


/* Back to top */
#toTop{
  position:fixed;right:18px;bottom:18px;display:none;border-radius:999px;
  padding:10px 14px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#001b33;font-weight:800;border:none;box-shadow:0 10px 20px rgba(0,217,255,.3);cursor:pointer
}
#toTop.show{display:block}

/* Botão Falar Agora fixo (estilo bolinha neon) */
#btn-falar {
  position: fixed;
  right: 18px;          /* alinhado com o botão de subir */
  bottom: 140px;        /* acima do botão de voltar ao topo */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #001b33;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0,217,255,.6), 0 0 32px rgba(0,217,255,.4);
  cursor: pointer;
  z-index: 50;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

#btn-falar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(0,217,255,.9), 0 0 40px rgba(0,123,255,.7);
}


#btn-falar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(0,217,255,.9), 0 0 40px rgba(0,123,255,.7);
}

/* ===== HERO REVAMP ===== */
.hero{
  padding: 96px 0 56px;
  text-align:center;
}

.hero .title{
  font-size: clamp(42px, 8vw, 80px);
  line-height: 1.02;
  letter-spacing: .5px;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(0,217,255,.35), 0 0 36px rgba(0,123,255,.25);
}

.hero .title .gradient{
  background: linear-gradient(90deg, #eaf7ff 0%, #b7e9ff 40%, #8fd8ff 70%, #eaf7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: heroShine 6s linear infinite;
}
@keyframes heroShine{
  0%{ background-position: 0% 0% }
  100%{ background-position: 200% 0% }
}

.hero .lead{
  max-width: 920px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
}

/* underline neon abaixo do título */
.hero-underline{
  width: clamp(120px, 18vw, 220px);
  height: 2px;
  margin: 18px auto 22px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  filter: drop-shadow(0 0 10px rgba(0,217,255,.7));
  opacity: .9;
}

/* badges mais discretas */
.hero .badges{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin: 10px 0 26px;
}
.hero .badge{
  padding: 8px 14px;
  font-size:.95rem;
  border-radius: 999px;
  border:1px solid rgba(0,217,255,.35);
  background: rgba(0,217,255,.06);
  color: var(--muted);
}

/* CTA principal com “anel” glow */
.hero .cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

.hero .btn.hero-primary{
  position: relative;
  padding: 16px 24px;
  font-size: clamp(16px, 2.4vw, 18px);
  border-radius: 14px;
  border: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#001b33;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(0,217,255,.7), 0 0 40px rgba(0,217,255,.35);
  isolation:isolate; /* para o ::after ficar abaixo */
}
.hero .btn.hero-primary::after{
  content:"";
  position:absolute; inset:-14px;
  border-radius: 20px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,217,255,.28), transparent 70%);
  z-index:-1;
  animation: ringPulse 2.8s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{ opacity:.55; filter: blur(8px); }
  50%{ opacity:.85; filter: blur(12px); }
}

/* CTAs secundários: outline discreto */
.hero .cta.secondary{ margin-top: 6px; }
.hero .cta.secondary .btn{
  padding: 14px 20px;
  border-radius: 12px;
  border:1px solid rgba(0,217,255,.4);
  background: rgba(0,217,255,.05);
  color: var(--txt);
  transition:.25s;
}
.hero .cta.secondary .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(0,217,255,.35);
  color:#000; background: var(--accent);
}

/* linha de confiança (discreto) */
.hero .trust{
  margin-top: 14px;
  color: var(--muted);
  font-size:.95rem;
  opacity:.9;
}
.hero .trust i{ margin-right:6px; color: var(--accent); }

/* ===== LOGOS DUPLAS (SQL Server + MySQL) ===== */
.thumb-wrapper.dual-db {
  display: flex;
  gap: 20px; /* espaço entre os logos */
  justify-content: center;
  align-items: center;
}

.thumb-wrapper.dual-db .thumb {
  max-width: 40%;
  max-height: 70%;
  object-fit: contain;
}

/*======= Logo Portfolio SQL Server + MySQL =======*/
/* container que aceita mais de uma logo */
.thumb-wrapper.double {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px; /* espaço entre as logos */
  padding: 20px;
}

/* as logos ficam equilibradas, sem ficarem minúsculas */
.thumb-wrapper.double .thumb {
  max-width: 40%;   /* cada uma ocupa até 40% da largura */
  max-height: 70%;  /* altura equilibrada */
  object-fit: contain;
}

/* — Certificações minimalistas — */
.certs { margin-top: 6px; padding: 6px 0; }
.certs h4 {
  color: var(--accent);
  font-size: 1rem;
  margin-bottom: 8px;
  text-shadow: 0 0 6px var(--accent);
}
.cert-logos { display: flex; flex-direction: column; gap: 6px; }
.cert {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.9rem; color: var(--muted);
}
.cert img { width: 20px; height: 20px; filter: drop-shadow(0 0 6px var(--accent)); }

/* Responsivo */
@media (max-width: 980px){
  .about { grid-template-columns: 1fr; }
  .about-left { align-items: center; }
}