/*--------------------------------------------------------------
# BobDev - personalização do Clarity
# Paleta da marca aplicada por variáveis; não editar main.css.
--------------------------------------------------------------*/
:root {
  --brand-blue: #2b8af9;
  --brand-blue-light: #26b4fc;
  --brand-blue-dark: #1a5ea5;
  --brand-cyan: #18e2fa;
  --brand-purple: #ad44d1;
  --brand-purple-glow: #f788fa;
  --brand-gradient: linear-gradient(135deg, #2b8af9, #18e2fa);
  --brand-gradient-alt: linear-gradient(135deg, #3269c2, #ad44d1);

  --background-color: #0b0e11;
  --default-color: #d9dadb;
  --heading-color: #f2f2f2;
  --accent-color: #2b8af9;
  --surface-color: #1e2126;
  --contrast-color: #ffffff;

  --nav-color: #a6a8a5;
  --nav-hover-color: #ffffff;
  --nav-mobile-background-color: #0b0e11;
  --nav-dropdown-background-color: #1e2126;
  --nav-dropdown-color: #a6a8a5;
  --nav-dropdown-hover-color: #ffffff;
}

.light-background {
  --background-color: #14171b;
  --surface-color: #1e2126;
}

.dark-background {
  --background-color: #070809;
  --default-color: #f2f2f2;
  --heading-color: #ffffff;
  --surface-color: #1e2126;
  --contrast-color: #ffffff;
}

/* Gradientes da marca (substituem o violeta do template) */
.header .btn-getstarted,
.header .btn-getstarted:focus,
.services .service-icon,
.services .services-cta .btn,
.why-us .feature-card .icon-wrapper,
.why-us .feature-content .cta-wrapper .btn.btn-primary,
.contact .contact-form-card:before,
.contact .contact-form-card .form-header .header-icon,
.contact .contact-form-card .submit-btn,
.portfolio .portfolio-filters li.filter-active,
.portfolio .portfolio-cta .cta-buttons .btn.btn-primary {
  background: var(--brand-gradient);
}

.hero .hero-content h1 .text-gradient,
.text-gradient {
  background: linear-gradient(90deg, #2b8af9, #18e2fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Brilho roxo/ciano no fundo do hero */
.hero .hero-bg-elements .bg-shape.shape-1 {
  background: radial-gradient(circle, rgb(43 138 249 / 0.22), transparent 70%);
}

.hero .hero-bg-elements .bg-shape.shape-2 {
  background: radial-gradient(circle, rgb(173 68 209 / 0.22), transparent 70%);
}

/* Logos */
.header .logo img.brand-logo {
  max-height: 46px;
  margin-right: 0;
}

.footer .footer-about .logo img.brand-logo {
  max-height: 52px;
}

/* Cartões do portfólio sem imagem: destaque com o gradiente da marca */
.portfolio .portfolio-wrapper .portfolio-image.brand-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient-alt);
}

.portfolio .portfolio-wrapper .portfolio-image.brand-cover i {
  font-size: 4rem;
  color: rgb(255 255 255 / 0.9);
}

.portfolio .portfolio-wrapper .portfolio-image.brand-cover.cover-blue {
  background: var(--brand-gradient);
}

.header {
  --surface-color: #1e2126;
}

/*--------------------------------------------------------------
# Hero: imagem do cérebro com neurônios animados + ícones em órbita
--------------------------------------------------------------*/
.brain-stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Cérebro solto no fundo: sem cartão, borda, sombra ou cantos.
   A imagem tem 50px de margem preta (some com o screen), então fica mais larga
   para o cérebro manter o tamanho, e o fade da máscara começa bem fora das pontas. */
.brain-image-wrap {
  position: relative;
  width: 96%;
  animation: brain-float 7s ease-in-out infinite;
  z-index: 2;
}

.brain-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 49%, #000 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 49%, #000 84%, transparent 100%);
}

.brain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.brain-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* z-index de cada ícone (por cima ou por baixo do cérebro) é definido pelo JS */
.brain-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff;
  background:
    linear-gradient(#14181d, #14181d) padding-box,
    linear-gradient(135deg, #2b8af9, #18e2fa 50%, #ad44d1) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 18px rgb(43 138 249 / 0.4);
  pointer-events: auto;
  will-change: transform;
}

.brain-orbit-item:nth-child(odd) {
  box-shadow: 0 0 18px rgb(173 68 209 / 0.4);
}

@keyframes brain-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.02); }
}

@media (max-width: 991px) {
  .brain-stage { margin-top: 40px; max-width: 520px; }
}

@media (max-width: 575px) {
  .brain-orbit-item { width: 36px; height: 36px; font-size: 0.95rem; }
  .brain-orbit-item:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brain-image-wrap { animation: none; }
}

/*--------------------------------------------------------------
# Hero: selo, palavras alternando e checks
--------------------------------------------------------------*/
.hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-bottom: 1.5rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
  background: rgb(30 33 38 / 0.8);
  border: 1px solid rgb(166 168 165 / 0.2);
}

.hero .hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6);
  animation: hero-dot-pulse 2s ease-out infinite;
}

.hero-rotator {
  display: inline-grid;
  vertical-align: top;
}

.hero-rotator-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(4px);
  transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}

.hero-rotator-word.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.45em);
  filter: blur(4px);
}

.hero .hero-buttons .btn i {
  font-size: 1.05em;
}

.hero .hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero .hero-checks i {
  color: #22c55e;
}

@keyframes hero-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6); }
  70% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}

@media (max-width: 991px) {
  .hero .hero-checks { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator-word { transition: none; transform: none; filter: none; }
  .hero .hero-badge-dot { animation: none; }
}

.hero .hero-content h1 {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
}

.hero .hero-line {
  white-space: nowrap;
}

.hero-rotator-word {
  white-space: nowrap;
}

@media (max-width: 419px) {
  .hero .hero-line { white-space: normal; }
  .hero-rotator { display: grid; }
}

/* Formulário de contato: campo honeypot fora da tela (robôs preenchem, pessoas não veem) */
.contato-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}