:root{
  --violet:#6A00B8;      /* novo roxo principal escuro */
  --violet-2:#53009A;    /* novo roxo secundário profundo */
  --violet-3:#2A004F;    /* roxo quase preto premium */

  --magenta: var(--violet);
  --magenta-soft: var(--violet-2);

  --ink:#050014;
  --navy:#140021;
  --text:#FDFBFF;
  --muted:#E4C9FF;
  --muted-2:#C7A3F5;

  --card:#160429;
  --card-2:#1E0538;
  --line:#3E165E;

  --shadow:0 22px 56px rgba(0,0,0,.70);

  /* fundo geral corrigido com roxo escuro */
  --grad-page:
    radial-gradient(900px 600px at -10% -25%, rgba(106,0,184,.22) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% -15%, rgba(83,0,154,.26) 0%, transparent 65%),
    linear-gradient(180deg,#050014 0%,#120020 45%,#050014 100%);

  /* gradiente de texto e botões atualizado */
  --grad-brand: linear-gradient(90deg,#6A00B8,#53009A,#2A004F);
}


/* BASE */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--grad-page);
  min-height:100vh;
}

/* HEADER */
.bg-header{
  background:
    radial-gradient(900px 360px at -15% -120%, rgba(105, 3, 76, 0.3) 0%, transparent 80%),
    radial-gradient(900px 360px at 115% -120%, rgba(162,56,232,.34) 0%, transparent 80%),
    linear-gradient(180deg, rgba(10,0,30,.96) 0%, rgba(5,0,20,.94) 100%);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
}
.logo-header{height:130px;
width: 150px;}
.navbar-nav .nav-link{
  font-weight:500;
  color:#fdfbff;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  color:#ffffff;
}

/* BOTÕES */
.btn-pill{
  border-radius:999px;
}
.btn-primary-grad{
  background:linear-gradient(90deg, #8A00FF, #B300FF);
  border:none;
  color:#fff;
  transition: .2s ease-in-out;
}
.btn-primary-grad:hover{
  filter:brightness(1.08);
  box-shadow:0 10px 26px rgba(138, 0, 255, .35);
  color:#fff;
}


/* CARROSSEL */
.carousel-wrapper{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
.carousel-img{
  height:400px;
  object-fit:cover;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter:drop-shadow(0 0 10px rgba(0,0,0,.8));
}
.carousel-indicators [data-bs-target]{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
}
.carousel-indicators .active{
  background:var(--violet);
}

/* HERO */
.hero-section{
  padding-top:3rem;
}
.hero-title{
  font-size:3rem;
  line-height:1.1;
}
.grad{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tag{
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--muted-2);
}
.hero-sub{
  color:var(--muted);
  max-width:520px;
}
.hero-badges span{
  border-radius:999px;
  background:#1A0835;
  border:1px solid #7020A9;
  padding:.45rem .9rem;
  font-size:.82rem;
}
.hero-card{
  background:
    radial-gradient(circle at top, rgba(177, 10, 129, 0.28), transparent 60%),
    radial-gradient(circle at bottom, rgba(162,56,232,.28), transparent 60%),
    var(--card);
  border-radius:22px;
  padding:20px 22px;
  border:1px solid var(--line);
}

/* SEÇÕES */
.section-title{
  font-size:2.1rem;
}
.section-alt{
  background:transparent;
}

/* LISTAS / TICKS */
.ticks{
  list-style:none;
  padding:0;
  margin:1rem 0;
  color:#F9E9FF;
}
.ticks li{
  margin-bottom:.35rem;
}
.ticks i{
  color:var(--violet);
  margin-right:.4rem;
}

/* QUEM SOMOS */
.about-card{
  position:relative;
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(126, 8, 92, 0.35), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(162,56,232,.32), transparent 60%),
    #160429;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  height:320px;
}
.about-highlight{
  position:absolute;
  bottom:18px;
  right:18px;
  background:rgba(10,0,28,.92);
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--violet);
}
.about-number{
  margin:0;
  font-weight:800;
  font-size:1.2rem;
}
.about-label{
  margin:2px 0 0;
  font-size:.8rem;
  color:var(--muted-2);
}

/* SERVIÇOS */
.service-card{
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--line);
  padding:18px;
  box-shadow:var(--shadow);
  transition:.2s ease;
}
/* ======== AJUSTES DE ORGANIZAÇÃO PARA OS SERVIÇOS AGREGADOS ======== */

#servicos .service-card {
  height: 100%;
  min-height: 260px; /* deixa todos iguais */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px;
}

#servicos .service-card img.service-icon,
#servicos .service-card i.service-icon {
  margin-bottom: 12px;
  align-self: flex-start;
}

#servicos .service-card h5 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 6px;
}

#servicos .service-card p {
  margin-top: auto; /* empurra o texto para equilibrar o card */
  font-size: .92rem;
  line-height: 1.35;
}

.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--magenta);
  background:var(--card-2);
}
.service-icon{
  width:80px;
  height:auto;
  object-fit:contain;
}

/* APP */
.app-mock{
  border-radius:26px;
  padding:20px 18px;
  border:1px solid var(--line);
  width:100%;
  max-width:260px;
  height:380px;
  margin-inline:auto;
  background:
    radial-gradient(circle at top, rgba(112, 8, 83, 0.28), transparent 60%),
    var(--card);
}
.app-title{
  font-weight:700;
}

/* PLANOS */
.plan-card{
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--line);
  padding:22px 20px;
  box-shadow:var(--shadow);
  position:relative;
}
.badge-top{
  position:absolute;
  top:16px;
  right:16px;
  background:var(--violet);
  color:#140021;
  font-size:.7rem;
  border-radius:999px;
  padding:.25rem .6rem;
  font-weight:700;
}
.price strong{
  font-size:1.7rem;
}
.text-magenta { color: var(--violet-2); }


/* BUILDER */
.builder-card{
  background:var(--card);
  border-radius:22px;
  border:1px solid var(--line);
  padding:26px 22px;
  box-shadow:var(--shadow);
}
.builder-option{
  background:#22073D;
  border:1px solid #4D1B77;
   display: flex;
  align-items: center;
  gap: 10px;
  padding: .55rem .75rem;
  font-size: .93rem;
}
.builder-option input[type="radio"],
.builder-option input[type="checkbox"] {
  transform: scale(1.2); /* aumenta o tamanho dos inputs */
}

#builder .row.g-2 > div {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#builder .form-check {
  margin-bottom: 6px;
}

#builder label {
  cursor: pointer;
}

/* Mantém o grid dos serviços agregados em 2 colunas perfeitas */
#builder .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.form-control-dark{
  background:#22073D;
  border-radius:12px;
  border:1px solid #4D1B77;
  color:#FDFBFF;
}
.form-control-dark:focus{
  border-color:var(--magenta);
  box-shadow:0 0 0 3px rgba(120, 6, 88, 0.32);
}
.form-check-input{
  accent-color:var(--magenta);
}

/* COBERTURA / LOJAS */
.map-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#060C44;
  aspect-ratio:16/9;
}
.contact-card{
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--line);
  padding:18px;
  box-shadow:var(--shadow);
}
.loja-tabs .nav-link{
  border-radius:999px;
  padding:.45rem 1.2rem;
  border:1px solid #5D2B8F;
  color:#FDFBFF;
  background:#18042F;
}
.loja-tabs .nav-link.active{
 background:linear-gradient(90deg,var(--violet),var(--violet-2)); 
  border-color:transparent;
  color:#140021;
}

/* FOOTER */
.footer{
  border-top:1px solid #301247;
  background:
    radial-gradient(900px 480px at -12% -40%, rgba(255,0,184,.36) 0%, transparent 70%),
    radial-gradient(900px 480px at 112% -40%, rgba(162,56,232,.34) 0%, transparent 72%),
    #050014;
}
.footer-logo{height:44px;}
.footer-links a{
  color:#F9E9FF;
  text-decoration:none;
  margin-right:12px;
}
.footer-links a:hover{
  color:#ffffff;
}
.footer-social a{
  color:#F9E9FF;
  margin-left:10px;
  font-size:1.3rem;
}
.footer-social a:hover{color:#ffffff;}

/* FLUTUANTES */
.fab-whats{
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#22C55E;
  color:#fff;
  border-radius:50%;
  box-shadow:0 14px 30px rgba(0,0,0,.85);
  text-decoration:none;
  z-index:1050;
  font-size:1.6rem;
}
.fab-top{
  position:fixed;
  right:18px;
  bottom:86px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#18042F;
  color:#F9E9FF;
  border-radius:50%;
  border:1px solid #5D2B8F;
  box-shadow:0 10px 22px rgba(0,0,0,.8);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:1050;
}
.fab-top.show{
  opacity:1;
  pointer-events:auto;
}

/* RESPONSIVO */
@media (max-width: 992px){
  .hero-title{font-size:2.4rem;}
  .carousel-img{height:150px;}
}
@media (max-width: 768px){
  .logo-header{height:100px;}
  .carousel-img{
    height:auto;
    max-height:520px;
    object-fit:contain; /* usa arte mobile inteira */
  }
  .hero-section{padding-top:2rem;}
}

/* =========================================
   Correção de textos apagados no tema roxo
   ========================================= */

/* Força o "text-muted" do Bootstrap a ser visível no fundo escuro */
.text-muted {
  color: var(--muted) !important;
}

/* Força textos pequenos ficarem brancos */
.small,
small {
  color: var(--text) !important;
}

/* Captura elementos herdados pelo Bootstrap */
p,
span,
label {
  color: var(--text);
}

/* Caso algum texto dentro de cards fique apagado */
.card,
.plan-card,
.service-card,
.contact-card,
.builder-card {
  color: var(--text);
}


/* ================================
   CAROUSEL INDICATORS – versão premium
   ================================ */

.carousel-indicators {
  bottom: 12px; /* sobe um pouco as bolinhas */
}

.carousel-indicators [data-bs-target] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35); 
  border: none;
  transition: all 0.25s ease-in-out;
  margin: 0 4px;
}

.carousel-indicators .active {
  width: 18px;       /* vira uma pílula elegante */
  border-radius: 999px;
  background: var(--magenta);  /* segue o branding */
  opacity: 1;
}

.video-card {
  border-radius: 22px;
  overflow: hidden;
  background: 
    radial-gradient(circle at top, rgba(255,0,184,.15), transparent 60%),
    radial-gradient(circle at bottom, rgba(162,56,232,.20), transparent 60%),
    #160429;
  border: 1px solid var(--line);
  padding: 0;
}

/* ======== APP - CELULAR ESTILIZADO (VERSÃO AINDA MAIOR) ======== */
.app-phone-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CELULAR MUITO MAIOR – ESTILO PÁGINA PREMIUM */
.app-phone-img {
  width: 100%;
  max-width: 820px;      /* ← AUMENTADO */
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .85));
  animation: floatPhone 4s ease-in-out infinite;
  transform: scale(1.25); /* ← MAIS VISÍVEL */
}

/* Animação leve */
@keyframes floatPhone {
  0%   { transform: translateY(0) scale(1.25); }
  50%  { transform: translateY(-22px) scale(1.25); }
  100% { transform: translateY(0) scale(1.25); }
}

/* MOBILE – também grande, mas sem quebrar */
@media (max-width: 768px) {
  .app-phone-img {
    max-width: 560px;    /* ← MAIOR NO MOBILE */
    margin-top: 25px;
    transform: scale(1.30); /* destaque máximo no mobile */
  }
}

/* =========================
   FEEDBACKS (SLIDE) - PREMIUM
   ========================= */

/* Card externo do bloco */
.feedback-card{
  background:
    radial-gradient(circle at top, rgba(177, 10, 129, 0.18), transparent 60%),
    radial-gradient(circle at bottom, rgba(162,56,232,.18), transparent 60%),
    var(--card);
  border-radius:22px;
  padding:18px 16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* Wrapper do "carrossel" de feedbacks */
.feedback-carousel{
  border-radius:18px;
  overflow:hidden;
  border:1px solid #4D1B77;
  background:#120020;
  padding: 10px;
}

/* Área interna do slide */
.feedback-carousel .carousel-inner{
  border-radius:14px;
}

/* Cada slide centralizado */
.feedback-carousel .carousel-item{
  padding: 10px 8px;
}

/* Imagem do feedback */
.feedback-slide-img{
  display:block;
  width: 100%;
  max-width: 920px; /* mantém premium no desktop */
  height: auto;
  margin: 0 auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  background:#0b0017;
}

/* Botões prev/next: vira "pílula/círculo" premium */
.feedback-carousel .carousel-control-prev,
.feedback-carousel .carousel-control-next{
  width: 52px;
  opacity: 1;
}

.feedback-carousel .carousel-control-prev-icon,
.feedback-carousel .carousel-control-next-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: rgba(24, 4, 47, .85);
  border: 1px solid #5D2B8F;
  box-shadow:0 10px 22px rgba(0,0,0,.75);
  background-size: 55% 55%;
  filter: none;
}

/* Hover premium */
.feedback-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.feedback-carousel .carousel-control-next:hover .carousel-control-next-icon{
  filter: brightness(1.08);
  border-color: var(--magenta);
}

/* Indicadores (bolinhas) do carousel só desse bloco */
.feedback-carousel .carousel-indicators{
  bottom: 6px;
  margin-bottom: 0;
}

.feedback-carousel .carousel-indicators [data-bs-target]{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  border: none;
  transition: all 0.25s ease-in-out;
  margin: 0 4px;
}

.feedback-carousel .carousel-indicators .active{
  width: 18px;
  border-radius: 999px;
  background: var(--magenta);
  opacity: 1;
}

/* Mobile: imagem um pouco menor e respiro */
@media (max-width: 768px){
  .feedback-carousel{
    padding: 8px;
  }
  .feedback-carousel .carousel-item{
    padding: 8px 6px;
  }
  .feedback-slide-img{
    max-width: 100%;
  }
  .feedback-carousel .carousel-control-prev,
  .feedback-carousel .carousel-control-next{
    width: 44px;
  }
  .feedback-carousel .carousel-control-prev-icon,
  .feedback-carousel .carousel-control-next-icon{
    width: 38px;
    height: 38px;
  }
}