:root{
  --black:#000000;
  --white:#ffffff;
  --line:#E6E6E8;

  --pink:#F58CF2;
  --lilac:#BC8AF0;
  --mint:#93D0C6;
  --blue:#4D86E8;
  --sky:#A9C8EF;
  --yellow:#D8D46D;

  --soft:#F8F8FA;
  --text:#252529;
  --muted:#707078;

  --font:
    "Sofia Pro Var",
    "Sofia Pro",
    Arial,
    sans-serif;
}


/* =====================================================
   RESET
===================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--black);
  background:var(--white);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

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

img{
  display:block;
  max-width:100%;
}

button{
  font:inherit;
}


/* =====================================================
   FAIXA LATERAL
===================================================== */

.brand-rail{
  position:fixed;
  inset:0 auto 0 0;

  width:18px;

  background:#000;

  z-index:100;
}

.brand-rail span{
  position:absolute;

  left:4px;
  top:50%;

  transform:
    translateY(-50%)
    rotate(180deg);

  writing-mode:vertical-rl;

  color:#fff;

  font-size:7px;
  font-weight:700;

  letter-spacing:.28em;

  white-space:nowrap;
}


/* =====================================================
   APP
===================================================== */

.app{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    320px
    minmax(0,1fr);

  margin-left:18px;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
  position:sticky;

  top:0;

  height:100vh;

  border-right:
    1px solid
    var(--line);

  background:#fff;

  padding:
    26px
    22px
    24px;

  display:flex;

  flex-direction:column;

  overflow-y:auto;

  z-index:40;
}


/* =====================================================
   BRAND
===================================================== */

.brand{
  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  padding:
    0
    4px
    22px;

  border-bottom:
    1px solid
    #000;
}

.brand-word{
  font-size:38px;

  font-weight:900;

  line-height:.8;

  letter-spacing:
    -.08em;
}

.brand-sub{
  font-size:8px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:
    uppercase;

  line-height:1.25;

  text-align:right;
}


/* =====================================================
   NAVEGAÇÃO
===================================================== */

.nav-title{
  margin:
    30px
    4px
    15px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.16em;

  text-transform:
    uppercase;
}

.tree{
  position:relative;
}

.nav-block{
  margin-bottom:10px;
}

.nav-group{
  display:flex;

  align-items:center;

  gap:11px;

  min-height:46px;

  padding:
    0
    10px;

  border-radius:11px;

  font-size:14px;

  font-weight:700;
}

.nav-group:hover{
  background:#F7F7F8;
}

.nav-group .ico{
  width:22px;
  height:22px;

  display:grid;

  place-items:center;

  border:
    1px solid
    #000;

  background:#fff;

  font-size:10px;

  flex-shrink:0;
}

.nav-group .chev{
  margin-left:auto;

  color:#9A9AA0;
}


/* =====================================================
   HOME / DASHBOARD
===================================================== */

.nav-child{
  position:relative;

  margin:
    3px
    0
    0
    30px;

  padding-left:17px;

  border-left:
    1px solid
    #D8D8DB;
}

.nav-link{
  position:relative;

  display:flex;

  align-items:center;

  min-height:42px;

  padding:
    0
    12px;

  font-size:14px;

  color:#6F6F75;

  border-radius:
    0
    10px
    10px
    0;

  transition:.2s ease;
}

.nav-link:hover{
  color:#000;

  background:#F7F7F8;
}

.nav-link.active{
  color:#000;

  font-weight:800;

  background:
    linear-gradient(
      90deg,
      rgba(216,212,109,.25),
      rgba(169,200,239,.18),
      rgba(245,140,242,.12)
    );
}

.nav-link.active::before{
  content:"";

  position:absolute;

  left:-18px;

  width:3px;

  height:26px;

  background:#000;
}


/* =====================================================
   TELA DE ATENDIMENTO
===================================================== */

.nav-subgroup{
  position:relative;

  margin:
    4px
    0
    8px
    30px;

  padding-left:17px;

  border-left:
    1px solid
    #D8D8DB;
}

.nav-subtitle{
  position:relative;

  display:flex;

  align-items:center;

  gap:9px;

  min-height:42px;

  padding:
    0
    10px;

  font-size:13px;

  font-weight:800;

  color:#4D4D52;
}

.nav-subtitle::before{
  content:"";

  position:absolute;

  left:-18px;

  width:3px;

  height:26px;

  background:
    linear-gradient(
      180deg,
      var(--pink),
      var(--lilac),
      var(--blue)
    );
}

.nav-subtitle-icon{
  width:20px;
  height:20px;

  display:grid;

  place-items:center;

  border-radius:6px;

  background:
    rgba(77,134,232,.12);

  font-size:10px;
}

.nav-subitems{
  position:relative;

  margin-left:11px;

  padding-left:17px;

  border-left:
    1px solid
    #E1E1E4;
}

.nav-subitem{
  display:flex;

  align-items:center;

  min-height:38px;

  padding:
    7px
    10px;

  border-radius:8px;

  color:#77777C;

  font-size:13px;

  line-height:1.35;

  transition:.2s ease;
}

.nav-subitem:hover{
  color:#000;

  background:#F7F7F8;
}

.nav-subitem.active{
  color:#000;

  font-weight:800;

  background:
    linear-gradient(
      90deg,
      rgba(245,140,242,.13),
      rgba(169,200,239,.15)
    );
}


/* =====================================================
   SIDEBAR BOTTOM
===================================================== */

.sidebar-bottom{
  margin-top:auto;

  min-height:86px;

  border:
    1px solid
    #000;

  padding:14px;

  display:flex;

  align-items:flex-end;

  position:relative;

  overflow:hidden;

  flex-shrink:0;
}

.sidebar-bottom::before{
  content:"";

  position:absolute;

  inset:0;

  background:

    repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      rgba(255,255,255,.28) 12px 13px
    ),

    repeating-linear-gradient(
      90deg,
      transparent 0 12px,
      rgba(255,255,255,.28) 12px 13px
    ),

    radial-gradient(
      circle at 0% 0%,
      var(--pink),
      transparent 35%
    ),

    radial-gradient(
      circle at 100% 30%,
      var(--sky),
      transparent 48%
    ),

    radial-gradient(
      circle at 35% 100%,
      var(--mint),
      transparent 40%
    ),

    #fff;
}

.sidebar-bottom span{
  position:relative;

  z-index:1;

  font-size:11px;

  font-weight:800;
}


/* =====================================================
   MAIN
===================================================== */

.main{
  min-width:0;

  background:#fff;
}


/* =====================================================
   TOPBAR
===================================================== */

.topbar{
  height:70px;

  position:sticky;

  top:0;

  z-index:30;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  padding:
    0
    48px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.96);

  backdrop-filter:
    blur(12px);
}

.breadcrumb{
  display:flex;

  align-items:center;

  gap:9px;

  font-size:12px;

  color:#77777C;
}

.breadcrumb b{
  color:#000;
}

.badge-top{
  border:
    1px solid
    #000;

  border-radius:999px;

  padding:
    8px
    12px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}


/* =====================================================
   CONTEÚDO
===================================================== */

.content{
  width:
    min(
      960px,
      calc(100% - 80px)
    );

  margin:
    0
    auto;

  padding:
    68px
    0
    100px;
}


/* =====================================================
   PAGE HEADING
===================================================== */

.page-heading{
  position:relative;

  padding-bottom:36px;

  margin-bottom:36px;

  border-bottom:
    1px solid
    #000;
}

.kicker{
  margin-bottom:13px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.17em;

  text-transform:uppercase;
}

h1{
  margin:0;

  font-size:64px;

  line-height:.94;

  letter-spacing:-.055em;

  font-weight:900;
}

.subtitle{
  margin-top:14px;

  font-size:20px;

  color:#5F5F64;
}

.outline-mark{
  position:absolute;

  right:0;

  top:-14px;

  color:transparent;

  font-size:72px;

  line-height:.72;

  letter-spacing:-.08em;

  font-weight:900;

  -webkit-text-stroke:
    1px
    #D2D2D5;

  pointer-events:none;
}


/* =====================================================
   INTRO
===================================================== */

.intro{
  max-width:790px;

  margin-bottom:42px;

  font-size:17px;

  line-height:1.75;

  color:#26262A;
}


/* =====================================================
   SEÇÕES
===================================================== */

.doc-section{
  margin-top:42px;

  scroll-margin-top:100px;
}

.doc-section h2{
  display:flex;

  align-items:center;

  gap:13px;

  margin:
    0
    0
    20px;

  font-size:27px;

  line-height:1.1;

  letter-spacing:-.035em;
}

.doc-section h2::before{
  content:"";

  width:30px;

  height:1px;

  background:#000;
}

.doc-section p{
  max-width:790px;

  margin:0;

  font-size:16px;

  line-height:1.75;

  color:#303034;
}


/* =====================================================
   TELAS NOVAS - HERO
===================================================== */

.screen-intro{
  max-width:820px;

  display:grid;

  grid-template-columns:
    1fr
    auto;

  gap:28px;

  align-items:center;

  padding:
    28px
    0
    38px;

  border-bottom:
    1px solid
    var(--line);
}

.screen-intro-copy{
  max-width:650px;
}

.screen-intro-copy p{
  margin:
    12px
    0
    0;

  font-size:16px;

  line-height:1.7;

  color:#4A4A50;
}

.screen-number{
  width:72px;
  height:72px;

  display:grid;

  place-items:center;

  border:
    1px solid
    #000;

  border-radius:50%;

  font-size:14px;

  font-weight:900;

  background:
    linear-gradient(
      135deg,
      rgba(245,140,242,.25),
      rgba(169,200,239,.25),
      rgba(147,208,198,.25)
    );
}


/* =====================================================
   FRONT GRID
===================================================== */

.front-grid{
  max-width:820px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}

.front-card{
  min-height:170px;

  border:
    1px solid
    var(--line);

  border-radius:16px;

  padding:22px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #FBFBFC
    );
}

.front-card-number{
  width:30px;
  height:30px;

  display:grid;

  place-items:center;

  margin-bottom:28px;

  border:
    1px solid
    #000;

  font-size:10px;

  font-weight:900;
}

.front-card h3{
  margin:
    0
    0
    8px;

  font-size:16px;

  line-height:1.3;
}

.front-card p{
  margin:0;

  font-size:13px;

  line-height:1.6;

  color:#68686F;
}


/* =====================================================
   CAMINHO DE ACESSO
===================================================== */

.access-route{
  max-width:820px;

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:9px;

  margin-top:16px;
}

.route-item{
  border:
    1px solid
    #DADAE0;

  border-radius:999px;

  padding:
    9px
    14px;

  background:#fff;

  font-size:12px;

  font-weight:700;
}

.route-arrow{
  color:#AAAAB0;
}


/* =====================================================
   PLACEHOLDER DE PRINT
===================================================== */

.screen-placeholder{
  max-width:820px;

  min-height:330px;

  border:
    1px dashed
    #BCBCC4;

  border-radius:20px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:40px;

  background:
    linear-gradient(
      135deg,
      rgba(245,140,242,.04),
      rgba(169,200,239,.07),
      rgba(147,208,198,.05)
    );
}

.screen-placeholder-inner{
  text-align:center;

  max-width:420px;
}

.placeholder-icon{
  width:58px;
  height:58px;

  display:grid;

  place-items:center;

  margin:
    0
    auto
    18px;

  border:
    1px solid
    #000;

  font-size:20px;

  background:#fff;
}

.screen-placeholder h3{
  margin:
    0
    0
    8px;

  font-size:19px;
}

.screen-placeholder p{
  margin:0;

  font-size:14px;

  line-height:1.6;

  color:#73737A;
}


/* =====================================================
   DRAFT MESSAGE
===================================================== */

.draft-note{
  max-width:820px;

  display:grid;

  grid-template-columns:
    8px
    1fr;

  gap:17px;

  padding:
    18px
    0;
}

.draft-note-bar{
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      var(--pink),
      var(--blue),
      var(--mint)
    );
}

.draft-note-content{
  font-size:14px;

  line-height:1.7;

  color:#55555B;
}

.draft-note-content strong{
  color:#000;
}


/* =====================================================
   FUNÇÕES ANTIGAS
===================================================== */

.function-list{
  max-width:820px;

  display:grid;

  gap:12px;

  margin:0;

  padding:0;

  list-style:none;
}

.function-list li{
  display:grid;

  grid-template-columns:
    34px
    1fr;

  gap:13px;

  padding:
    15px
    18px
    15px
    14px;

  border-bottom:
    1px solid
    var(--line);

  font-size:15px;

  line-height:1.55;
}

.function-list li:last-child{
  border-bottom:0;
}

.function-list .num{
  width:28px;
  height:28px;

  display:grid;

  place-items:center;

  border:
    1px solid
    #000;

  font-size:10px;

  font-weight:900;
}


/* =====================================================
   CASO DE USO
===================================================== */

.use-case{
  max-width:820px;

  display:grid;

  grid-template-columns:
    10px
    1fr;

  gap:18px;

  padding:
    22px
    0;
}

.use-case .bar{
  background:
    linear-gradient(
      180deg,
      var(--pink),
      var(--lilac),
      var(--blue),
      var(--mint)
    );
}


/* =====================================================
   PRINTS
===================================================== */

.step-box{
  max-width:820px;

  display:grid;

  gap:18px;
}

.lead-line{
  margin-bottom:16px;

  font-size:16px;

  line-height:1.75;
}

.screenshot-card{
  border:
    1px solid
    #DDE0E8;

  border-radius:18px;

  padding:22px;

  background:#FBFBFC;

  box-shadow:
    0
    14px
    32px
    rgba(0,0,0,.04);
}

.screenshot-card.tight{
  max-width:340px;

  padding:
    16px
    18px;
}

.screenshot-card.darkshot{
  padding:10px;

  border-color:#15161A;

  background:#0D0E11;

  overflow:hidden;
}

.screenshot-card.darkshot img{
  width:100%;

  height:auto;

  border-radius:12px;
}

.screenshot-card.dashboard-shot{
  padding:10px;

  border-color:#E4E4E7;

  background:#fff;

  overflow:hidden;
}

.screenshot-card.dashboard-shot img{
  width:100%;

  height:auto;

  border-radius:10px;
}

.evolution-image{
  max-width:820px;

  margin-top:26px;
}

.performance-image{
  max-width:820px;

  margin-top:24px;
}

.evolution-image img,
.performance-image img{
  width:100%;

  height:auto;
}

.figure-label{
  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-bottom:14px;

  padding:
    7px
    11px;

  border:
    1px solid
    #000;

  border-radius:999px;

  background:#fff;

  font-size:10px;

  font-weight:800;

  letter-spacing:.13em;

  text-transform:uppercase;
}

.figure-label .dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      var(--sky)
    );
}

.subhead{
  margin:
    26px
    0
    14px;

  font-size:20px;

  font-weight:800;
}


/* =====================================================
   BLOCOS DE INFORMAÇÃO
===================================================== */

.info-panel{
  max-width:820px;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  padding:26px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafafa
    );
}

.doc-bullets{
  margin:0;

  padding-left:22px;

  display:grid;

  gap:12px;
}

.doc-bullets li{
  font-size:16px;

  line-height:1.7;

  color:#2E2E34;
}

.doc-bullets strong{
  font-weight:800;
}

.doc-ordered{
  margin:0;

  padding-left:28px;

  display:grid;

  gap:12px;
}

.doc-ordered li{
  padding-left:4px;

  font-size:16px;

  line-height:1.7;

  color:#2E2E34;
}

.doc-ordered li strong{
  font-weight:800;
}

.explanation-layout{
  max-width:820px;

  display:grid;

  gap:44px;
}

.explanation-group{
  max-width:820px;
}

.explanation-subtitle{
  position:relative;

  margin:
    0
    0
    16px;

  padding-left:16px;

  font-size:18px;

  font-weight:900;

  color:#222226;
}

.explanation-subtitle::before{
  content:"";

  position:absolute;

  left:0;

  top:4px;
  bottom:4px;

  width:3px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      var(--pink),
      var(--blue),
      var(--mint)
    );
}

.soft-paragraph{
  max-width:790px;

  margin:
    0
    0
    14px;

  font-size:16px;

  line-height:1.75;

  color:#303034;
}


/* =====================================================
   FOOTER
===================================================== */

.footer{
  margin-top:70px;

  padding-top:22px;

  border-top:
    1px solid
    #000;

  display:flex;

  justify-content:
    space-between;

  gap:20px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


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

.mobile-nav-btn{
  display:none;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .app{
    grid-template-columns:
      265px
      minmax(0,1fr);
  }

  .content{
    width:
      min(
        860px,
        calc(100% - 50px)
      );
  }

  .topbar{
    padding:
      0
      28px;
  }

  h1{
    font-size:54px;
  }

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

}


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

@media(max-width:760px){

  .brand-rail{
    display:none;
  }

  .app{
    display:block;

    margin-left:0;
  }

  .sidebar{
    position:fixed;

    left:0;
    top:0;

    width:
      min(
        310px,
        88vw
      );

    transform:
      translateX(-105%);

    transition:
      .24s ease;

    box-shadow:
      18px
      0
      50px
      rgba(0,0,0,.12);
  }

  body.nav-open .sidebar{
    transform:
      translateX(0);
  }

  .mobile-nav-btn{
    display:inline-grid;

    place-items:center;

    width:36px;
    height:36px;

    border:
      1px solid
      #000;

    background:#fff;

    cursor:pointer;
  }

  .topbar{
    height:62px;

    padding:
      0
      16px;
  }

  .breadcrumb{
    display:none;
  }

  .content{
    width:
      calc(100% - 32px);

    padding-top:42px;
  }

  h1{
    font-size:44px;
  }

  .outline-mark{
    display:none;
  }

  .screen-intro{
    grid-template-columns:1fr;
  }

  .screen-number{
    display:none;
  }

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

  .footer{
    flex-direction:column;
  }

  .screenshot-card.tight{
    max-width:100%;
  }

}