/* ====== Custom CSS refinado (compatível com Tailwind CDN) ====== */

/* Resets & base */
:root { --radius: 16px; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
header { border-bottom: 1px solid rgba(0,0,0,0); height: 64px; }

/* Header scrolled state */
.header-scrolled { box-shadow: 0 8px 28px rgba(15,18,33,.18); background: rgba(15,36,71,.98) !important; }

/* Links navegação */
.nav-link { color: #e5e7eb; font-weight: 600; transition: color .2s ease; }
.nav-link:hover { color: #ffffff; }
.mobile-link { color: #e5e7eb; font-weight: 600; }
.mobile-link:hover { color: #ffffff; }

/* Hero gradient blob */
.hero-blob {
  position: absolute; top: -10%; right: -10%;
  width: 60vw; height: 60vw; min-width: 420px; min-height: 420px;
  border-radius: 9999px; filter: blur(8px); transform: translateZ(0);
  background: radial-gradient(closest-side, rgba(59,130,246,0.25), rgba(124,58,237,0.15), transparent 70%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:14px;
  background-image: linear-gradient(90deg, #7c3aed, #3b82f6);
  color:#fff; font-weight:700;
  box-shadow:0 10px 20px rgba(124,58,237,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow:0 14px 24px rgba(124,58,237,.3); }

.btn-outline {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:14px; border:2px solid #212529;
  color:#212529; font-weight:700; transition: all .2s ease;
}
.btn-outline:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; }

/* Badges & stats */
.badge { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:9999px; background:#f0f3ff; color:#7c3aed; font-weight:600; font-size:.9rem; }
.stat { text-align:center; }
.stat-number { font-size:1.25rem; font-weight:800; color:#0f1221; }
.stat-label { font-size:.8rem; color:#6b7280; }

/* Cards */
.about-card, .service-card, .testimonial-card {
  background:#fff; border-radius:var(--radius); border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 28px rgba(15,18,33,.06); padding:1.5rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-card:hover, .service-card:hover, .testimonial-card:hover { transform: translateY(-4px); box-shadow:0 16px 36px rgba(15,18,33,.10); }
.about-card h4 { font-weight:800; color:#0f1221; }
.about-card p { color:#4b5563; }

.service-card h4 { margin-top:.75rem; font-weight:800; color:#0f1221; }
.service-card p { margin-top:.25rem; color:#6b7280; }
.service-list { margin-top:.75rem; display:grid; gap:.35rem; color:#374151; }

/* Feature steps (em fundo escuro) */
.feature-step {
  position:relative; border-radius:var(--radius); padding:1.25rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); backdrop-filter: blur(6px);
}
.feature-step span {
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:12px; background-image: linear-gradient(90deg, #7c3aed, #3b82f6); color:#fff; font-weight:800; margin-bottom:.75rem;
}
.feature-step h4 { font-weight:800; }
.feature-step p { color:#cbd5e1; }

/* CTA */
.cta-box {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border:1px solid rgba(0,0,0,.05); background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-radius:var(--radius); box-shadow:0 12px 36px rgba(15,18,33,.08); padding:1.25rem 1.5rem;
}
@media (min-width:640px){ .cta-box { padding:1.5rem 2rem; } }
@media (min-width:1024px){ .cta-box { padding:2rem 2.25rem; border-radius:20px; } .service-card { padding:1.75rem; } }

/* Technology chips */
.tech-chip {
  padding:.5rem .9rem; border-radius:9999px; background:#ffffff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(15,18,33,.06); font-weight:700; color:#0f1221;
}
.tech-grid > * { transition: transform .2s ease, box-shadow .2s ease; }
.tech-grid > *:hover { transform: translateY(-3px); box-shadow:0 10px 22px rgba(15,18,33,.12); }

/* Testimonials */
.testimonial-text { color:#374151; }
.testimonial-author { margin-top:.9rem; display:flex; flex-direction:column; }
.author-name { font-weight:800; color:#0f1221; }
.author-company { color:#6b7280; font-size:.9rem; }

/* Forms */
.form-label { display:block; font-weight:700; color:#0f1221; margin-bottom:.35rem; }
.form-input {
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:.75rem .9rem;
  color:#111827; outline:none; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.form-input:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.form-input.error { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); background:#fff7f7; }
.form-input.success { border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.input-hint { font-size:.85rem; color:#6b7280; min-height:1rem; }
.input-hint.error { color:#dc2626; }

/* Reveal animations */
.reveal, .reveal-card, .reveal-soft {
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible, .reveal-card.visible, .reveal-soft.visible { opacity: 1; transform: none; }
.reveal-soft { transform: translateY(10px) scale(.98); }
.reveal-soft.visible { transform: none; }

/* WhatsApp Floating */
.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; box-shadow: 0 10px 24px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, box-shadow .2s ease; border: none;
}
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.2); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ====== Card hover effects refinados (tilt + glow + scale) ====== */
.about-card, .service-card, .testimonial-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform .4s ease, box-shadow .4s ease;
}
.about-card:hover, .service-card:hover, .testimonial-card:hover {
  transform: rotateX(4deg) rotateY(-4deg) scale(1.03);
  box-shadow: 0 16px 40px rgba(124,58,237,0.25), 0 0 18px rgba(59,130,246,0.15);
  border-color: rgba(124,58,237,0.35);
}
.about-card::after, .service-card::after, .testimonial-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, rgba(124,58,237,0.15), rgba(59,130,246,0.1));
  transition: opacity .4s ease;
}
.about-card:hover::after, .service-card:hover::after, .testimonial-card:hover::after {
  opacity: 1;
}