:root{
  --preto:#030507;
  --cinza:#11151a;
  --linha:#2b3138;
  --branco:#f4f6f8;
  --cinza-claro:#aeb5bf;
  --vermelho:#ef1d24;
  --vermelho-escuro:#b20c12;
  --verde:#20c765;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Inter",Arial,sans-serif;
  background:var(--preto);
  color:var(--branco);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1180px,92%);
  margin:auto;
}

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(3,5,7,.95);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(12px);
}

.header .container{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo{
  font-size:26px;
  font-weight:900;
  font-style:italic;
  color:var(--branco);
}

.logo span{
  color:var(--vermelho);
}

.header nav{
  display:flex;
  align-items:center;
  gap:24px;
}

.header nav a{
  font-size:14px;
  font-weight:700;
}

.header nav a:hover{
  color:var(--vermelho);
}

.central{
  padding:11px 16px;
  border-radius:8px;
  background:linear-gradient(
    135deg,
    var(--vermelho),
    var(--vermelho-escuro)
  );
  color:white!important;
}

.hero{
  position:relative;
  min-height:760px;
  padding-top:78px;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1s ease,transform 6s ease;
}

.hero-slide.ativo{
  opacity:1;
  transform:scale(1);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92),
      rgba(0,0,0,.55),
      rgba(0,0,0,.15)
    ),
    linear-gradient(
      0deg,
      var(--preto),
      transparent 34%
    );
}

.hero-conteudo{
  position:relative;
  z-index:3;
}

.hero-texto{
  max-width:600px;
}

.selo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid #8b949e;
  border-radius:999px;
  margin-bottom:24px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(50px,7vw,78px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-3px;
}

.hero h1 strong{
  display:block;
  color:var(--vermelho);
}

.hero p{
  margin:24px 0 30px;
  color:#d0d5dc;
  font-size:19px;
  max-width:560px;
}

.botoes{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 22px;
  border-radius:8px;
  font-weight:800;
  transition:.2s;
}

.botao:hover{
  transform:translateY(-2px);
}

.botao-vermelho{
  background:linear-gradient(
    135deg,
    var(--vermelho),
    var(--vermelho-escuro)
  );
  color:white;
}

.botao-whatsapp{
  background:linear-gradient(
    135deg,
    #28d76f,
    #0c9d46
  );
  color:white;
}

.botao-escuro{
  background:#171c22;
  border:1px solid #626b75;
  color:white;
}


.fibra{
  position:absolute;
  right:-8%;
  bottom:8%;
  width:65%;
  height:230px;
  z-index:2;
  overflow:hidden;
  transform:rotate(-8deg);
  pointer-events:none;
}

.fibra span{
  position:absolute;
  right:-20%;
  width:130%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    #008cff,
    #ffffff,
    #008cff,
    transparent
  );
  box-shadow:
    0 0 12px #008cff,
    0 0 28px #008cff;
  animation:moverFibra 4s linear infinite;
}

.fibra span:nth-child(1){
  top:20%;
}

.fibra span:nth-child(2){
  top:40%;
  animation-delay:-1s;
  background:linear-gradient(
    90deg,
    transparent,
    var(--vermelho),
    #ffffff,
    var(--vermelho),
    transparent
  );
  box-shadow:
    0 0 12px var(--vermelho),
    0 0 28px var(--vermelho);
}

.fibra span:nth-child(3){
  top:60%;
  animation-delay:-2s;
}

.fibra span:nth-child(4){
  top:80%;
  animation-delay:-3s;
  background:linear-gradient(
    90deg,
    transparent,
    var(--vermelho),
    #ffffff,
    var(--vermelho),
    transparent
  );
}

@keyframes moverFibra{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-30%);
  }

}

.seta{
  position:absolute;
  top:50%;
  z-index:6;
  width:48px;
  height:48px;
  transform:translateY(-50%);
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.48);
  color:white;
  font-size:24px;
  cursor:pointer;
}

.seta.esquerda{
  left:20px;
}

.seta.direita{
  right:20px;
}

.pontos{
  position:absolute;
  left:50%;
  bottom:32px;
  z-index:6;
  display:flex;
  gap:9px;
  transform:translateX(-50%);
}

.ponto{
  width:10px;
  height:10px;
  border:0;
  border-radius:50%;
  background:#8f969f;
  cursor:pointer;
}

.ponto.ativo{
  background:var(--vermelho);
  box-shadow:0 0 12px var(--vermelho);
}


.vantagens{
  position:relative;
  z-index:7;
  margin-top:-55px;
}

.vantagens-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid #343a41;
  border-radius:18px;
  background:linear-gradient(145deg,#171b20,#0d1014);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.vantagens-grid article{
  min-height:140px;
  padding:27px;
  display:flex;
  align-items:center;
  gap:18px;
  border-right:1px solid #30363d;
}

.vantagens-grid article:last-child{
  border-right:0;
}

.vantagens-grid i{
  font-size:42px;
  color:#d8dde3;
}

.vantagens-grid h3{
  font-size:15px;
  margin-bottom:5px;
}

.vantagens-grid p{
  color:var(--cinza-claro);
  font-size:13px;
}

.tecnologia{
  padding:120px 0 90px;
  background:
    radial-gradient(
      circle at 78% 50%,
      rgba(0,112,255,.16),
      transparent 30%
    ),
    #080b0f;
}

.tecnologia-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center;
}

.etiqueta{
  color:#c4c9d0;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.tecnologia h2,
.titulo-secao h2{
  margin:9px 0 17px;
  font-size:clamp(35px,5vw,51px);
  line-height:1.05;
  text-transform:uppercase;
}

.tecnologia h2 strong,
.titulo-secao h2 strong{
  display:block;
  color:var(--vermelho);
}

.tecnologia-texto > p,
.titulo-secao > p{
  color:var(--cinza-claro);
}

.tecnologia-beneficios{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
  margin-top:42px;
}

.tecnologia-beneficios article{
  padding-left:17px;
  border-left:2px solid #363d45;
}

.tecnologia-beneficios i{
  font-size:29px;
}

.tecnologia-beneficios h3{
  margin:7px 0 4px;
  font-size:15px;
}

.tecnologia-beneficios p{
  color:var(--cinza-claro);
  font-size:13px;
}


.fibra-visual{
  position:relative;
  height:470px;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(
      circle at 70% 50%,
      rgba(0,120,255,.25),
      transparent 35%
    ),
    linear-gradient(140deg,#07101a,#020407);
}

.fibra-visual span{
  position:absolute;
  right:-35%;
  width:140%;
  height:4px;
  border-radius:999px;
  transform:rotate(-13deg);
  background:linear-gradient(
    90deg,
    transparent,
    #008cff,
    #ffffff,
    #008cff,
    transparent
  );
  box-shadow:0 0 15px #008cff;
}

.fibra-visual span:nth-child(1){
  top:28%;
}

.fibra-visual span:nth-child(2){
  top:43%;
  background:linear-gradient(
    90deg,
    transparent,
    var(--vermelho),
    #ffffff,
    var(--vermelho),
    transparent
  );
  box-shadow:0 0 15px var(--vermelho);
}

.fibra-visual span:nth-child(3){
  top:58%;
}

.fibra-visual span:nth-child(4){
  top:73%;
  background:linear-gradient(
    90deg,
    transparent,
    var(--vermelho),
    #ffffff,
    var(--vermelho),
    transparent
  );
}

.planos{
  padding:95px 0;
  background:var(--preto);
}

.titulo-secao{
  margin-bottom:45px;
}

.planos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.plano{
  position:relative;
  min-height:500px;
  padding:31px 24px 25px;
  display:flex;
  flex-direction:column;
  border:1px solid #343a42;
  border-radius:14px;
  background:linear-gradient(145deg,#171b20,#0d1014);
}

.plano.destaque{
  border-color:var(--vermelho);
  box-shadow:0 0 35px rgba(239,29,36,.15);
}

.mais-procurado{
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:14px 14px 0 0;
  background:var(--vermelho);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.plano.destaque h3{
  margin-top:25px;
}

.plano h3{
  margin-bottom:13px;
  font-size:43px;
  line-height:1;
}

.plano h3 span{
  display:block;
  color:var(--vermelho);
  font-size:24px;
  text-transform:uppercase;
}

.plano > p{
  min-height:52px;
  color:#c3c8cf;
  font-size:14px;
}

.plano ul{
  flex:1;
  margin:18px 0 22px;
  padding:20px 0;
  border-top:1px solid #2f353d;
  list-style:none;
}

.plano li{
  margin:9px 0;
  font-size:13px;
}

.plano li::before{
  content:"✓";
  margin-right:8px;
  color:var(--verde);
  font-weight:900;
}

.plano .botao{
  width:100%;
}


.servicos{
  padding:30px 0 90px;
}

.servicos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.servico{
  padding:30px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:22px;
  align-items:center;
  border:1px solid #353b43;
  border-radius:15px;
  background:linear-gradient(145deg,#171b20,#0d1014);
}

.servico>i{
  font-size:46px;
  color:var(--vermelho);
}

.servico p{
  color:var(--cinza-claro);
}

footer{
  padding:65px 0 25px;
  background:#020304;
  border-top:1px solid #252a30;
}

.rodape-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr 1fr;
  gap:50px;
}

.rodape-grid h3{
  margin-bottom:15px;
  font-size:13px;
  text-transform:uppercase;
}

.rodape-grid a{
  display:block;
  margin:8px 0;
}

.rodape-grid p{
  margin-top:12px;
  color:#9da5af;
}

.direitos{
  margin-top:45px;
  padding-top:22px;
  border-top:1px solid #272c32;
  color:#777f89;
  font-size:12px;
}

.whatsapp-flutuante{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  font-weight:800;
}

.whatsapp-flutuante i{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--verde);
  font-size:31px;
}

.whatsapp-flutuante span{
  background:#0b9c47;
  padding:8px 12px;
  border-radius:20px;
  font-size:12px;
}

@media(max-width:1000px){

.planos-grid,
.vantagens-grid{
grid-template-columns:repeat(2,1fr);
}

.tecnologia-grid{
grid-template-columns:1fr;
}

.servicos-grid{
grid-template-columns:1fr;
}

.rodape-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.header nav{
display:none;
}

.hero h1{
font-size:44px;
}

.planos-grid,
.vantagens-grid,
.tecnologia-beneficios,
.rodape-grid{
grid-template-columns:1fr;
}

.servico{
grid-template-columns:1fr;
text-align:center;
}

.whatsapp-flutuante span{
display:none;
}

}