@charset "UTF-8";
/* CSS Document */

/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

html, body {
    font-family: "Montserrat", sans-serif !important;
}
button, a, h1, h2, h3, h4, h5, h6 {
    font-family: "Titillium Web", sans-serif !important;
}
body {
    background: #000000;
}
/* Reset */

/* Header */
header.header {
    background: url("../img/bg-hero.webp") 50% 0 no-repeat;
    padding: 75px 0  400px 0;
}
.header .hero {
    clear: both;
    display: block;
    width: 50%;
    float: left;
}
.header .hero span {
    clear: both;
    display: block;
    float: left;
    padding: 10px 25px;
    margin: 0 0 15px 0;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.header .hero span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;    
}
.header .hero h1 {
    clear: both;
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 35px auto;
}
.header .hero h1 i {
    color: #59F370;
}
.header .hero h1 u {
    color: #db3a3a;
}
.header .hero h2 {
    color: #ffffff;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 25px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.header .hero h2 u {
    color: #59F370;
}
.header .hero ul {
    margin: 0 auto 45px auto;
    padding-left: 15px;
}
.header .hero ul li {
    list-style: none;
    font-size: 18px;
    color: #c859f4;
    margin: 10px 0;
}
.header .hero ul li svg {
    width: auto;
    height: 25px;
    margin: -5px 0 0 0;
}
button.cta, a.cta {
    clear: both;
    display: block;
    background-color: #61CE70;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    fill: #FFFFFF;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    padding: 25px 35px;
    margin: 0;
    border: none;
    background: linear-gradient(106deg, #59F370 1.19%, #158828 89.9%);
    box-shadow: 0px 0px 111px 0px #43D059;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
}
.glow-on-hover {
    border: none;
    outline: none;
    position: relative;
    z-index: 0;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(106deg, #59F370 1.19%, #158828 89.9%);
    left: 0;
    top: 0;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
button.cta svg, a.cta svg {
    width: auto;
    height: 25px;
    margin: -5px 0 0 0;
}
/* Header */

/* Scanner */
.speed-indicator {
    display: none !important;
}
.containerscan {
    width: 100% !important;
    clear: both;
    display: block;
    overflow: hidden;
    margin: -100px auto 0 auto;
}
.card-line {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
}

.card-line.css-animated {
  animation: scrollCards 40s linear infinite;
}

@keyframes scrollCards {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

.card-wrapper {
  position: relative;
  width: 400px;
  height: 250px;
  flex-shrink: 0;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
}

.card-normal {
  background: transparent;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  color: white;
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
  filter: brightness(1.1) contrast(1.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.card-ascii {
  background: transparent;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
}
.ascii-content {
  width: 100%;
  height: 100%;
  color: rgba(220, 210, 255, 0.6);
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
  white-space: pre;
  clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
  animation: glitch 0.1s infinite linear alternate-reverse;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.2) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

@keyframes glitch {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0.9;
  }
  16% {
    opacity: 1;
  }
  49% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

.scanner {
  display: none;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 300px;
  border-radius: 30px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 255, 0.8),
    rgba(0, 255, 255, 1),
    rgba(0, 255, 255, 0.8),
    transparent
  );
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
  animation: scanPulse 2s ease-in-out infinite alternate;
  z-index: 10;
}

@keyframes scanPulse {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1.1);
  }
}

.scanner-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 255, 255, 0.9);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.card-normal {
  clip-path: inset(0 0 0 var(--clip-right, 0%));
}

.card-ascii {
  clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
}

.scan-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.4),
    transparent
  );
  animation: scanEffect 0.6s ease-out;
  pointer-events: none;
  z-index: 5;
}

@keyframes scanEffect {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

#particleCanvas {
  position: absolute;
  left: 0;
  transform: translateY(-10%);
  z-index: 0;
  pointer-events: none;
}

#scannerCanvas {
  position: absolute;
  left: -3px;
  transform: translateY(-10%);
  z-index: 15;
  pointer-events: none;
}
/* Scanner */

/* Stark */
section.stark {
    padding: 100px 0;
}
.stark span {
    clear: both;
    display: block;
    width: 12%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.stark span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.stark h1 {
    clear: both;
    display: block;
    text-align: center;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 15px auto;
}
.stark h2 {
    color: #ffffff;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 50px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.stark .box {
    padding: 50px 35px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#000000", GradientType=0);
    border: solid 1px #0f0f0f;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;      
}
.stark .box svg {
    clear: both;
    display: block;
    color: #C859F4;
    text-align: center;
    width: 55px;
    height: 55px;
    padding: 15px;
    margin: 0 auto 25px auto;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;   
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#C859F4", GradientType=0);    
}
.stark h3 {
    text-align: center;
    color: #c859f4;
    font-size: 22px;
    margin: 0 auto;
}
.stark ul {
    clear: both;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 50px auto;
}
.stark ul li {
    list-style: none;
    text-align: center;
    float: left;
    padding: 10px 25px;
    margin: 0 20px;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.stark ul li svg {
    width: auto;
    height: 20px;
    fill: #eb2525;
    margin: -3px 0 0 0;
}
.stark button {
    margin: 0 auto;
}
/* Stark */

/* Inteligência */
section.inteligencia {
    padding: 100px 0;
    background: url("../img/bg-all.webp") 50% 50% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.inteligencia span {
    clear: both;
    display: block;
    width: 27%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.inteligencia span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.inteligencia h1 {
    clear: both;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 15px auto;
}
.inteligencia h2 {
    color: #ffffff;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 50px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.inteligencia .agentes {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: normal;
    align-content: center;    
    padding: 40px 25px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#000000", GradientType=0);
    border: solid 1px #0f0f0f;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;  
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.inteligencia .agentes .box {
    width: 19%;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;      
}
.inteligencia .agentes .box svg {
    clear: both;
    display: block;
    color: #C859F4;
    text-align: center;
    width: 55px;
    height: 55px;
    padding: 15px;
    margin: 0 0 25px 0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#C859F4", GradientType=0);
}
.inteligencia h3 {
    color: #c859f4;
    font-size: 25px;
    margin: 0 auto 20px auto;
}
.inteligencia h4 {
    color: #c859f4;
    text-align: center;
    font-size: 25px;
    margin: 50px auto;
}
.inteligencia p {
    color: #ffffff;
    margin: 0;
}
.inteligencia button {
    margin: 0 auto;
}
/* Inteligência */

/* O que faz */
section.oquefaz {
    padding: 100px 0;
}
.oquefaz span {
    clear: both;
    display: block;
    width: 22%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.oquefaz span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.oquefaz h1 {
    clear: both;
    display: block;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 40px auto;
}
.oquefaz .box {
    padding: 50px 35px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#000000", GradientType=0);
    border: solid 1px #0f0f0f;
    margin: 0 auto 35px auto;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;       
}
.oquefaz .box svg {
    clear: both;
    display: block;
    color: #C859F4;
    text-align: center;
    width: 55px;
    height: 55px;
    padding: 15px;
    margin: 0 0 25px 0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#C859F4", GradientType=0);
}
.oquefaz h2 {
    color: #C859F4;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 20px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.oquefaz .box p {
    color: #ffffff;
    margin: 0;
}
.oquefaz h3 {
    color: #ffffff;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 35px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.oquefaz ul {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: normal;
    align-content: center;    
    padding: 0;
    margin: 24px auto 50px auto;
}
.oquefaz ul li {
    list-style: none;
    width: 40%;
    margin: 0 auto;
}
.oquefaz ul li p {
    list-style: none;
    font-size: 18px;
    color: #c859f4;
    margin: 15px auto;
}
.oquefaz ul li svg {
    width: auto;
    height: 25px;
    margin: -5px 0 0 0;
}
.oquefaz h4 {
    text-align: center;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.6;
    margin: 0 auto 50px auto;
}
.oquefaz button {
    margin: 0 auto;
}
/* O que faz */

/* Objetivo */
section.obejtivo {
    padding: 100px 0;
    background: url("../img/bg-all.webp") 50% 50% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.obejtivo span {
    clear: both;
    display: block;
    width: 18%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.obejtivo span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.obejtivo h1 {
    clear: both;
    display: block;
    width: 75%;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 40px auto;
}
.obejtivo .box1 {
    width: 95%;
    padding: 50px 30px;
    background: #ff3838;
    background: -webkit-linear-gradient(30deg, rgba(255, 56, 56, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    background: -moz-linear-gradient(30deg, rgba(255, 56, 56, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    background: linear-gradient(30deg, rgba(255, 56, 56, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF3838", endColorstr="#000000", GradientType=0);
    border: solid 1px #3e0606;
    margin: 0 auto 50px auto;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);    
    box-shadow: 0px 0px 115px 0px rgba(65,6,6,0.9);
}
.obejtivo ul {
    margin: 0 auto;
    padding: 0;
}
.obejtivo ul li {
    list-style: none;
    font-size: 18px;
    color: #ffffff;
    margin: 15px auto;
}
.obejtivo .box1 ul li svg {
    width: auto;
    height: 20px;
    fill: #eb2525;
    margin: -3px 0 0 0;
}
.obejtivo .box2 {
    width: 95%;    
    padding: 50px 30px;
    background: #35e66d;
    background: -webkit-linear-gradient(30deg, rgba(53, 230, 109, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    background: -moz-linear-gradient(30deg, rgba(53, 230, 109, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    background: linear-gradient(30deg, rgba(53, 230, 109, 0.35) 0%, rgba(0, 0, 0, 0.3) 45%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#35E66D", endColorstr="#000000", GradientType=0);
    border: solid 1px #043814;
    margin: 0 auto 50px auto;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);  
    box-shadow: 0px 0px 115px 0px rgba(4,56,20,0.9);
}
.obejtivo .box2 ul li svg {
    width: auto;
    height: 25px;
    margin: -5px 0 0 0;
}
.obejtivo h2 {
    color: #C859F4;
    font-size: 35px;
    line-height: 1.6;
    margin: 0 auto 20px auto;
    border-left: solid 5px #c859f4;
    padding-left: 15px;
}
.obejtivo button {
    margin: 0 auto;
}
/* Objetivo */

/* Bonus */
section.bonus {
    padding: 100px 0;
    background: #C859F4;
    background: -webkit-linear-gradient(0deg, rgba(200, 89, 244, 0.1) 5%, rgba(13, 13, 13, 1) 50%);
    background: -moz-linear-gradient(0deg, rgba(200, 89, 244, 0.1) 5%, rgba(13, 13, 13, 1) 50%);
    background: linear-gradient(0deg, rgba(200, 89, 244, 0.1) 5%, rgba(13, 13, 13, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#0D0D0D", GradientType=0);
}
.bonus span {
    clear: both;
    display: block;
    width: 18%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.bonus span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.bonus h1 {
    clear: both;
    display: block;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: 50px;
    margin: 0 auto 40px auto;
}
.bonus h1 i {
    padding: 8px 25px;
    font-size: 25px;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.bonus .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: normal;
    align-content: center;
    padding: 40px 25px;
    margin: 0 auto 25px auto;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#000000", GradientType=0);
    border: solid 1px #4f1964;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.bonus .box .copy {
    width: 85%;
    margin: 0 0 0 auto;
}
.bonus .box svg {
    clear: both;
    display: block;
    color: #C859F4;
    text-align: center;
    width: 12%;
    height: 12%;
    padding: 40px;
    margin: 0 auto 0 0;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#C859F4", GradientType=0);
}
.bonus .box .copy h2  {
    color: #C859F4;
    font-size: 35px;
    line-height: 1.6;
    margin: 0 auto 20px auto;
}
.bonus .box .copy h2 i {
    padding: 8px 25px;
    font-size: 18px;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.bonus .box .copy  p {
    color: #ffffff;
    font-size: 20px;
    margin: 0 auto;
}
.bonus .box.b3 {
    margin: 0 auto 50px auto;
}
.bonus button {
    margin: 0 auto;
}
/* Bonus */

/* Oferta */
canvas#particle-canvas {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
section.oferta {
    padding: 100px 0;
}
.oferta span {
    clear: both;
    display: block;
    width: 17%;
    text-align: center;
    padding: 10px 25px;
    margin: 0 auto 15px auto;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.oferta span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.oferta h1 {
    clear: both;
    display: block;
    text-align: center;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 60px;
    margin: 0 auto 15px auto;
}
.oferta h2 {
    color: #C859F4;
    font-size: 30px;
    width: 60%;
    text-align: center;
    margin: 0 auto 35px auto;
}
.oferta a.box {
    clear: both;
    display: block;
    padding: 40px 35px;
    text-decoration: none;
    width: 50%;
    margin: 0 auto;
    border: solid 1px #C859F4;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
    box-shadow: 0px 0px 100px 0px #C859F4;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.10) 0%, rgba(200, 89, 244, 0.15) 100%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.10) 0%, rgba(200, 89, 244, 0.15) 100%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.10) 0%, rgba(200, 89, 244, 0.15) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#C859F4", GradientType=0);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);    
}
.oferta a.box ul {
    padding: 0;
    margin: 0 auto 25px auto;
}
.oferta a.box ul li {
    color: #ffffff;
    font-size: 19px;
    list-style: none;
    margin: 25px 0;
}
.oferta a.box ul li svg {
    width: auto;
    height: 30px;
    margin: -5px 0 0 0;
}
.oferta a.box ul li i {
    padding: 5px 20px;
    color: rgb(200, 89, 244);
    border: 1px solid rgb(200, 89, 244);
    border-radius: 200px;
}
.oferta a.box ul li i.superb {
    padding: 5px 20px;
    color: #59F370;
    border: 1px solid #59F370;
    border-radius: 200px;
}
.oferta h3 {
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #c82626;
    text-decoration: line-through;
    margin: 15px auto 10px auto;
}
.oferta h4 {
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    color: #59F370;
    margin: 0 auto 10px auto;
}
.oferta h4 i {
    font-size: 35px;
    font-style: normal;
}
.oferta  h5 {
    font-size: 20px;
    color: #fafafa;
    text-align: center;
    margin: 0 auto 35px auto;
}
.oferta button {
    width: 100%;
    margin: 0 auto;
    font-size: 25px;
}
/* Oferta */

/* Garantia */
.oferta .garantia {
    display: flex;
    flex-flow: wrap;
    width: 50%;
    place-content: center;
    align-items: normal;
    padding: 40px 25px;
    margin: 35px auto 0 auto;
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgb(0, 0, 0) 40%);
    border: 1px solid rgb(79, 25, 100);
    border-radius: 35px;
    backdrop-filter: blur(12px);
}
.oferta .garantia svg {
    clear: both;
    display: block;
    color: #C859F4;
    text-align: center;
    width: 20%;
    height: 20%;
    padding: 25px;
    margin: 0px auto 0px 0px;
    border-radius: 35px;
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.25) 0%, rgba(200, 89, 244, 0.45) 100%);
}
.oferta .garantia .copy {
    width: 75%;
    margin: 0 0 0 auto;
}
.oferta .garantia .copy h6 {
    color: #C859F4;
    font-size: 30px;
    margin: 0 auto 15px auto;
}
.oferta .garantia .copy p {
    color: #ffffff;
    margin: 0;
}
/* Garantia */

/* João */
section.joao {
    padding: 100px 0;
    background: url("../img/bg-joao.webp") 50% 0 no-repeat;
}
.joao .copy {
    clear: both;
    display: block;
    width: 50%;
    float: right;
}
.joao .copy span {
    clear: both;
    display: block;
    float: left;
    padding: 10px 25px;
    margin: 0 0 15px 0;
    color: #c859f4;
    border: solid 1px #c859f4;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;    
}
.joao .copy span svg {
    width: auto;
    height: 20px;
    margin: -5px 0 0 0;
}
.joao .copy h1 {
    clear: both;
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 40px;
    margin: 0 auto 25px auto;
}
.joao .copy p {
    color: #ffffff;
}
.joao .copy h2, .joao .copy h3 {
    color: #c859f4;
    font-size: 25px;
    margin: 0 auto 20px auto;
}
.joao .copy ul {
    padding: 0;
}
.joao .copy ul li {
    color: #ffffff;
    margin: 5px 0;
    list-style: none;
    font-weight: 600;
}
/* João */

/* FAQ */
section.faq {
    padding: 100px 0;
}
.faq h1 {
    clear: both;
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    font-size: 50px;
    margin: 0 auto 50px auto;
}
.accordion-item {
    width: 75%;
	margin: 0 auto 15px auto; 
    background: transparent;
    border: none !important;
}
.accordion-header {
    padding: 25px 25px;
    color: #C859F4;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    background: #C859F4;
    background: -webkit-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: -moz-linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    background: linear-gradient(40deg, rgba(200, 89, 244, 0.2) 0%, rgba(0, 0, 0, 1) 40%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C859F4", endColorstr="#000000", GradientType=0);
    border: solid 1px #C859F4;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;      
}
.accordion-content {
	padding: 25px;
	display: none; /* Oculta o conteúdo inicialmente */
    background: transparent;
    color: #ffffff;
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;      
}
.arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}
.arrow svg {
    fill: #C859F4;
    width: auto;
    height: 30px;
}
.rotate {
	transform: translateY(-50%) rotate(90deg);
}
.active .accordion-content {
	display: block; /* Exibe o conteúdo quando o item está aberto */
}
/* FAQ */

/* Pronto */
section.pronto {
    padding: 100px 0;
    background: url("../img/bg-all.webp") 50% 50% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.pronto h1 {
    clear: both;
    display: block;
    text-align: center;
    width: 75%;
    color: #ffffff;
    font-weight: 700;
    font-size: 60px;
    margin: 0 auto 15px auto;
}
.pronto h2 {
    color: #C859F4;
    font-size: 30px;
    width: 75%;
    text-align: center;
    margin: 0 auto 50px auto;
}
.pronto a.cta {
    margin: 0 auto;
    font-size: 30px;
    width: 60%;
}
/* pronto */

/* Footer */
footer.footer {
    padding: 50px 0;
    background: #000000;
    border-top: solid 1px #C859F4;
}
.footer p {
    text-align: center;
    color: #C859F4;
    font-size: 12px;
    width: 75%;
    margin: 0 auto 10px auto;
}
/* Footer */

/* Responsivo */
@media (max-width: 700px) {
    /* Header */
    header.header {
        background: url("../img/bg-hero-mobile.webp") 50% bottom no-repeat;
        background-size: cover;
        padding: 35px 0 500px 0;
    }
    .header .hero, .joao .copy {
        width: 100%;
        float: none;
    }
    .header .hero span {
        text-align: center;
        font-size: 14px;
        float: none;
        padding: 10px;
        width: 100%;
        margin: 0 auto 15px auto;
    }
    .header .hero h1 {
        margin-bottom: 20px;
    }
    .header .hero h1, .stark h1, .inteligencia h1, .oquefaz h1, .obejtivo h1, .bonus h1, .oferta h1, .faq h1, .pronto h1, .joao .copy h1 {
        text-align: center;
        font-size: 30px;
        width: 100%
    }
    .header .hero h2, .stark h2, .inteligencia h2, .oquefaz h3 {
        font-size: 17px;
        width: 100%;
    }
    .header .hero ul {
        padding: 0;
        margin: 0 auto 30px auto;
    }  
    .header .hero ul li {
        font-size: 14px;
    }
    .header .hero ul li svg, button.cta svg, a.cta svg {
        width: 20px;
    }
    button.cta, a.cta {
        font-size: 18px;
        padding: 20px;
        width: 100%;
        clear: both;
        display: block;
    }    
    .containerscan {
        margin: -10px auto 0 auto;
    }    
    /* Header */
    
    /* Stark */
    section.stark, section.inteligencia, section.oquefaz, section.obejtivo, section.bonus, section.oferta, section.joao, section.faq, section.pronto {
        padding: 75px 0;
    }
    .stark span {
        width: 50%;
    }  
    .stark .box, .oquefaz .box {
        padding: 35px 25px;
        margin: 0 auto 25px auto;
    }
    .stark ul {
        display: block;
        margin: 0 auto 35px auto;
    }  
    .stark ul li {
        float: none;
        padding: 8px;
        margin: 15px auto;
        width: 70%;
    }    
    /* Stark */
    
    /* Inteligencia */
    .inteligencia span, .oquefaz span, .obejtivo span, .bonus span, .oferta span, .joao .copy span {
        width: 85%;
        text-align: center;
        margin: 0 auto 15px auto;
        float: none;
    }
    .inteligencia .agentes {
        padding: 25px 20px;
        display: block;
    } 
    .inteligencia .agentes .box {
        width: 100%;
        margin: 0 auto 20px auto;
    } 
    .inteligencia h4, .oquefaz h4, .oferta h2, .joao .copy h2, .joao .copy h3 {
        margin: 35px 0;
        font-size: 20px;
        width: 100%;
    }    
    /* Inteligencia */
    
    /* O que faz */
    .oquefaz ul {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .oquefaz ul li {
        width: 100%;
    }
    .oquefaz ul li p {
        font-size: 16px;
    }
    /* O que faz */
    
    /* Objetivo */
    .obejtivo .box1, .obejtivo .box2 {
        width: 100%;
        padding: 35px 20px;
        margin: 0 auto 25px auto;
    }
    /* Objetivo */
    
    /* Bonus */
    .bonus h1 i {
        display: none;
    }
    .bonus .box {
        padding: 35px 25px;
        display: block;
    }  
    .bonus .box svg, .oferta .garantia svg {
        width: 25%;
        height: 25%;
        padding: 22px;
        margin-bottom: 15px;
    }
    .bonus .box .copy {
        width: 100%;
        margin: 0;
    } 
    .bonus .box .copy h2 {
        font-size: 25px;
    }
    .bonus .box .copy h2 i {
        padding: 8px 15px;
        font-size: 18px;
    }
    /* Bonus */
    
    /* Oferta */
    .oferta a.box, .oferta .garantia {
        width: 100%;
        padding: 25px 15px;
    }
    .oferta a.box ul li {
        margin: 15px 0;
        font-size: 16px;
    }
    .oferta a.box ul li i, .oferta a.box ul li i.superb {
        padding: 2px 10px;
    }
    .oferta a.box ul li svg {
        height: 25px;
    }
    .oferta h3 {
        font-size: 30px;
    }
    .oferta h4 {
        font-size: 35px;
    }
    .oferta h4 i {
        font-size: 30px;
    }
    .oferta .garantia .copy {
        width: 70%;
        margin: 0 0 0 auto;
    }    
    /* Oferta */
    
    /* João */
    section.joao {
        background: url("../img/bg-joao-mb.webp") 50% -80px no-repeat;
        background-size: cover;
    }
    .joao .copy h1 {
        margin-bottom: 410px !important;
    }
    /* João */
    
    /* Faq */
    .accordion-item {
        width: 100%;
    }
    /* Faq */
    
    /* Pronto */
    .pronto h2 {
        width: 100%;
        font-size: 25px;
    }
    .pronto a.cta {
        width: 100%;
        font-size: 18px;
    }    
    /* Pronto */
    
    /* Footer */
    .footer p {
        width: 100%;
    }
    /* Footer */
}
/* Responsivo */