/* Custom styles for i9mobile */
:root{
  --primary: #e11d48; /* tailwind rose-600 */
  --primary-700: #be123c;
}

body { 
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; 
}

/* ===== Navbar ===== */
.navbar .btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.text-primary, .badge-primary, .btn-outline-primary { color: var(--primary) !important; }
.btn-outline-primary { border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color:#fff !important; }
.badge-primary{ background: var(--primary) !important; }
.text-primary-soft{ color: var(--primary); }

/* ===== Hero Section ===== */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(255,255,255,.15), transparent 60%),
              linear-gradient(135deg, var(--primary), var(--primary-700));
}
.hero .hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(600px 300px at 30% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 400px at 80% 70%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}
.hero .phone { 
  max-width: 360px; 
  width: 100%; 
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); 
}

/* ===== Sections ===== */
.section{ padding: 72px 0; }
.section .h1 { font-weight: 800; }
.display-4, .display-5{ font-weight:800; }

/* ===== Pricing ===== */
.pricing .price{ font-weight: 800; }
.pricing.featured{
  border: 2px solid var(--primary);
  box-shadow: 0 12px 40px rgba(225,29,72,.15);
}

.badge-light{ background: #fff; color: #111; }
.badge-light.text-primary-soft{ color: var(--primary); }

/* ===== Phone mockup + carousel ===== */
.phone-frame { position: relative; display: inline-block; }
.phone-frame .phone { 
  width: 360px; 
  max-width: 100%; 
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); 
}

/* Medidas da tela interna do SVG (420x800):
   x = 52 (12.38%), y = 40 (5%), w = 316 (75.24%), h = 720 (90%) */
.phone-frame .phone-screen{
  position: absolute;
  top: 5%;
  left: 12.38%;
  width: 75.24%;
  height: 90%;
  border-radius: 38px;
  overflow: hidden;
}

/* Ajusta imagens do carrossel dentro da tela */
.object-cover{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Esconde setas e indicadores do Bootstrap no hero */
#screensCarousel .carousel-control-prev,
#screensCarousel .carousel-control-next,
#screensCarousel .carousel-indicators { 
  display: none; 
}