/*
  Folha de Estilos Principal para o site Inboxer
  ---
  ÍNDICE:
  1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS
  2. FUNDO ANIMADO COM ESTRELAS
  3. CABEÇALHO (HEADER)
  4. SEÇÃO HERO
  5. SEÇÃO DE SOLUÇÕES (FEATURES)
  6. SEÇÃO DE DEPOIMENTOS (TESTIMONIALS)
  7. MODAL LIGHTBOX
  8. RODAPÉ (FOOTER)
  9. DESIGN RESPONSIVO (MEDIA QUERIES)
*/


/* --- 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS --- */

:root {
  --bg-dark: #121212;
  --bg-card: #1e2329;
  --bg-section: #181c20;
  --text-main: #ececec;
  --text-secondary: #b0b3b8;
  --primary: #25d366;
  --primary-hover: #1de47e;
  --border-card: #24292e;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 8px 40px rgba(37, 211, 102, 0.15);
  --bg-deep-space: #0c0d14;
  
  /* CORES PARA O GRADIENTE DE FUNDO */
  --color-green-light: #25d366;
  --color-blue-dark: #0f4c81;
  --color-black-center: #121212;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  /*
    GRADIENTE COMPLEXO: Combina linear e radial gradients
    - Linear: Cria transição diagonal do verde para azul
    - Radial: Adiciona um centro mais escuro para não ofuscar o conteúdo
  */
  background-color: var(--color-black-center);
     background-image: 
  linear-gradient(135deg, rgba(15, 76, 129, 0.2) 0%, rgba(15, 76, 129, 0.2) 60%, rgba(37, 211, 102, 0.15) 100%);
  background-size: cover;
  background-attachment: fixed;
  
  color: var(--text-main);
  font-family: 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color .2s;
}
a:hover {
  color: var(--primary-hover);
}


/* --- 2. FUNDO ANIMADO COM ESTRELAS --- */

/* Animação de movimento das estrelas */
@keyframes move-stars {
  from { transform: translateY(0px); }
  to   { transform: translateY(-2000px); }
}

/* Animação de piscar/brilhar das estrelas */
@keyframes flicker-stars {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

/* Estilo base para todas as camadas de estrelas */
#stars-layer1, #stars-layer2, #stars-layer3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
}

/* Camada 3: Estrelas distantes (pequenas e lentas) */
#stars-layer3 {
  background-image: 
    radial-gradient(1px 1px at 20px 30px, white, transparent),
    /*radial-gradient(1px 1px at 40px 80px, white, transparent),
    radial-gradient(1px 1px at 90px 40px, white, transparent),
    radial-gradient(1px 1px at 130px 90px, white, transparent),
    radial-gradient(1px 1px at 160px 10px, white, transparent);*/
  background-size: 250px 250px;
  animation: move-stars 200s linear infinite, flicker-stars 8s infinite alternate ease-in-out 0s;
}

/* Camada 2: Estrelas intermediárias (médias e velocidade normal) */
#stars-layer2 {
  background-image: 
    radial-gradient(1.5px 1.5px at 50px 100px, white, transparent),
    radial-gradient(1.5px 1.5px at 80px 40px, white, transparent),
    radial-gradient(1.5px 1.5px at 180px 180px, white, transparent),
    radial-gradient(1.5px 1.5px at 220px 120px, white, transparent);
  background-size: 200px 200px;
  animation: move-stars 200s linear infinite, flicker-stars 8s infinite alternate ease-in-out 1s;
}

/* Camada 1: Estrelas próximas (maiores e mais rápidas) */
#stars-layer1 {
  background-image: 
    radial-gradient(2px 2px at 10px 150px, white, transparent),
    radial-gradient(2px 2px at 100px 200px, white, transparent),
    radial-gradient(2px 2px at 200px 50px, white, transparent);
  background-size: 150px 150px;
  animation: move-stars 100s linear infinite, flicker-stars 8s infinite alternate ease-in-out 2s;
}


/* --- 3. CABEÇALHO (HEADER) --- */

.logo-image {
  height: 45px;
  width: auto;
}

.header {
  background: rgba(24, 28, 32, 0.9);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0; left: 0; right: 0;
  border-bottom: 1px solid var(--border-card);
  transition: background-color 0.3s ease;
}

.nav-container {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 24px;
}

.logo-text {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary);
}

.nav-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color .2s;
}
.nav-link:hover {
  color: var(--primary);
}


/* --- 4. SEÇÃO HERO --- */

.hero {
  background: transparent;
  padding: 160px 20px 100px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.modules, .testimonials, .footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  letter-spacing: -.5px;
}

.highlight {
  color: #fff;
  background: linear-gradient(90deg, #25d366 30%, #1de47e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.hero-subtitle {
  color: var(--text-secondary);
  font-size: 1.25rem;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-hero.primary {
  display: inline-block;
  background: var(--primary);
  color: #121212;
  padding: 16px 34px;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: var(--shadow-strong);
  cursor: pointer;
  transition: all .3s ease;
}
.btn-hero.primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 50px rgba(37, 211, 102, 0.25);
}


/* --- 5. SEÇÃO DE SOLUÇÕES (FEATURES) --- */
.modules {
  padding: 80px 20px;
}

.modules-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: 2.4rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 14px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.feature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 100px;
  text-align: left;
}

.feature-section.layout-inverted {
  grid-template-columns: 1fr 1fr;
}
.feature-section.layout-inverted .feature-text {
  order: 2;
}
.feature-section.layout-inverted .feature-image-container {
  order: 1;
}

.feature-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 16px;
}

.feature-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.feature-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-benefits li {
  color: var(--text-main);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.benefit-icon {
  color: var(--primary);
  font-weight: bold;
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--primary);
  padding: 12px 28px;
  border: 2px solid var(--primary);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  transition: all .3s ease;
}
.btn-secondary:hover {
  background: var(--primary);
  color: #121212;
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}

.feature-image-container {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: rgba(30, 35, 41, 0.5);
  backdrop-filter: blur(5px);
}

.feature-image-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: var(--primary);
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
  transition: opacity .3s ease;
}
.feature-image-container:hover::before {
    opacity: 0.25;
}

.feature-image {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-card);
  box-shadow: 0 16px 50px rgba(0,0,0,0.3);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}
.feature-image:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 60px rgba(37, 211, 102, 0.2);
}


/* --- 6. SEÇÃO DE DEPOIMENTOS (TESTIMONIALS) --- */

.testimonials {
  padding: 80px 20px;
  margin-top: 100px;
}

.testimonials-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.testimonial-card {
  background-color: rgba(30, 35, 41, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border-card);
  border-top: 4px solid var(--primary);
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.testimonial-card p {
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 24px 0;
}

.testimonial-author {
  color: var(--text-main);
  font-weight: bold;
}
.testimonial-author span {
  display: block;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.9rem;
}


/* --- 7. MODAL LIGHTBOX --- */

.image-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.image-modal.active { opacity: 1; visibility: visible; }
.modal-content {
  position: relative; max-width: 95vw; max-height: 95vh;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  transform: scale(0.8) translateY(50px);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.image-modal.active .modal-content { transform: scale(1) translateY(0); }
.modal-image {
  max-width: 100%; max-height: 80vh; width: auto; height: auto;
  object-fit: contain; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-card); background: var(--bg-card);
}
.modal-title {
  color: var(--primary); font-size: 1.4rem; font-weight: 600;
  text-align: center; margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.modal-close, .modal-nav {
  position: absolute; background: rgba(37, 211, 102, 0.9); backdrop-filter: blur(10px);
  border: none; border-radius: 50%; color: #121212; font-weight: bold;
  cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.modal-close { top: 20px; right: 20px; width: 48px; height: 48px; font-size: 1.5rem; }
.modal-close:hover, .modal-nav:hover { background: var(--primary); transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4); }
.modal-close:hover { transform: scale(1.1); }
.modal-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 1.6rem; z-index: 10; }
.modal-nav.prev { left: 30px; }
.modal-nav.next { right: 30px; }
.modal-indicators { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }
.modal-indicator {
  width: 14px; height: 14px; border-radius: 50%; background: rgba(176, 179, 184, 0.5);
  cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent;
}
.modal-indicator.active {
  background: var(--primary); transform: scale(1.3);
  border-color: rgba(37, 211, 102, 0.3); box-shadow: 0 0 12px rgba(37, 211, 102, 0.4);
}


/* --- 8. RODAPÉ (FOOTER) --- */

.footer {
  padding: 28px 16px 18px;
  border-top: 1px solid var(--border-card);
  background-color: rgba(24, 28, 32, 0.95);
  backdrop-filter: blur(5px);
}

.footer-container {
  max-width: 500px;
  margin: auto;
  text-align: center;
}


/* --- 9. DESIGN RESPONSIVO (MEDIA QUERIES) --- */

@media (max-width: 768px) {
  .nav-menu { display: none; }
  .nav-container { justify-content: center; }
  
  .hero { padding-top: 120px; }

  .feature-section,
  .feature-section.layout-inverted {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 60px;
  }
  .feature-section .feature-text,
  .feature-section.layout-inverted .feature-text {
    order: 2;
    text-align: center;
  }
  .feature-section .feature-image-container,
  .feature-section.layout-inverted .feature-image-container {
    order: 1;
  }
  .feature-benefits { text-align: left; }

  .modal-close { top: 15px; right: 15px; width: 40px; height: 40px; }
  .modal-nav { width: 48px; height: 48px; }
  .modal-nav.prev { left: 20px; }
  .modal-nav.next { right: 20px; }
}