/* Paleta baseada na logo */
:root{
  --dark: #13293d;       /* Azul bem escuro */
  --primary: #ffffff;    /* Branco */
  --secondary: #10283d;  /* Azul escuro mais claro */
  --accent: #0ea5e9;     /* um azul-accent sutil para detalhes */
}

/* reset visual (pequeno) */
body { background: var(--dark); color: var(--primary); }

/* ====== Helpers / utilidades ====== */
.container { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* Seções: menos espaçamento que antes */
.section { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* Titles menores para não ocuparem muito */
.section-title { text-align:center; font-size:1.5rem; margin-bottom:1rem; font-weight:700; letter-spacing:1.5px; }
.section-title.small { font-size:1.25rem; }

/* ====== HERO ====== */
.hero { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }

/* logo neon/glow */
.logo-neon { filter: drop-shadow(0 6px 18px rgba(14,165,233,0.08)); }

/* destaque de tecnologias do hero */
.tech-strip { display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); }

/* ====== BOTÕES ====== */
.btn-primary {
  background: var(--primary);
  color: var(--dark);
  padding: .7rem 1.25rem;
  border-radius: 999px;
  font-weight:700;
  display:inline-block;
}
.btn-primary.small { padding: .45rem .8rem; font-size:.9rem; }

.btn-outline {
  background: transparent;
  color: var(--primary);
  padding: .5rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ghost */
.btn-ghost { background: transparent; color: var(--primary); padding:.7rem 1rem; border-radius:999px; }

/* ====== CARDS / SERVIÇOS ====== */
.card, .testimonial-card, .process-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 1.1rem;
  border-radius: 12px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover, .testimonial-card:hover, .process-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(2,6,23,0.6); }

/* títulos nos cards */
.card-title { font-size:1.05rem; margin-bottom: .5rem; }

/* processo - step */
.process-card .step {
  width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:.6rem;
}

/* testimonials */
.testimonial-card p { font-size: .95rem; }

/* ====== PORTFÓLIO GRID (centraliza 1 item) ====== */
/* usa grid responsivo + centraliza itens */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); /* se só 1, ficará centralizado no container */
  justify-content: center;
  gap: 1.25rem;
  align-items: start;
}

/* controla largura do card interno e comportamento */
.portfolio-card { width:100%; max-width:420px; border-radius:12px; overflow:hidden; padding: 1rem; }

/* imagens do portfolio */
.portfolio-card img { height: 220px; width:100%; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,0.06); }

/* ====== TECH PILL ====== */
.tech-pill {
  padding:.4rem .7rem; border-radius:999px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  font-weight:600; font-size:.85rem;
}

/* ====== animações ====== */
.fade-in-up { opacity:0; transform: translateY(10px); animation: fadeInUp .7s forwards; }
.fade-in-up.delay-1 { animation-delay:.2s; }
.delay-1 { animation-delay:.18s; }
.delay-2 { animation-delay:.32s; }
.delay-3 { animation-delay:.48s; }

@keyframes fadeInUp {
  to { opacity:1; transform: translateY(0); }
}

/* reveal usado pelo JS (aplica quando estiver visível) */
.reveal { opacity:0; transform: translateY(12px) scale(.995); transition: all .55s cubic-bezier(.2,.9,.2,1); }
.reveal.in-view { opacity:1; transform: translateY(0) scale(1); }

/* leve flutuação nas imagens do hero/portfolio */
@keyframes floatY { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
.portfolio-card img { animation: floatY 6s ease-in-out infinite; opacity:.97; }

/* pequenas bordas e contrastes */
.bg-secondary { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-top:1px solid rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.02); }

/* footer */
footer { color: rgba(255,255,255,0.7); }

/* responsividade fina */
@media (max-width:768px) {
  .section { padding-top:1.5rem; padding-bottom:1.5rem; }
  .section-title { font-size:1.1rem; }
  .portfolio-card img { height:180px; }
}