.hero{
  width:100%;
  min-height:100vh;
  padding-top:96px;
  background:#252525;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
}

/* GRID TECH BACKGROUND */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.4;
}

/* GLOW */
.hero::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:#0d6efd;
  filter:blur(140px);
  opacity:.25;
  top:-200px;
  right:-200px;
  animation:pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{
    opacity:.25;
    transform:scale(1);
  }
  50%{
    opacity:.45;
    transform:scale(1.15);
  }
}

.hero-inner{
  width:100%;
  max-width:80%;
  margin:0 auto;
  position:relative;
  z-index:2;

  min-height:calc(100vh - 96px);
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:center;
}

/* ===============================
   TEXTO
================================ */

.hero-kicker{
  color:#0d6efd;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:18px;
}

.hero h1{
  font-size:62px;
  font-weight:900;
  line-height:1.05;
  color:#fff;
  margin-bottom:26px;
}

.hero p{
  font-size:18px;
  line-height:1.7;
  color:#d0d0d0;
  max-width:520px;
  margin-bottom:40px;
}

/* ===============================
   AÇÕES
================================ */

.hero-actions{
  display:flex;
  gap:18px;
}

.btn-primary{
  padding:18px 38px;
  background:#0d6efd;
  color:#fff;
  border-radius:10px;
  font-weight:700;
  transition:transform .3s ease, box-shadow .3s ease;
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(13,110,253,.45);
}

.btn-outline{
  padding:18px 38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-weight:700;
  transition:background .3s ease;
}

.btn-outline:hover{
  background:rgba(255,255,255,.08);
}

/* ===============================
   VISUAL
================================ */

.hero-visual{
  background:#1f1f1f;
  border-radius:18px;
  padding:36px;
  border:1px solid rgba(255,255,255,.06);
}

.hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.hero-stat{
  background:#252525;
  border-radius:14px;
  padding:24px;
  border:1px solid rgba(255,255,255,.05);
  transition:transform .3s ease;
}

.hero-stat:hover{
  transform:translateY(-6px);
}

.hero-stat strong{
  font-size:26px;
  color:#0d6efd;
  display:block;
}

.hero-stat span{
  font-size:13px;
  color:#aaa;
}

/* ===============================
   ANIMAÇÃO ENTRADA
================================ */

.hero-content,
.hero-visual{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}

.hero-content.show,
.hero-visual.show{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   MOBILE
================================ */

@media(max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-actions{
    flex-direction:column;
    align-items:center;
  }
}