*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:#070a12;
  color:#f8fafc;
  line-height:1.6;
  overflow-x:hidden;
}

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

button{
  font:inherit;
}

.wrap{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.section{
  padding:110px 0;
  position:relative;
}

.muted,
.heading p,
.two>div>p{
  color:#8290a5;
  font-size:14px;
}

.heading{
  max-width:650px;
}

.heading.center{
  text-align:center;
  margin:0 auto 50px;
}

.eyebrow{
  display:block;
  color:#818cf8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  margin-bottom:15px;
}

.heading h2,
.two h2,
.ctaBox h2{
  font-size:clamp(34px,4.5vw,54px);
  line-height:1.06;
  letter-spacing:-.045em;
  margin:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:11px;
  padding:12px 18px;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(148,163,184,.16);
  transition:.25s;
  cursor:pointer;
}

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

.primary{
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  box-shadow:0 12px 30px #4f46e533;
}

.ghost{
  background:#ffffff05;
  border-color:#818cf833;
}

.big{
  padding:15px 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:600;
}

.brand>b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  font-size:10px;
}

.brand strong{
  font-weight:800;
}


/* HEADER */

header{
  height:76px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  transition:.25s;
}

header.scrolled{
  background:#070a12cc;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #ffffff0d;
}

.nav{
  height:76px;
  display:flex;
  align-items:center;
  gap:28px;
}

.nav nav{
  display:flex;
  gap:28px;
  margin-left:auto;
}

.nav nav a,
.actions>a:first-child{
  font-size:12px;
  color:#9aa7ba;
}

.actions{
  display:flex;
  align-items:center;
  gap:20px;
}

.actions .btn{
  font-size:11px;
  padding:10px 15px;
}


/* MOBILE MENU */

#menuBtn{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#menuBtn:active{
  transform:scale(.96);
}

#mobileMenu{
  display:none;
}

#mobileMenu.open{
  display:flex;
}


/* HERO */

.hero{
  padding:165px 0 60px;
  min-height:820px;
  background:
    radial-gradient(
      circle at 80% 25%,
      #4f46e51a,
      transparent 35%
    );
}

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

.heroText h1{
  font-size:clamp(50px,6vw,76px);
  line-height:.98;
  letter-spacing:-.06em;
  margin:0;
}

.heroText h1 span{
  display:block;
  color:#818cf8;
}

.heroText>p{
  max-width:570px;
  color:#9aa7ba;
  font-size:15px;
  line-height:1.85;
  margin:25px 0;
}

.heroBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.note{
  display:block;
  color:#657287;
  font-size:10px;
  margin-top:18px;
}

.note b{
  margin:0 7px;
  color:#334155;
}


/* DASHBOARD MOCKUP */

.dashboard{
  position:relative;
}

.browser{
  height:38px;
  background:#111722;
  border:1px solid #ffffff12;
  border-radius:18px 18px 0 0;
  display:flex;
  align-items:center;
  padding:0 13px;
  font-size:8px;
  color:#566274;
}

.browser .dots{
  color:#3a4352;
  font-size:7px;
  word-spacing:2px;
}

.browser span{
  margin:auto;
}

.browser em{
  font-style:normal;
  color:#34d399;
}

.mock{
  display:flex;
  min-height:405px;
  background:#0d131f;
  border:1px solid #ffffff12;
  border-top:0;
  border-radius:0 0 18px 18px;
  overflow:hidden;
  box-shadow:0 35px 90px #00000070;
}

.mock aside{
  width:135px;
  background:#0a0f18;
  border-right:1px solid #ffffff0c;
  padding:18px 11px;
}

.mockBrand{
  font-size:10px;
  margin-bottom:27px;
}

.mockBrand b{
  display:inline-grid;
  place-items:center;
  background:#4f46e5;
  border-radius:6px;
  width:23px;
  height:23px;
  margin-right:5px;
  font-size:7px;
}

.mock aside small{
  font-size:6px;
  color:#475569;
}

.mock aside a{
  display:block;
  padding:9px 7px;
  color:#667387;
  font-size:7px;
  margin:3px 0;
  border-radius:7px;
}

.mock aside .active{
  background:#1c2540;
  color:white;
}

.dashBody{
  padding:23px;
  flex:1;
}

.dashHead{
  display:flex;
  justify-content:space-between;
}

.dashHead small{
  font-size:7px;
  color:#64748b;
}

.dashHead h3{
  margin:2px 0;
  font-size:18px;
}

.dashHead label{
  font-size:7px;
  color:#7c8aa0;
  border:1px solid #ffffff12;
  padding:5px 8px;
  border-radius:6px;
}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:17px;
}

.kpis>div,
.chartCard,
.stockCard{
  background:#111824;
  border:1px solid #ffffff0d;
  border-radius:10px;
  padding:12px;
}

.kpis small{
  display:block;
  color:#64748b;
  font-size:6px;
}

.kpis strong{
  display:block;
  font-size:13px;
  margin:5px 0;
}

.kpis i{
  font-style:normal;
  color:#34d399;
  font-size:6px;
}

.lower{
  display:grid;
  grid-template-columns:1.45fr .85fr;
  gap:9px;
  margin-top:9px;
}

.chartCard>strong,
.stockCard>strong{
  font-size:7px;
}

.bars{
  height:150px;
  display:flex;
  align-items:end;
  gap:8px;
  padding:15px 5px 0;
}

.bars i{
  flex:1;
  background:linear-gradient(#6366f1,#312e81);
  border-radius:4px 4px 0 0;
}

.stockCard p{
  font-size:7px;
  color:#718096;
  padding:12px 0;
  border-bottom:1px solid #ffffff0a;
  margin:0;
}

.stockCard p b{
  float:right;
  color:#d7deea;
}

.yellow b{
  color:#f59e0b!important;
}

.red b{
  color:#fb7185!important;
}

.float{
  position:absolute;
  display:flex;
  align-items:center;
  gap:9px;
  background:#111824e8;
  border:1px solid #ffffff16;
  backdrop-filter:blur(15px);
  padding:10px 12px;
  border-radius:11px;
  font-size:13px;
  box-shadow:0 20px 50px #00000055;
}

.float span{
  font-size:7px;
  color:#64748b;
}

.float span strong{
  display:block;
  color:#e2e8f0;
  font-size:9px;
}

.float b{
  font-size:8px;
  color:#34d399;
}

.sales{
  left:-30px;
  bottom:10px;
  color:#34d399;
}

.stock{
  right:-18px;
  top:25px;
  color:#818cf8;
}

.trust{
  border-top:1px solid #ffffff0d;
  padding-top:20px;
  color:#566274;
  font-size:9px;
  display:flex;
  justify-content:space-between;
}

.trust span{
  color:#718096;
}


/* CARDS */

.cards{
  display:grid;
  gap:13px;
}

.four{
  grid-template-columns:repeat(4,1fr);
}

.card,
.feature,
.plan{
  border:1px solid #ffffff10;
  background:#0f1521cc;
  border-radius:18px;
  padding:25px;
  transition:.25s;
}

.card:hover,
.feature:hover,
.plan:hover{
  transform:translateY(-4px);
  border-color:#818cf833;
}

.card>b{
  font-size:21px;
}

.card h3,
.feature h3{
  font-size:15px;
  margin:16px 0 6px;
}

.card p,
.feature p{
  font-size:10px;
  color:#738095;
  margin:0;
  line-height:1.75;
}


/* FEATURES */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}

.feature{
  min-height:225px;
}

.feature.tall{
  grid-row:span 2;
  min-height:463px;
}

.icon{
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:12px;
  background:#6366f11f;
  font-size:20px;
}

.mini{
  margin-top:70px;
  background:#0b111b;
  border:1px solid #ffffff0d;
  border-radius:11px;
  padding:6px 12px;
}

.mini p{
  padding:11px 0;
  border-bottom:1px solid #ffffff0a;
  display:flex;
  justify-content:space-between;
}

.mini p:last-child{
  border:0;
}

.mini b{
  color:#d7deea;
}


/* STEPS */

.two{
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:90px;
  align-items:center;
}

.steps{
  margin-top:30px;
}

.steps>div{
  display:flex;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid #ffffff0d;
}

.steps b{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:#151a29;
  border:1px solid #ffffff0d;
  border-radius:9px;
  color:#818cf8;
  font-size:9px;
}

.steps strong,
.steps small{
  display:block;
}

.steps strong{
  font-size:12px;
}

.steps small{
  font-size:9px;
  color:#68768a;
  margin-top:3px;
}


/* PHONE */

.phone{
  width:260px;
  height:500px;
  margin:auto;
  border-radius:32px;
  padding:10px;
  background:linear-gradient(145deg,#273044,#0e1420);
  box-shadow:30px 40px 80px #00000070;
  transform:rotate(5deg);
}

.phone:before{
  content:"";
  display:block;
  width:70px;
  height:18px;
  background:#070a12;
  border-radius:0 0 12px 12px;
  margin:auto;
}

.phoneTop{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  margin-top:15px;
}

.phone small{
  display:block;
  color:#657287;
  font-size:8px;
  margin-top:30px;
}

.phone h3{
  font-size:25px;
  margin:3px 0;
}

.phone em{
  font-size:8px;
  color:#34d399;
  font-style:normal;
}

.phoneBars{
  height:115px;
  display:flex;
  align-items:end;
  gap:7px;
  margin-top:25px;
  border-bottom:1px solid #ffffff0d;
}

.phoneBars i{
  flex:1;
  background:#4f46e5;
  border-radius:4px 4px 0 0;
}

.phoneBars i:nth-child(1){
  height:30%;
}

.phoneBars i:nth-child(2){
  height:44%;
}

.phoneBars i:nth-child(3){
  height:38%;
}

.phoneBars i:nth-child(4){
  height:65%;
}

.phoneBars i:nth-child(5){
  height:55%;
}

.phoneBars i:nth-child(6){
  height:78%;
}

.phoneBars i:nth-child(7){
  height:68%;
}

.phoneList p{
  display:grid;
  grid-template-columns:25px 1fr auto;
  font-size:7px;
  align-items:center;
  border-bottom:1px solid #ffffff0a;
  padding:10px 0;
}

.phoneList span{
  color:#64748b;
}


/* PLANS */

.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.plan{
  position:relative;
}

.plan.featured{
  border-color:#6366f177;
  background:linear-gradient(160deg,#1e2144cc,#0d121df2);
  box-shadow:0 25px 70px #4f46e51f;
}

.plan>label{
  position:absolute;
  right:18px;
  top:16px;
  color:#a5b4fc;
  background:#6366f11c;
  border-radius:20px;
  padding:5px 8px;
  font-size:7px;
  font-weight:800;
}

.plan h3{
  font-size:17px;
  margin:0;
}

.plan>p{
  font-size:9px;
  color:#68768a;
  min-height:28px;
}

.plan>strong{
  display:block;
  font-size:31px;
  margin:21px 0 16px;
}

.plan>strong small{
  font-size:9px;
  color:#68768a;
  font-weight:400;
}

.plan>.btn{
  width:100%;
}

.plan ul{
  list-style:none;
  padding:20px 0 0;
  margin:20px 0 0;
  border-top:1px solid #ffffff0d;
  display:grid;
  gap:10px;
}

.plan li{
  font-size:9px;
  color:#8794a7;
}

.trial{
  display:flex;
  align-items:center;
  gap:15px;
  background:#4f46e50d;
  border:1px solid #6366f133;
  padding:17px 20px;
  border-radius:14px;
  margin-top:15px;
}

.trial>b{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:#6366f11c;
  border-radius:10px;
  color:#a5b4fc;
}

.trial span{
  flex:1;
}

.trial strong,
.trial small{
  display:block;
}

.trial strong{
  font-size:11px;
}

.trial small{
  font-size:9px;
  color:#748197;
}

.trial>a{
  font-size:9px;
  color:#a5b4fc;
  font-weight:800;
}


/* SECURITY */

.securityBox{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  background:#111824cc;
  border:1px solid #ffffff10;
  border-radius:21px;
  padding:32px;
}

.securityBox>b{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:14px;
  background:#6366f11c;
  color:#818cf8;
  font-size:20px;
}

.securityBox h2{
  font-size:22px;
  margin:0;
}

.securityBox p{
  font-size:10px;
  color:#738095;
  margin:5px 0 0;
}

.securityBox>span{
  font-size:8px;
  color:#91a0b4;
  line-height:2;
}


/* FAQ */

.faqGrid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px;
}

.faq{
  border-top:1px solid #ffffff0d;
}

.faq>div{
  border-bottom:1px solid #ffffff0d;
}

.faq button{
  width:100%;
  display:flex;
  justify-content:space-between;
  background:none;
  border:0;
  color:#e6ebf3;
  padding:20px 0;
  text-align:left;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
}

.faq button b{
  font-size:18px;
  color:#68768a;
  font-weight:400;
  transition:.2s;
}

.faq p{
  max-height:0;
  overflow:hidden;
  color:#718096;
  font-size:10px;
  line-height:1.8;
  margin:0;
  transition:.25s;
}

.faq .open button b{
  transform:rotate(45deg);
  color:#a5b4fc;
}

.faq .open p{
  max-height:100px;
  padding:0 30px 18px 0;
}

.textLink{
  display:inline-block;
  color:#a5b4fc;
  font-size:10px;
  font-weight:800;
  margin-top:22px;
}


/* CTA */

.cta{
  padding:25px 0 110px;
}

.ctaBox{
  text-align:center;
  border:1px solid #6366f13d;
  background:
    radial-gradient(
      circle at 50% 0,
      #4f46e526,
      transparent 50%
    ),
    #10162a;
  border-radius:26px;
  padding:80px 20px;
}

.ctaBox h2 span{
  color:#818cf8;
}

.ctaBox p{
  max-width:600px;
  margin:17px auto 27px;
  color:#8290a5;
  font-size:12px;
}


/* FOOTER */

footer{
  border-top:1px solid #ffffff0d;
  background:#060910;
  padding:50px 0 20px;
}

.footerTop{
  display:flex;
  justify-content:space-between;
}

.footerTop p{
  color:#5f6c80;
  font-size:9px;
}

.footerLinks{
  display:flex;
  gap:80px;
}

.footerLinks div{
  display:grid;
  gap:7px;
}

.footerLinks strong,
.footerLinks a{
  font-size:9px;
}

.footerLinks a{
  color:#657287;
}

.footerBottom{
  border-top:1px solid #ffffff0d;
  margin-top:40px;
  padding-top:17px;
  color:#4f5c70;
  font-size:8px;
  display:flex;
  justify-content:space-between;
}


/* ANIMAÇÕES */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:.7s;
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* TABLET */

@media(max-width:900px){

  .nav nav,
  .actions{
    display:none;
  }

  #menuBtn{
    display:flex;
  }

  #mobileMenu.open{
    position:fixed;
    top:88px;
    left:20px;
    right:20px;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    background:#0d131f;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }

  #mobileMenu a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:10px;
    color:#cbd5e1;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
  }

  #mobileMenu a:hover,
  #mobileMenu a:active{
    background:rgba(255,255,255,.06);
    color:#fff;
  }

  #mobileMenu a.btn{
    justify-content:center;
    margin-top:5px;
  }

  .heroGrid,
  .two{
    grid-template-columns:1fr;
    gap:50px;
  }

  .heroText{
    text-align:center;
  }

  .heroText>p{
    margin-inline:auto;
  }

  .heroBtns{
    justify-content:center;
  }

  .dashboard{
    margin-top:10px;
  }

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

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

  .feature.tall{
    grid-row:auto;
    min-height:350px;
  }

  .plans .featured{
    order:-1;
  }

  .securityBox{
    grid-template-columns:auto 1fr;
  }

  .securityBox>span{
    grid-column:1/-1;
  }

  .faqGrid{
    grid-template-columns:1fr;
    gap:45px;
  }
}


/* CELULAR */

@media(max-width:600px){

  .wrap{
    width:calc(100% - 28px);
  }

  .section{
    padding:75px 0;
  }

  .hero{
    padding-top:120px;
    min-height:auto;
  }

  .heroText h1{
    font-size:45px;
  }

  .heroText>p{
    font-size:13px;
  }

  .heroBtns{
    flex-direction:column;
  }

  .heroBtns .btn{
    width:100%;
  }

  .mock aside{
    display:none;
  }

  .dashBody{
    padding:14px;
  }

  .mock{
    min-height:300px;
  }

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

  .stockCard{
    display:none;
  }

  .bars{
    height:100px;
  }

  .sales{
    left:-5px;
    bottom:0;
  }

  .stock{
    right:-5px;
    top:5px;
  }

  .float{
    transform:scale(.82);
  }

  .trust{
    display:block;
    text-align:center;
  }

  .trust span{
    display:block;
    margin-top:10px;
  }

  .four,
  .features,
  .plans{
    grid-template-columns:1fr;
  }

  .feature.tall{
    min-height:330px;
  }

  .two{
    gap:20px;
  }

  .phone{
    transform:none;
    width:240px;
    height:460px;
  }

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

  .securityBox>b{
    display:none;
  }

  .securityBox>span{
    grid-column:auto;
  }

  .trial{
    flex-wrap:wrap;
  }

  .trial>a{
    width:100%;
    padding-left:50px;
  }

  .footerTop{
    display:block;
  }

  .footerLinks{
    margin-top:30px;
    gap:40px;
  }

  .footerBottom{
    display:block;
  }

  .footerBottom span{
    display:block;
    margin-top:6px;
  }

  .ctaBox{
    padding:60px 18px;
  }
}


/* CELULARES PEQUENOS */

@media(max-width:480px){

  #mobileMenu.open{
    top:82px;
    left:14px;
    right:14px;
    padding:12px;
  }

  #menuBtn{
    width:42px;
    height:42px;
    font-size:22px;
  }

  .heroText h1{
    font-size:40px;
  }

  .float{
    display:none;
  }

  .browser span{
    font-size:7px;
  }

  .kpis{
    gap:5px;
  }

  .kpis>div{
    padding:9px;
  }

  .kpis strong{
    font-size:11px;
  }

}