/* Reset e configurações básicas */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #fff;
}

.main-container { position: relative; min-height: 100vh; width: 100%; flex: 1; display: flex; flex-direction: column; }

/* Background */
.background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background-color: #ffffff; background-image: url('assets/background.png'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
/* Ações topo direito */
.top-right-actions { position: fixed; top: 16px; right: 16px; z-index: 1001; display: flex; gap: 12px; flex-wrap: wrap; }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 40px; background: rgba(0,0,0,0.12); backdrop-filter: blur(10px); display: none; justify-content: space-between; align-items: center; }
.header-content { display: flex; align-items: center; }
.social-links { display: flex; gap: 20px; justify-content: flex-end; }
.social-link { color: #fff; text-decoration: none; padding: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.social-link:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.social-link svg { width: 20px; height: 20px; }

/* Botão How it Works (alaranjado) */
.how-it-works-btn { background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); color: #fff; border: none; padding: 12px 20px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(255,107,53,0.3); }
.how-it-works-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,0.4); background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%); }
.how-it-works-btn svg { width: 16px; height: 16px; }

/* Main */
.main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 40px 20px; min-height: 100vh; }
.layout-container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; width: 100%; }
.left-pane { display: flex; flex-direction: column; gap: 20px; }
.right-pane { display: flex; align-items: center; justify-content: center; }
.main-title { font-size: 3rem; line-height: 1.2; }
.main-subtitle { font-size: 1.1rem; color: #ddd; }
.main-logo-large { max-width: 260px; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6)); }

.download-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
/* Tornar a imagem o conteúdo total do botão com tamanho fixo similar ao original */
.download-buttons .btn { display: inline-block; padding: 0; border-radius: 12px; text-decoration: none; background: transparent; border: none; backdrop-filter: none; font-size: 0; overflow: hidden; width: 220px; height: 52px; cursor: pointer; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.download-buttons .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,0.25); background: transparent; }
.download-buttons .btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
 .download-buttons .btn.disabled:hover { transform: none; box-shadow: none; }
  /* badge removido: 'Coming soon' não é mais necessário para Android */
.download-buttons .btn:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; }
.download-buttons .btn-android { border: none; }
.download-buttons .btn-ios { border: none; }
.download-buttons .app-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s ease, transform 0.2s ease; }
.download-buttons .btn:hover .app-img { filter: brightness(1.06) contrast(1.02); }

/* Modal de Vídeo */
.video-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
.video-modal-content { position: relative; margin: 5% auto; width: 90%; max-width: 900px; height: 80%; background: #000; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.video-close { position: absolute; top: 15px; right: 25px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; z-index: 2001; background: rgba(0,0,0,0.5); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; }
.video-close:hover { color: #ff4757; background: rgba(0,0,0,0.8); }
.video-container { width: 100%; height: 100%; position: relative; }
.video-container iframe { width: 100%; height: 100%; border: none; }

/* Footer */
.footer { text-align: center; padding: 24px; background: rgba(0,0,0,0.92); backdrop-filter: none; color: #ffffff; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); }
.footer-actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer p { margin-top: 10px; font-size: 0.95rem; color: #eaeaea; }

/* Responsivo */
@media (max-width: 1024px) { .layout-container { gap: 40px; } .main-title { font-size: 2.4rem; } }
@media (max-width: 768px) {
  .layout-container { grid-template-columns: 1fr; gap: 32px; }
  .main-content { padding: 72px 16px 88px; }
  .main-logo-large { max-width: 220px; }
  .how-it-works-btn { padding: 10px 16px; font-size: 12px; }
  /* Background cobre melhor em telas pequenas */
  .background-container { background-image: url('assets/background_mobile.png'); background-size: 97% auto; background-position: center 12%; }
  /* Centralizar e reduzir botões de download no topo */
  .top-right-actions { top: 12px; left: 0; right: 0; justify-content: center; gap: 10px; }
  .download-buttons .btn { width: 180px; height: 44px; }
  /* Fixar rodapé no mobile */
  .footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Modo retrato: garantir visibilidade do rodapé e área segura iOS */
@media (max-width: 768px) and (orientation: portrait) {
  .footer { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.85); width: 100%; min-height: 64px; bottom: env(safe-area-inset-bottom); }
  .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Ajuste para centralizar redes no rodapé */
.footer .social-links { justify-content: center; }
@media (max-width: 480px) {
  .main-title { font-size: 2rem; }
  .main-logo-large { max-width: 180px; }
  .top-right-actions { top: 10px; }
  .download-buttons .btn { width: 150px; height: 40px; }
  /* Em telas muito pequenas, reduza um pouco mais o fundo */
  .background-container { background-size: 95% auto; background-position: center 10%; }
  /* Dar um pouco mais de espaço para o rodapé fixo */
  .main-content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* Privacy Policy link styling */
.privacy-link {
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
}
.privacy-link:hover {
  text-decoration: underline;
}