@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600&display=swap');

:root{
  --acento:#7B5CF0;
  --negro:#07060d;
  --texto:#f4f2ff;
  --gris:rgba(244,242,255,.55);
  --borde:rgba(244,242,255,.15);
}

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

html{scroll-behavior:smooth}
body{
  background:var(--negro);
  color:var(--texto);
  font-family:'Outfit',sans-serif;
  font-weight:300;
  min-height:100vh;
}

.cursor{position:fixed;width:6px;height:6px;background:var(--acento);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:screen;display:none}
.cursor.big{width:34px;height:34px;background:transparent;border:1px solid var(--acento)}
@media(pointer:fine){body{cursor:none}.cursor{display:block}}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:3.5rem 1.6rem 5rem;
}

header.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4rem;
  gap:1rem;
  flex-wrap:wrap;
}

.logo-link{display:flex;align-items:center;cursor:none}
.logo-link img{height:34px;width:auto}

nav.header-nav{display:flex;gap:.7rem}
.btn-contact{
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto);
  background:transparent;border:1px solid rgba(244,242,255,.3);
  padding:.55rem 1.3rem;border-radius:100px;cursor:none;
  text-decoration:none;transition:border-color .25s,background .25s;
  white-space:nowrap;
}
.btn-contact:hover{border-color:var(--acento);background:rgba(123,92,240,.12)}

h1.page-title{
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;
  letter-spacing:-.01em;
  margin-bottom:.75rem;
}

p.page-sub{
  color:var(--gris);
  font-size:1rem;
  line-height:1.6;
  max-width:52ch;
  margin-bottom:3rem;
}

.faq-list{display:flex;flex-direction:column;gap:.9rem}

.faq-item{
  border:1px solid var(--borde);
  border-radius:14px;
  padding:1.4rem 1.6rem;
  transition:border-color .25s,background .25s;
}
.faq-item[open]{border-color:rgba(123,92,240,.5);background:rgba(123,92,240,.06)}

.faq-item summary{
  cursor:none;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:1.02rem;
  font-weight:400;
  color:var(--texto);
}
.faq-item summary::-webkit-details-marker{display:none}

.faq-icon{
  flex:0 0 auto;
  width:20px;height:20px;
  position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:'';
  position:absolute;
  background:var(--acento);
  transition:transform .25s;
}
.faq-icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq-icon::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.faq-item[open] .faq-icon::after{transform:translateX(-50%) scaleY(0)}

.faq-item p{
  color:var(--gris);
  font-size:.95rem;
  line-height:1.65;
  margin-top:1rem;
  max-width:64ch;
}

footer.site-footer{
  margin-top:4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.8rem;
  border-top:1px solid var(--borde);
  padding-top:1.5rem;
}
.legal{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,255,.3)}
.footer-link{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,242,255,.55);text-decoration:none;cursor:none;
  transition:color .25s;
}
.footer-link:hover{color:var(--acento)}

@media(max-width:640px){
  .wrap{padding:2.4rem 1.2rem 3.5rem}
  header.site-header{margin-bottom:2.6rem}
  .faq-item{padding:1.1rem 1.2rem}
  .btn-contact{cursor:auto}
  .faq-item summary{cursor:auto}
  .footer-link{cursor:auto}
}