* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Days One", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: #02021e;
  color: white;
}

header {
  position: fixed;
  width: 100%;
  background: rgba(2,2,30,0.9);
  backdrop-filter: blur(4px);
  padding: 15px 0;
  z-index: 999;
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo { display: flex; align-items: center; gap: 15px; }
.logo h1 { font-size: 26px; }
.logo span { color: #00eeff; }
.logo small { display: block; width: 100%; color: #aaa; font-size: 12px !important; }
.logo img { width: 60px; }
.logo-presentation { max-width: 30vw; max-height: 20vh; }
.logo-presentation-pmi { display: flex; justify-content: center; margin-top: 100px; }

header nav a {
  color: #fff;
  margin-left: 15px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  display: initial;
}

section {
  min-height: 100vh;
  padding: 120px 20px;
}

.hero {
  background: linear-gradient(135deg, #02021e, #090947);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.animated-bg {
  position:absolute;
  width:100%;
  height:100%;
  background: radial-gradient(circle at 20% 20%, #00d4ff44, transparent 40%),
              radial-gradient(circle at 80% 80%, #0a8cff44, transparent 40%);
  animation: moveBg 12s linear infinite alternate;
}

@keyframes moveBg {
  0% { transform: scale(1) translate(0,0);}
  100% { transform: scale(1.3) translate(-50px, -50px);}
}

.hero .content {
  z-index:10;
}

.hero h2 { font-size: 48px; color: #00d4ff; font-size: clamp(35px, 5vw, 48px); }
.hero p  { font-size: 24px; margin: 10px 0; }
.hero span { margin-bottom:20px; display:block; color:#ccc; }

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: #00d4ff;
  color: #02021e;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
}

.bg-light { background: #0c0c2c; }
.bg-dark  { background: #02021e; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
  margin-top: 30px;
}

.card {
  background:#0c0c2c;
  border:1px solid #1f1f75;
  padding:20px;
  border-radius:10px;
}

.card h3 { color:#00d4ff; margin:10px 0; }

.icon-circle {
  font-size:40px;
}

.list li {
  margin:10px 0;
  font-size:18px;
}

input, textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #1f1f75;
  background:#0c0c2c;
  color:white;
}

button {
  padding: 12px;
  border: none;
  background: #00d4ff;
  color: #02021e;
  font-weight: bold;
  border-radius:5px;
  cursor:pointer;
}

footer {
  text-align:center;
  padding:20px;
  background:#000;
  color:#aaa;
}

/* BOTÃO WHATSAPP */
.whatsapp-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #25d366;
  color: white;
  font-size: 24px;
  padding: 15px 18px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 0 15px #000;
}

/* SCROLL EFFECT */
.reveal {
  opacity:0;
  transform: translateY(50px);
  transition: 1s;
}

.reveal.active {
  opacity:1;
  transform: translateY(0);
}

/* Animação premium - HOME */

.hero {
  background: linear-gradient(135deg, #02021e, #090947);
  position: relative;
  animation: bgIn 1.2s ease forwards;
}

@keyframes bgIn {
  0% { filter: brightness(0.3); }
  100% { filter: brightness(1); }
}

.hero .content {
  text-align: center;
}

/* 1 - Título */
.hero-title {
  opacity: 0;
  transform: translateY(40px);
  animation: titleIn 1s ease forwards;
  animation-delay: .3s;
}

@keyframes titleIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2 - Slogan */
.hero-slogan {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 1.3s;
}

/* 3 - Subtexto */
.hero-sub {
  display: block;
  opacity: 0;
  margin: 15px 0 25px;
  color: #ccc;
  font-size: 18px;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2s;
}

/* 4 - Botão */
.hero-btn {
  opacity: 0;
  animation:
     fadeIn 1s ease forwards 2.6s,
     pulse 1.5s infinite 3.5s;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,212,255,0.6); }
  70% { box-shadow: 0 0 0 15px rgba(0,212,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,212,255,0); }
}

.white {
  color: #ffffff !important;
}

.blue {
  color: #00d4ff !important;
}

.hero-title {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
}

.mbottom{
    margin-bottom: 15px;
}

.mbottomplus{
  margin-top: -20px !important;
  margin-bottom: 40px !important;
}

p{
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
}

.div-form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.instagram-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: white;
  z-index: 999;
  box-shadow: 0 0 15px rgba(214,41,118,0.8);
}


@media (max-width: 400px) {
    header nav a {
        color: #fff;
        margin-left: 15px;
        text-decoration: none;
        font-weight: bold;
        font-family: "Saira Condensed", sans-serif;
        font-weight: 300;
        display: none;
    }

    p{
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 300;    
      font-size: 20px;
    }

    .logo-presentation-pmi { display: flex; justify-content: center; margin-top: 20px; }

    .logo-presentation-pmi img{
      max-width: 70vw;
      max-height: 50vh;
    }
}