/*
====================================================
BLINDAJE DIGITAL v1.0
Landing Oficial
Autor: Mizael Nunes
====================================================
*/

:root {
  --bg: #081321;
  --bg-secondary: #10213a;
  --surface: #16263f;

  --primary: #1565c0;
  --primary-hover: #1976d2;

  --success: #2e7d32;
  --warning: #fb8c00;
  --danger: #d32f2f;

  --text: #ffffff;
  --text-muted: #b8c4d6;

  --border: #29486c;

  --radius: 20px;

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 18px 48px rgba(21, 101, 192, 0.3);

  --transition: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--text);

  background:
    radial-gradient(circle at top, rgba(21,101,192,.18), transparent 40%),
    linear-gradient(180deg,#06101d,#081321,#0f1d33);
}

#background{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

main.container-xxl{

  flex:1;

  display:flex;

  align-items:center;

  justify-content:center;

  padding-top:40px!important;

  padding-bottom:30px!important;

}

.app-container{

  width:100%;

  max-width:1400px;

  margin:auto;

}

/* HERO */

.hero{

  max-width:1000px;

  margin:0 auto 22px;

  text-align:center;

}

.hero .badge{

  padding:.75rem 1.6rem!important;

  font-size:.95rem;

  font-weight:700;

  letter-spacing:.5px;

  border-radius:999px;

  box-shadow:0 10px 25px rgba(21,101,192,.35);

}

.hero h1{

  font-size:clamp(3.4rem,7vw,6rem);

  font-weight:800;

  line-height:1.05;

  letter-spacing:-3px;

  margin:18px 0;

}

.hero .lead{

  max-width:760px;

  margin:auto;

  font-size:1.35rem;

  color:var(--text-muted);

}

.status{

  display:none;

}

/* TIPOGRAFIA */

h1,h2,h3,h4,h5{

  color:var(--text);

  font-weight:700;

}

p{

  color:var(--text-muted);

}

/* CAROUSEL */

#carouselSection{

  display:grid;

  grid-template-columns:70px 1fr 70px;

  gap:20px;

  align-items:center;

  margin:20px auto 10px;

}

#carouselCard{

  width:100%;

  display:flex;

  min-height:340px;

}

.carousel-nav{

  width:58px;

  height:58px;

  border:none;

  border-radius:50%;

  background:rgba(255,255,255,.08);

  color:#fff;

  font-size:1.8rem;

  cursor:pointer;

  transition:var(--transition);

  backdrop-filter:blur(12px);

  box-shadow:var(--shadow);

}

.carousel-nav:hover{

  background:var(--primary);

  transform:scale(1.08);

}

.aviso-card{

  width:100%;

  background:linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.08);

  border-radius:28px;

  box-shadow:var(--shadow);

  overflow:hidden;

  transition:var(--transition);

}

.aviso-card:hover{

  transform:translateY(-4px);

  box-shadow:var(--shadow-hover);

}

.card-body{

  padding:40px;

  display:flex;

  justify-content:center;

  flex-direction:column;

  height:100%;

}

.aviso-card i{

  width:72px;

  height:72px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  font-size:2rem;

  margin-bottom:24px;

  background:rgba(21,101,192,.18);

  color:var(--primary);

}

/* DOTS */

#carouselDots{

  display:flex;

  justify-content:center;

  gap:10px;

  margin-top:18px;

}

#carouselDots button{

  width:12px;

  height:12px;

  border:none;

  border-radius:50%;

  background:#4b5563;

  cursor:pointer;

  transition:.25s;

}

#carouselDots button.active{

  background:var(--primary);

  transform:scale(1.35);

}

/* BADGES */

.badge{

  font-weight:600;

}

/* BOTÕES */

.btn{

  border-radius:14px;

  transition:var(--transition);

}

.btn:hover{

  transform:translateY(-2px);

}

/* FILTROS */

#filtros{

  display:none;

}

/* FOOTER */

.footer{

  padding:30px 0;

  border-top:1px solid rgba(255,255,255,.06);

  text-align:center;

}

.footer-link{

  color:#fff;

  text-decoration:none;

  font-weight:600;

  transition:.25s;

}

.footer-link:hover{

  color:var(--primary);

}

/* MODAL */

.modal-content{

  background:var(--bg-secondary);

  border:1px solid rgba(255,255,255,.08);

  border-radius:22px;

}

.modal-header{

  border-bottom:1px solid rgba(255,255,255,.08);

}

.modal-footer{

  border-top:1px solid rgba(255,255,255,.08);

}

/* TOAST */

.toast{

  border-radius:16px;

  box-shadow:var(--shadow);

}

/* ====================================================
   RESPONSIVIDADE
==================================================== */

@media (max-height: 780px) {

  main.container-xxl{

    align-items:flex-start;

    padding-top:28px!important;

    padding-bottom:24px!important;

  }

}

@media (max-width:1200px){

  .app-container{

    max-width:1140px;

  }

  .hero{

    max-width:900px;

  }

  .hero h1{

    font-size:clamp(3rem,6vw,5rem);

  }

  #carouselCard{

    min-height:320px;

  }

}

@media (max-width:992px){

  main.container-xxl{

    align-items:flex-start;

    padding-top:30px!important;

  }

  .hero{

    margin-bottom:24px;

    max-width:820px;

  }

  .hero h1{

    font-size:clamp(2.8rem,8vw,4.5rem);

    letter-spacing:-2px;

  }

  .hero .lead{

    font-size:1.15rem;

    max-width:620px;

  }

  #carouselSection{

    grid-template-columns:60px 1fr 60px;

    gap:14px;

  }

  #carouselCard{

    min-height:300px;

  }

  .card-body{

    padding:34px;

  }

}

@media (max-width:768px){

  body{

    background:
      radial-gradient(circle at top,
      rgba(21,101,192,.20),
      transparent 45%),
      linear-gradient(
      180deg,
      #06101d,
      #081321,
      #0f1d33);

  }

  main.container-xxl{

    align-items:flex-start;

    padding-top:24px!important;

    padding-bottom:20px!important;

  }

  .hero{

    margin-bottom:20px;

  }

  .hero .badge{

    font-size:.82rem;

    padding:.60rem 1.2rem!important;

  }

  .hero h1{

    font-size:2.7rem;

    letter-spacing:-1px;

    margin:16px 0;

  }

  .hero .lead{

    font-size:1rem;

    line-height:1.6;

    padding:0 12px;

  }

  #carouselSection{

    grid-template-columns:48px 1fr 48px;

    gap:10px;

  }

  #carouselCard{

    min-height:260px;

  }

  .carousel-nav{

    width:46px;

    height:46px;

    font-size:1.35rem;

  }

  .card-body{

    padding:28px;

  }

  .aviso-card{

    border-radius:22px;

  }

  .aviso-card i{

    width:62px;

    height:62px;

    font-size:1.7rem;

    margin-bottom:18px;

  }

}

@media (max-width:576px){

  .hero{

    margin-bottom:18px;

  }

  .hero h1{

    font-size:2.2rem;

    line-height:1.05;

  }

  .hero .lead{

    font-size:.95rem;

  }

  #carouselSection{

    grid-template-columns:42px 1fr 42px;

    gap:8px;

  }

  .carousel-nav{

    width:40px;

    height:40px;

    font-size:1.2rem;

  }

  #carouselCard{

    min-height:240px;

  }

  .card-body{

    padding:22px;

  }

  .footer{

    padding:22px 0;

  }

  .footer small{

    font-size:.85rem;

  }

  .modal-content{

    border-radius:18px;

  }

}

@media (max-width:420px){

  .hero h1{

    font-size:2rem;

  }

  .hero .lead{

    font-size:.90rem;

  }

  .card-body{

    padding:20px;

  }

  .aviso-card i{

    width:56px;

    height:56px;

    font-size:1.5rem;

  }

}