/* Hero */
.hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0; }
.hero-grid {
  display: grid; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy h1 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.15;
}
.grad {
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 60%, #06b6d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin-top: .9rem; font-size: clamp(1rem, 1.7vw, 1.15rem); color: #334155; }
@media (prefers-color-scheme: dark) { .lead { color: #cbd5e1; } }

/* Orbes e glass card */
.hero-visual { position: relative; min-height: 320px; }
.orb {
  position: absolute; filter: blur(24px); opacity: .9;
  animation: floaty 10s ease-in-out infinite;
  border-radius: 40%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 80%, #fff 20%), transparent 60%),
              radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--brand-2) 80%, #fff 20%), transparent 60%);
}
.orb-1 { width: 280px; height: 280px; left: 5%; top: 10%; animation-delay: 0s; }
.orb-2 { width: 220px; height: 220px; right: 10%; top: 5%; animation-delay: .6s; }
.orb-3 { width: 180px; height: 180px; right: 0; bottom: 5%; animation-delay: 1.2s; }

@keyframes floaty {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-10px) translateX(6px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

.glass-card {
  position: absolute; inset: auto 10% 8% auto; width: min(380px, 86%);
  background: color-mix(in srgb, #ffffff 18%, transparent);
  backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}
.glass-card h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.glass-card p { font-size: .95rem; color: #334155; }
@media (prefers-color-scheme: dark) { .glass-card p { color: #cbd5e1; } }

/* Cards de serviços (reaproveitam tokens globais) */
.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand) 16%, transparent);
}
.card h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.card p { color: #475569; }
@media (prefers-color-scheme: dark) { .card p { color: #cbd5e1; } }