*:focus {
  outline: 2px solid #4175FA;
  outline-offset: 2px;
}

body {
  text-align: center;
  background: #F9FAFB;
  font-family: new-hero, "New Hero", sans-serif;
  font-style: normal;
  line-height: normal;
  color: #191B1E;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1  {
  font-size: 26px;
  font-weight: 900;
  margin: 0;
}

h2 {
  color: #777F89;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

h3 {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.5cpx;

}

.logo-container > h3 {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

h3 > a {
  color: #191B1E;
}

h3 > .chevron {
  display: inline-block;
  height: 32px;
  width: 24px;
  background-image: url('../assets/icons/chevron--right.svg');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center center;
}

h4 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

h5 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

p {
  color: #777F89;
  font-size: 16px;
  text-align: left;
  margin: 0;
  width: 100%;
}

p.caption {
  font-size: 14px;
  text-align: center;
  margin: 0;
}

/* nav */

nav {
  display: flex;
  width: calc(100% - 32px);
  max-width: 1024px;
  padding: 24px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  z-index: 30;
  margin: 16px;
  border-radius: 24px;
}

.button {
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  display: inline-block;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: 
    transform .1s cubic-bezier(0, 0.64, 0.46, 1.01), 
    background-position 1s cubic-bezier(0, 0.64, 0.46, 1.01),
    opacity .3s ease-out;
  font-family: new-hero, "New Hero", sans-serif;
  background: linear-gradient(90deg, 
    #895F98 -1.29%, 
    #4175FA 12.34%, 
    #C4D6A9 30.35%, 
    #94DCCE 34.79%, 
    #9ABDE5 38.95%,
    #C266FF 55.98%, 
    #191B1E 74.4%);
  background-size: 400%;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  background-position: right;
  opacity: 1;
}

.button.hidden {
  opacity: 0;
  background-position: left;
  pointer-events: none;
  visibility: hidden;
}

.button:hover {
  background-position: left;
}

.button:active {
  transform: scale(0.96);
}

input {
  border: none;
  font-family: new-hero, "New Hero", sans-serif;
  font-size: 14px;
  padding: 0 14px;
  height: 40px;
  border-radius: 8px;
  min-width: 256px;
}

@media (max-width: 620px) {
  nav {
    margin: 8px;
    padding: 16px;
    width: calc(100% - 16px);
  }

  form {
    flex-direction: column;
  }

  form > .button, form > input {width: 100%}
}

/* video */

.video-container {
  position: relative;
  margin-top: -64px;
}

.hero.video {
  width: 312px;
  height: 540px;
  border-radius: 0 0 16px 16px;
}

.phone-mask {
  position: absolute;
  width: 348px;
  height: 558px;
  top: 0;
  left: -18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../assets/video/phone-mask.png");
  pointer-events: none;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-container {
  width: 40px;
  height: 40px;
  background-image: url(../assets/holo-card/networking-screen.png);
  background-size: 120px;
  background-position-y: 156px;
  border-radius: 8px;
  position: relative;
  transition: 
    transform .3s ease-out,
    background-position .6s ease-out;
}

nav:hover .logo-container .icon-container {
  transform: scale(1.04);
  background-position: bottom center;
}

.icon-container > .logo {
  width: 40px;
  height: 40px;
  background-image: url(../assets/logo/icon-logo.png);
  background-size: 40px;
  background-position: top center;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: transform .8s ease-out;
}

nav:hover .logo-container .logo {
  transform: 
   rotate(60deg)
   scale(1.05);
}

/* form */

form {
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 
    0px 6px 8px -6px rgba(24, 39, 75, 0.12), 
    0px 8px 16px -6px rgba(24, 39, 75, 0.08);
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 8px;
}

/* header */

header {
  gap: 32px;
}

header > .copy-container {max-width: 720px;}
/*header > .copy-container > h2 > span {color: #777F89} */
header > .copy-container > h2 > span.active {color: #5063E5}

.cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}


/* sections */

header, section, footer {
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  z-index: 20;
  margin: 40px 0;
}

section {
  gap: 40px;
}

.copy-container {
  display: flex;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.where-container {
  display: flex;
  width: 100%;
  max-width: 880px;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
}

@media (max-width: 840px) {
  .where-container {
    flex-direction: column;
  }
}

.where-container > li {
  display: flex;
  padding: 32px;
  background: #ffffff;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  flex: 1 0 0;
  align-self: stretch;
  box-shadow: 
    0px 6px 8px -6px rgba(24, 39, 75, 0.12), 
    0px 8px 16px -6px rgba(24, 39, 75, 0.08);
}

.where-container > li:first-child {
  transform: rotate(-3deg) translateY(9px);
}

.where-container > li:last-child {
  transform: rotate(3deg) translateY(9px);
}

.where-container > li > .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
}

.list-container {
  display: flex;
  width: 100%;
  max-width: 800px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 64px;
  flex-wrap: wrap;
  padding: 0;
}

.list-container > li {
  display: flex;
  width: 100%;
  min-width: 176px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
}

.list-container > li > .icon {
  width: 24px;
  height: 24px;
}

.list-container > li > p {
  text-align: center;
  color: #191B1E;
}

/* footer */

.rainbow {
  width: 100%;
  height: 800px;
  position: fixed;
  bottom: -400px;
  background: radial-gradient(
    100% 40% at 50% 50%, 
    #F4ABEF 0%, 
    #DBD0EB 35.5%, 
    #BCF2E6 61%, 
    #C9D5F9 79%, 
    rgba(201, 213, 249, 0.00) 100%);
  filter: blur(64px);
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: .6;
  transition:
    opacity .4s ease-out,
    height .4s ease-out,
    bottom .4s ease-out;
  pointer-events: none;
}

.rainbow:hover {
  opacity: 1;
  height: 1200px;
  bottom: -600px;
  filter: blur(4px);
}

footer > .footer-container {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 56px;
  background: #191B1E;
  margin-bottom: 24px;
}

footer > .footer-container {
  color: #E7EBF1;
  font-size: 12px;
}

footer > .footer-container > .icon {
  width: 20px;
  height: 20px;
}

footer > p, footer > p > a {
  color: #777F89;
  font-size: 12px;
  text-align: center;
}

footer > p > a:hover {
  color: #191B1E;
}


/* images and icons */

.icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.icon.plug          {background-image: url(../assets/icons/plug.svg);}
.icon.tag--group    {background-image: url(../assets/icons/tag--group.svg);}
.icon.locked        {background-image: url(../assets/icons/locked.svg);}
.icon.notification  {background-image: url(../assets/icons/notification.svg);}
.icon.user--follow  {background-image: url(../assets/icons/user--follow.svg);}
.icon.cursor--alt   {background-image: url(../assets/icons/cursor--alt.svg);}
.icon.chart--line   {background-image: url(../assets/icons/chart--line.svg);}
.icon.add           {background-image: url(../assets/icons/add.svg);}
.icon.rule          {background-image: url(../assets/icons/rule.svg);}
.icon.wifi--off     {background-image: url(../assets/icons/wifi--off.svg);}
.icon.idea          {background-image: url(../assets/icons/favorite.svg);}
.icon.logo--linkedin{background-image: url(../assets/icons/logo--linkedin.svg);}
.icon.send          {background-image: url(../assets/icons/send.svg);}
.icon.footer        {background-image: url(../assets/logo-sm.svg);}

header > img {
  max-width: 420px;
  width: 100%;
}

/* card stacks */

.stack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: 24px;
}

.card {
  width: 144px;
  height: 144px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 16px;
  transition: 
    transform .3s ease-out,
    box-shadow .3s ease-out;
}

.card.shadow {
  box-shadow: 
    0px 6px 8px -6px rgba(24, 39, 75, 0.12), 
    0px 8px 16px -6px rgba(24, 39, 75, 0.08);
}

.card:first-child {
  transform: 
    translate(-32px, 4px)
    rotate(-6deg);
  z-index: 10;
  position: absolute;
}

.card:nth-child(2) {
  transform: 
    translate(0px, 0px)
    rotate(0deg);
  z-index: 20;
}

.card:last-child {
  transform: 
    translate(32px, 4px) 
    rotate(6deg);
  z-index: 30;
  position: absolute;
}

 section.active > .stack > .card.shadow {
  box-shadow: 
    0px 8px 22px -6px rgba(24, 39, 75, 0.12), 
    0px 14px 64px -4px rgba(24, 39, 75, 0.12);
}

 section.active > .stack > .card:first-child {
  transform: 
    translate(-128px, 0px) 
    rotate(-12deg);
} 

 section.active > .stack > .card:nth-child(2) {
  transform: 
    translate(0px, -16px) 
    rotate(0deg);
} 

 section.active > .stack > .card:last-child {
  transform: 
    translate(128px, 0px) 
    rotate(12deg);
} 

.card.salesforce    {background-image: url(../assets/features/card-salesforce.png);}
.card.notion        {background-image: url(../assets/features/card-notion.png);}
.card.csv           {background-image: url(../assets/features/card-csv.png);}
.card.photo         {background-image: url(../assets/features/card-photo.png);}
.card.text          {background-image: url(../assets/features/card-text.png);}
.card.audio         {background-image: url(../assets/features/card-audio.png);}
.card.lead          {background-image: url(../assets/features/card-lead.png);}
.card.arrow         {background-image: url(../assets/features/card-arrow.png);}

/* video controls */

.video-controls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.video-controls > button {
  font-weight: 400;
  color: #777F89;
  width: 80px;
  justify-content: center;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: none;
  border: none;
  transition: transform .2s ease;
  font-family: new-hero, "New Hero", sans-serif;
  border-radius: 8px;
}

.video-controls > button:hover {
  transform: scale(1.06);
}

.video-controls > button:active {
  transform: scale(0.95);
}

.video-controls > button > .icon {
  width: 16px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.replay > .icon {background-image: url("../assets/hero/replay.svg");}
.pause > .icon  {background-image: url("../assets/hero/pause.svg");}
.play > .icon   {background-image: url("../assets/hero/play.svg");}


/* holo cards */ 

.holo-card {
  width: 100%;
  max-width: 220px;
  height: 150px;
  position: relative;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.holo-card > div {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.holo-card > div.multiply {
  mix-blend-mode: multiply;
  z-index: 100;
}

.holo-card > div.screen {
  mix-blend-mode: screen;
  background-repeat: repeat;
  background-size: 240px;
  background-position-y: 20px;
  background-position-x: center;
  transition: background-position .2s linear;
  opacity: .9;
}

.holo-card.visits                     {background-image: url("../assets/holo-card/visits-base.png");}
.holo-card.visits > div.highlight     {background-image: url("../assets/holo-card/visits-highlight.png");}
.holo-card.visits > div.multiply      {background-image: url("../assets/holo-card/visits-multiply.png");}
.holo-card.visits > div.screen        {background-image: url("../assets/holo-card/visits-screen.png");}
.holo-card.networking                 {background-image: url("../assets/holo-card/networking-base.png");}
.holo-card.networking > div.highlight {background-image: url("../assets/holo-card/networking-highlight.png");}
.holo-card.networking > div.multiply  {background-image: url("../assets/holo-card/networking-multiply.png");}
.holo-card.networking > div.screen    {background-image: url("../assets/holo-card/networking-screen.png");}
.holo-card.transit                    {background-image: url("../assets/holo-card/transit-base.png");}
.holo-card.transit > div.highlight    {background-image: url("../assets/holo-card/transit-highlight.png");}
.holo-card.transit > div.multiply     {background-image: url("../assets/holo-card/transit-multiply.png");}
.holo-card.transit > div.screen       {background-image: url("../assets/holo-card/transit-screen.png");}

/* legal pages */

section.legal {
  padding-top: 80px;
  padding-bottom: 80px;
  align-items: flex-start;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

section.legal .logo {
  color: #191B1E;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;  
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

section.legal .logo > span {
  width: 20px;
  height: 20px;
  background-image: url("../assets/logo-icon-big.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

section.legal > h1,
section.legal > h2, 
section.legal > h3,
section.legal li, 
section.legal > p {
  color: #191B1E;
  text-align: left;
}

section.legal > h1 {
  font-size: 40px;
}

section.legal > h2 {
  margin-top: 24px;
  font-size: 26px;
  font-weight: 800;
}

section.legal > h3 {
  margin-top: 8px;
  font-size: 20px;
}

section.legal li {
  margin-top: 4px;
}

section.legal .date {
  padding: 4px 8px;
  width: initial;
  display: inline-block;
  font-size: 12px;
  background-color: #E7EBF1;
  border-radius: 8px;
}

section.legal img {
  box-shadow: 0px 8px 22px -6px rgba(24, 39, 75, 0.12), 
              0px 14px 64px -4px rgba(24, 39, 75, 0.12);
  border-radius: 30px;
  margin: 0 auto;
  max-height: 512px;
}

.featured-on {
  display: flex;
  align-items: center;
  gap: 16px;
}

.featured-on > a > img {
  height: 48px;
}


/* media queries */

@media (max-width: 840px) {
    .where-container > li:last-child, .where-container > li:first-child {
    transform: rotate(0deg) translateY(0px);
  }
}

@media (max-width: 620px) {

  .stack {
    flex-direction: column;
  }

  #integrations > .stack {
    padding: 16px;
  }

  section.active > .stack > .card:first-child {
    transform: 
      translate(-32px, -64px) 
      rotate(-12deg)
      scale(0.6);
  } 

   section.active > .stack > .card:nth-child(2) {
    transform: 
      translate(0px, 0px) 
      rotate(0deg)
      scale(0.6);
  } 

  section.active > .stack > .card.arrow {
    transform: 
      translate(0px, -5px) 
      rotate(48deg)
      scale(0.4);
  }

   section.active > .stack > .card:last-child {
    transform: 
      translate(32px, 64px) 
      rotate(12deg)
      scale(0.6);
  } 

  .input-container {
    transform: scale(0.8);
  }
}