* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #fef3f2 0%, #f0fdf4 50%, #f0f9ff 100%);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

/* Container principal */
.splash-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}

/* Imagem de fundo - lado esquerdo no desktop */
.splash-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/fundo_ai_uanna.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

@media (min-width: 1024px) {
  .splash-container {
    flex-direction: row;
    padding: 0;
  }
  
  .splash-container::after {
    width: 60%;
    left: 0;
    background-size: cover;
    background-position: center center;
  }
}

/* Gradientes suaves nos cantos */
.gradient-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.15) 0%, rgba(255, 159, 64, 0.1) 100%);
  border-radius: 50%;
  filter: blur(100px);
  animation: gradient-move-1 20s ease-in-out infinite;
  z-index: 1;
}

@media (min-width: 1024px) {
  .gradient-1 {
    left: 0;
    width: 25rem;
    height: 25rem;
  }
}

.gradient-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(24, 198, 152, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
  border-radius: 50%;
  filter: blur(100px);
  animation: gradient-move-2 25s ease-in-out infinite reverse;
  z-index: 1;
}

@media (min-width: 1024px) {
  .gradient-2 {
    right: 40%;
    width: 25rem;
    height: 25rem;
  }
}

.gradient-3 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
  border-radius: 50%;
  filter: blur(100px);
  animation: gradient-move-3 30s ease-in-out infinite;
  z-index: 1;
}

@media (min-width: 1024px) {
  .gradient-3 {
    right: 40%;
    bottom: 0;
    width: 25rem;
    height: 25rem;
  }
}

@keyframes gradient-move-1 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-40%, -40%) scale(1.1);
  }
}

@keyframes gradient-move-2 {
  0%, 100% {
    transform: translate(50%, -50%) scale(1);
  }
  50% {
    transform: translate(40%, -40%) scale(1.1);
  }
}

@keyframes gradient-move-3 {
  0%, 100% {
    transform: translate(50%, 50%) scale(1);
  }
  50% {
    transform: translate(40%, 40%) scale(1.1);
  }
}

/* Ícones decorativos */
.icon {
  position: absolute;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  z-index: 11;
  pointer-events: none;
}

.icon-zap {
  left: 2rem;
  top: 33.333%;
  width: 3.5rem;
  height: 3.5rem;
  color: rgba(255, 107, 107, 0.5);
}

@media (min-width: 1024px) {
  .icon-zap {
    left: auto;
    right: 25%;
    top: 30%;
  }
}

.icon-star {
  right: 2rem;
  top: 25%;
  width: 3rem;
  height: 3rem;
  color: rgba(255, 206, 84, 0.5);
}

@media (min-width: 1024px) {
  .icon-star {
    right: 20%;
    top: 20%;
  }
}

.icon-heart {
  right: 3rem;
  bottom: 33.333%;
  width: 3.5rem;
  height: 3.5rem;
  color: rgba(236, 72, 153, 0.5);
}

@media (min-width: 1024px) {
  .icon-heart {
    right: 15%;
    bottom: 30%;
  }
}

.icon-sparkle {
  color: rgba(168, 85, 247, 0.5);
}

@media (min-width: 1024px) {
  .icon-sparkle {
    left: auto !important;
    right: 22% !important;
    top: 55% !important;
  }
}

.icon-circle {
  color: rgba(59, 130, 246, 0.5);
}

@media (min-width: 1024px) {
  .icon-circle {
    left: auto !important;
    right: 18% !important;
    bottom: 25% !important;
  }
}

/* Animações */
@keyframes icon-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes icon-float {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-12px) translateX(6px) rotate(5deg);
  }
  66% {
    transform: translateY(6px) translateX(-6px) rotate(-5deg);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.icon-pulse {
  animation: icon-pulse 4s ease-in-out infinite;
}

.icon-float {
  animation: icon-float 6s ease-in-out infinite;
}

.icon-pulse.icon-float {
  animation: icon-pulse 4s ease-in-out infinite, icon-float 6s ease-in-out infinite;
}

/* Conteúdo principal */
.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 28rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 2rem;
  padding: 3rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: bounce-in 0.8s ease-out;
}

@media (min-width: 768px) {
  .content {
    max-width: 32rem;
    background: rgba(255, 255, 255, 0.9);
  }
}

@media (min-width: 1024px) {
  .content {
    width: 40%;
    max-width: none;
    height: 100vh;
    justify-content: center;
    border-radius: 0;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.95);
    margin-left: auto;
  }
}

/* Logo */
.logo-container {
  margin-bottom: 2.5rem;
  animation: bounce-in 0.8s ease-out 0.2s both;
}

.logo {
  height: 5rem;
  width: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05) rotate(2deg);
}

@media (min-width: 768px) {
  .logo {
    height: 6rem;
  }
}

/* Texto principal */
h1 {
  font-size: 2.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  animation: bounce-in 0.8s ease-out 0.3s both;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 2.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #18c698 0%, #10b981 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  animation: bounce-in 0.8s ease-out 0.4s both;
}

@media (min-width: 768px) {
  h2 {
    font-size: 3rem;
  }
}

/* Descrição */
.description {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 3rem;
  line-height: 1.625;
  font-weight: 400;
  animation: bounce-in 0.8s ease-out 0.5s both;
}

@media (min-width: 768px) {
  .description {
    font-size: 1rem;
  }
}

/* Botão CTA */
.cta-button {
  background: linear-gradient(135deg, #18c698 0%, #10b981 50%, #3b82f6 100%);
  color: white;
  padding: 1.125rem 2.5rem;
  border-radius: 1.5rem;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 30px rgba(24, 198, 152, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  animation: bounce-in 0.8s ease-out 0.6s both;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 40px rgba(24, 198, 152, 0.4), 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cta-button:active {
  transform: translateY(0) scale(0.98);
}

.cta-button svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}

.cta-button:hover svg {
  transform: translateX(4px);
}

/* Texto abaixo do botão */
.footer-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(24, 198, 152, 0.8);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: bounce-in 0.8s ease-out 0.7s both;
}

.footer-text svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #18c698;
  animation: icon-pulse 2s ease-in-out infinite;
}

/* iOS viewport height fix */
@supports (height: 100dvh) {
  .splash-container {
    min-height: 100dvh;
  }
}

@supports (-webkit-touch-callout: none) {
  .splash-container {
    min-height: -webkit-fill-available;
  }
}