/* CSS Reset */
html {
    scroll-behavior: smooth;
  }
html, body{
    overflow-x: hidden;
}  
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #242F52;
    display: flex;
    gap: 40px;
    align-items: stretch;
    flex-direction: column;
    padding: 40px;
  }
  
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  input, button, textarea, select {
    font: inherit;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  a, a:visited{
    text-decoration: none;
    color: #242F52;
  }
  .wrap{
    display: flex;
    justify-content: flex-end;
    gap: 200px;
    align-items: flex-start;
    padding: 0 80px;
}

/* Inter Font Family */

  :root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }

  h1{
    font-weight: 450;
    font-size: 40px;
    line-height: 110%;
  }
  p{
    font-weight: 350;
    line-height: 150%;
  }

/* Header */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header img, .menu img {
    max-height: 40px;
    height: auto;
  }
  header ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }
  header ul li {
    cursor: pointer;
  }
  header ul li:hover {
    text-shadow: 0 0 .8px currentColor;
  }

/* Hero */

  .hero{
    background:
    url("img/people.png") right bottom / auto 88% no-repeat,
    linear-gradient(126.7deg, #F6F6FE 0%, #E6E8FF 49.34%, #D6DAF7 98.69%);
    border-radius: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    align-items: flex-start;
    padding: 80px;
    height: 72dvh;
    flex-direction: column;
  }

/* About */

.about{
    display: flex;
    gap: 80px;
    align-items: center;
    flex-direction: column;
    margin-top: 80px;
}
.about h1{
    text-align: center;
}

/* Highlight */

.highlight{
    background: linear-gradient(126.7deg, #F6F6FE 0%, #E6E8FF 49.34%, #D6DAF7 98.69%);
    border-radius: 24px;
    display: flex;
    gap: 40px;
    align-items: center;
    flex-direction: column;
    margin-top: 80px;
    padding: 80px 160px;
}
.highlight h1, .highlight p{
    text-align: center;
}

/* Chart */

.chart{
    display: flex;
    gap: 40px;
    align-items: center;
    flex-direction: column;
    margin-top: 80px;
}
.chart h1{
    text-align: center;
}

/* Features */

.features{
    display: flex;
    gap: 80px;
    align-items: center;
    flex-direction: column;
    margin-top: 80px;
    margin-bottom: 80px;
}
.features h1{
    text-align: center;
}

.topic{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.topic h2{
    font-weight: 600;
    line-height: 110%;
    margin-top: 24px;
}
.topic p{
    margin-top: 40px;
}
.topic img{
    width: 48px;
}

/* Footer */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(126.7deg, #F6F6FE 0%, #E6E8FF 49.34%, #D6DAF7 98.69%);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 112px;
  }
  footer img {
    max-height: 40px;
    height: auto;
  }
  footer p {
    font-weight: 500;
  }

  /* Button CTA */

.button{
  position: fixed;
  bottom: 40px;
  right: 40px;
  padding: 16px 32px;
  background: #7C69B0;
  border-radius: 32px;
  font-weight: 500;
  transition: .5s;
  color: #fff !important;
  text-align: center;
  z-index: 9999;
  transform: translateZ(0); /* força renderização GPU */
  -webkit-transform: translateZ(0);
}
.button:hover{
  background-color: #242F52;
  font-weight: 600;
  padding: 18px 36px;
}

.mobile, menu, .btn-menu{
  display: none;
}

/* Mobile Adjusments*/

@media only screen and (max-width: 767px) {
  body{
    padding: 16px;
  }
  h1 {
    font-size: 32px;
  }
  h2{
    font-size: 20px;
  }
  header ul{
    display: none;
  }
 .hero p{
    display: none;
  }
  .hero{
    background: url(img/people.png) center bottom / auto 88% no-repeat, linear-gradient(126.7deg, #F6F6FE 0%, #E6E8FF 49.34%, #D6DAF7 98.69%);
    padding: 0;
    height: 50dvh;
  }
  .hero h1{
    font-size: 20px;
    padding: 24px;
    width: 100%;
    color: #fff;
    background-color: #242f52a3;
    backdrop-filter: blur(10px);
    border-radius: 0 0 24px 24px;
    text-align: center;
  }
  .about .wrap{
    display: flex;
    gap: 24px;
    padding: 0 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .about p{
    text-align: center;
  }
  .highlight{
    padding: 40px;
  }
  .topic p{
    font-size: 14px;
  }
  .topic{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
  .topic img{
    margin-left: 0;
}
  .features .wrap{
    display: flex;
    justify-content: flex-end;
    gap: 80px;
    align-items: flex-start;
    padding: 40px;
    flex-direction: column;
  }
  .features{
    gap: 0;
  }
  footer{
    flex-direction: column;
    padding: 40px 16px;
    gap: 24px;
  }
  footer p{
    text-align: center;
  }

  .mobile{
    display: block;
  }
  .menu{
    z-index: 1;
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #242f52;
  }
  .menu img{
    margin: 16px;
  }
  .menu ul{
    display: flex;
    height: 80vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  .menu li a{
    font-size: 32px;
    color: #fff;
  }
  .btn-menu{
    display: block;
    font-size: 20px;
    padding: 8px 20px;
  }
  .menu .close{
    position: fixed;
    right: 0;
    top: 0;
    color: #fff;
  }


  /* Toggle class to force red background when at bottom */
  .at-bottom{ 
      width: calc(100% - 80px);
  }
}