@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 300% 300%;
  animation: gradient 8s ease infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

/* Fade-up animation (used with IntersectionObserver) */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay utilities (simple) */
.delay-0 { transition-delay: 0ms; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Small performance: reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .animate-fade-in { transition: none; animation: none; transform: none; opacity: 1; }
}

/* Logo transition */
#siteLogo {
  transition: opacity 220ms ease-in-out;
  will-change: opacity;
}

/* Design tokens (cores principais) */
:root {
  --v-primary: #0369A1;
  --v-accent-1: #06B6D4;
  --v-accent-2: #34D399;
  --v-dark: #0B1220;
  --v-surface: #F8FAFC;
  --v-focus:  rgba(6,182,212,0.18);
}

/* Header blue variant: same gradient used on home (.tech-bg) */
.header-blue {
  background: linear-gradient(90deg, #003366 0%, #005fa3 100%) !important;
}
.header-blue a, .header-blue button { color: #fff !important; }

/* When header uses blue variant, make dropdown dark to match */
#topNav.header-blue .group > div.absolute { background: #08263a; color: #e6f6ff; border: 1px solid rgba(255,255,255,0.04) }
#topNav.header-blue .group > div.absolute a { color: #e6f6ff }
#topNav.header-blue .group > div.absolute a:hover { background: rgba(255,255,255,0.03) }

/* generic dropdown panel styling (default light) */
.dropdown-panel{ background:#fff; color:#0f1724; border-radius:0.75rem; box-shadow:0 18px 40px rgba(2,6,23,0.12); border:1px solid rgba(2,6,23,0.04) }
.dropdown-panel a{ color:inherit; text-decoration:none }
.dropdown-panel .hover\:dropdown-hover:hover{ background: #f8fafc }

/* when header is blue, override to dark style */
#topNav.header-blue .dropdown-panel{ background:#08263a; color:#e6f6ff; border:1px solid rgba(255,255,255,0.04) }
#topNav.header-blue .dropdown-panel a{ color:inherit }
#topNav.header-blue .dropdown-panel .hover\:dropdown-hover:hover{ background: rgba(255,255,255,0.03) }

/* Focus-visible styles for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 4px var(--v-focus);
  outline: none;
  border-radius: 0.5rem;
}

/* Cookie consent banner */
.cookie-consent{ display:flex; align-items:center }
.cookie-consent.hidden{ display:none }
.cookie-consent a{ color:var(--v-link) }

/* Screen-reader only utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Toast message helper */
.toast-msg { position: fixed; right: 1.25rem; bottom: 1.25rem; background: var(--v-accent-1); color: white; padding: 0.5rem 0.75rem; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(3,105,161,0.18); z-index: 60; }

/* CTA prominence */
.cta-strong {
  background: linear-gradient(90deg, var(--v-accent-1), var(--v-accent-2));
  color: #fff !important;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(3,105,161,0.18);
  transform: translateZ(0);
}
.cta-strong:hover { transform: translateY(-3px) scale(1.02); }

/* Hero adjustments to be more prominent */
#home { padding-top: 6.5rem; padding-bottom: 4.5rem; }
#home .swiper { padding: 2rem 0; }

/* Card elevation */
.elevated-card { box-shadow: 0 18px 40px rgba(2,6,23,0.18); border-radius: 1rem; overflow: hidden; }

/* Slightly stronger link contrast when header is light */
.header-light-link { color: #0f172a !important; }

/* Partner badge style */
.partner-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.06); padding: 0.35rem 0.6rem; border-radius: 999px; }
.partner-badge img { display: block; width: 36px; height: 36px; border-radius: 999px; background: white; padding: 3px; box-shadow: 0 6px 18px rgba(3,105,161,0.12); }
.partner-badge .partner-name { color: #e6f6fb; font-size: 0.9rem; font-weight: 600; }

/* GSync badge on hero mockup */
.hero-gsync-badge { box-shadow: 0 8px 20px rgba(0,0,0,0.25); border-radius: 8px; background: rgba(255,255,255,0.03); }
.hero-gsync-badge img { display: block; width: 80px; height: 80px; object-fit: contain; }
@media (max-width: 640px) { .hero-gsync-badge { display: none; } }