/* ------------------------------------------------*/
.btn-rotating {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  color: var(--t-bright);
  font-size: 2.2rem;
}

.btn-rotating .btn-rotating__text {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-rotating .btn-rotating__text text {
  fill: var(--t-bright);
  font-family: var(--_font-accent);
  font-weight: 500;
  text-transform: uppercase;
  -webkit-transition: var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: var(--_animspeed-medium) var(--_animbezier);
  transition: var(--_animspeed-medium) var(--_animbezier);
}

.btn-rotating .btn-rotating__image {
  display: block;
  height: auto;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .btn-rotating:hover .btn-rotating__image {
  -webkit-transform: scale(0.92);
     -moz-transform: scale(0.92);
      -ms-transform: scale(0.92);
          transform: scale(0.92);
}

/* Inline-SVG centre mark (e.g. GitHub icon). An <img> carries its own
   intrinsic size; an inline SVG does not, so size it here. Inherits the
   link colour via fill="currentColor". */
.btn-rotating .btn-rotating__image svg {
  display: block;
  width: clamp(2.6rem, 3.5vw, 4.2rem);
  height: auto;
  color: var(--t-bright);
}

.btn-rotating-160 {
  width: 160px;
  height: 160px;
}

.btn-rotating-160 .btn-rotating__text {
  width: 160px;
  height: 160px;
}

.btn-rotating-160 .btn-rotating__text text {
  font-size: 1.39rem;
  letter-spacing: normal;
}

.btn-rotating-160 .btn-rotating__image {
  width: 6rem;
}

.btn-rotating-120-160 {
  width: 120px;
  height: 120px;
}

.btn-rotating-120-160 .btn-rotating__text {
  width: 120px;
  height: 120px;
}

.btn-rotating-120-160 .btn-rotating__text text {
  font-size: 1.4rem;
  letter-spacing: normal;
}

.btn-rotating-120-160 .btn-rotating__image {
  width: 5rem;
}

@media only screen and (min-width: 1600px) {
  .btn-rotating-120-160 {
      width: 160px;
      height: 160px;
    }
  
  .btn-rotating-120-160 .btn-rotating__text {
      width: 160px;
      height: 160px;
    }
  
  .btn-rotating-120-160 .btn-rotating__text text {
      font-size: 1.39rem;
      letter-spacing: normal;
    }
  
  .btn-rotating-120-160 .btn-rotating__image {
      width: 6rem;
    }
}

.btn-rotating-180 {
  width: 180px;
  height: 180px;
}

.btn-rotating-180 .btn-rotating__text {
  width: 180px;
  height: 180px;
}

.btn-rotating-180 .btn-rotating__text text {
  font-size: 1.53rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-180 .btn-rotating__image {
  width: 7.6rem;
}

.btn-rotating-180.ver-02 .btn-rotating__text text {
  font-size: 1.36rem;
}

.btn-rotating-blur-outline {
  width: 200px;
  height: 200px;
  border: 1px solid var(--st-opp-bright);
  -moz-border-radius: 50%;
       border-radius: 50%;
  background-color: var(--neutral-transparent);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.btn-rotating-blur-outline .btn-rotating__text {
  width: 180px;
  height: 180px;
  top: 1rem;
  left: 1rem;
}

.btn-rotating-blur-outline .btn-rotating__text text {
  font-size: 1.4rem;
  letter-spacing: 0.09rem;
}

/* ver-02 (homepage hero "VIEW OUR CODE" mark). Fluid size instead of the fixed
   200px: compact on small/laptop screens, larger on big desktops. The ring text
   (90% wrap) and centre icon scale with it, so the whole mark stays in
   proportion at every width. */
.btn-rotating-blur-outline.ver-02 {
  width: clamp(13rem, 3.5rem + 8.6vw, 24rem);
  height: clamp(13rem, 3.5rem + 8.6vw, 24rem);
}

.btn-rotating-blur-outline.ver-02 .btn-rotating__text {
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}

.btn-rotating-blur-outline.ver-02 .btn-rotating__text text {
  font-size: 1.374rem;
  letter-spacing: 0.09rem;
}

.btn-rotating-blur-outline.ver-02 .btn-rotating__image svg {
  width: clamp(4rem, 2.4vw, 6rem);
}

.btn-rotating-blur-outline.ver-03 .btn-rotating__text text {
  font-size: 1.54rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-blur-outline.ver-04 {
  width: 147px;
  height: 147px;
  color: var(--nl-white);
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__text {
  width: 130px;
  height: 130px;
  top: 0.8rem;
  left: 0.8rem;
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__text text {
  font-size: 1.54rem;
  letter-spacing: 0.1rem;
}

.btn-rotating-blur-outline.ver-04 .btn-rotating__image {
  width: 5rem;
}

@media only screen and (min-width: 1200px) {
  .btn-rotating-blur-outline.permanent-desktop {
      border: 1px solid rgba(255, 255, 255, 0.5);
      background-color: rgba(255, 255, 255, 0.05);
    }
  
  .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text {
      fill: var(--nl-white);
    }
  
  .btn-rotating-blur-outline.permanent-desktop .btn-rotating__text text {
      fill: var(--nl-white);
    }
}

.btn {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.4rem;
  border: none;
  outline: 0;
  padding: 0;
  font: inherit;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.btn-to-top {
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  width: 4.6rem;
  height: 4.6rem;
  -moz-border-radius: 50%;
       border-radius: 50%;
  border-width: 2px;
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--nl-white);
  mix-blend-mode: difference;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  z-index: 9;
  overflow: hidden;
}

.btn-to-top i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.2rem;
  overflow: hidden;
}

.no-touch .btn-to-top:hover {
  -webkit-transform: scale(1.04);
     -moz-transform: scale(1.04);
      -ms-transform: scale(1.04);
          transform: scale(1.04);
}

@media only screen and (min-width: 768px) {
  .btn-to-top {
      right: 6rem;
      bottom: 4rem;
      width: 5.6rem;
      height: 5.6rem;
    }
  
  .btn-to-top i {
      font-size: 2.5rem;
    }
}

@media only screen and (min-width: 1600px) {
  .btn-to-top {
      right: 9rem;
    }
}

.btn-line-default {
  gap: 1rem;
  font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.btn-line-default i,
.btn-line-default .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-default i {
  font-size: 2.2rem;
  overflow: hidden;
}

@media only screen and (min-width: 1600px) {
  .btn-line-default {
      font-size: 2.2rem;
    }
  
  .btn-line-default i {
      font-size: 2.6rem;
    }
}

.btn-line-medium {
  gap: 1rem;
  font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
}

.btn-line-medium i,
.btn-line-medium .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-medium i {
  font-size: 1.8rem;
  overflow: hidden;
}

@media only screen and (min-width: 1600px) {
  .btn-line-medium {
      font-size: 1.8rem;
    }
  
  .btn-line-medium i {
      font-size: 2rem;
    }
}

.btn-line-small {
  gap: 1rem;
  font: normal var(--fw-regular) 1.8rem/1.2 var(--_font-accent);
  color: var(--t-muted);
}

.btn-line-small i,
.btn-line-small .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-small i {
  font-size: 2.2rem;
  overflow: hidden;
}

.btn-line-xsmall {
  font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
  gap: 0.6rem;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: auto;
}

.btn-line-xsmall i,
.btn-line-xsmall .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-xsmall i {
  font-size: 1.6rem;
  overflow: hidden;
}

.btn-line-headline {
  gap: 1rem;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: auto;
  font: normal var(--fw-medium) 3.6rem/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-muted-extra);
  margin-top: 1rem;
}

.btn-line-headline i,
.btn-line-headline .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-line-headline i {
  font-size: 3.1rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .btn-line-headline {
      font-size: 8rem;
      margin-top: 0;
    }
  
  .btn-line-headline i {
      font-size: 6.7rem;
    }
}

@media only screen and (min-width: 1200px) {
  .btn-line-headline {
      font-size: 10rem;
    }
  
  .btn-line-headline i {
      font-size: 8.7rem;
    }
  
  .no-touch .btn-line-headline:hover {
      color: var(--accent);
    }
}

@media only screen and (min-width: 1600px) {
  .btn-line-headline {
      font-size: 12rem;
    }
  
  .btn-line-headline i {
      font-size: 10.1rem;
    }
}

.btn-default {
  height: 5.6rem;
  line-height: 5.6rem;
  gap: 1.2rem;
  padding: 0 2.2rem;
  -moz-border-radius: 2.8rem;
       border-radius: 2.8rem;
  border-width: 2px;
  font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent);
}

.btn-default i,
.btn-default .btn-caption {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

.btn-default i {
  font-size: 2.6rem;
  overflow: hidden;
}

.btn-small {
  height: 4.4rem;
  line-height: 4.4rem;
  gap: 0.8rem;
  padding: 0 1.5rem;
  -moz-border-radius: 2.2rem;
       border-radius: 2.2rem;
  border-width: 1px;
  font: normal var(--fw-regular) 1.6rem/1.5 var(--_font-accent);
}

.btn-small i {
  font-size: 1.8rem;
}

.btn-large {
  height: 5.6rem;
  line-height: 5.6rem;
  gap: 1.2rem;
  padding: 0 2.2rem;
  -moz-border-radius: 2.8rem;
       border-radius: 2.8rem;
  border-width: 2px;
  font: normal var(--fw-medium) 2.2rem/1.5 var(--_font-accent);
}

.btn-large i {
  font-size: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .btn-large {
      height: 8.4rem;
      line-height: 8.4rem;
      gap: 1.6rem;
      padding: 0 3.2rem;
      -moz-border-radius: 4.2rem;
           border-radius: 4.2rem;
      border-width: 2px;
      font: normal var(--fw-medium) 3rem/1.5 var(--_font-accent);
    }
  
  .btn-large i {
      font-size: 3.6rem;
    }
}

.btn-round {
  width: 5.6rem;
  height: 5.6rem;
  -moz-border-radius: 50%;
       border-radius: 50%;
  border-width: 2px;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}

.btn-round i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.5rem;
  overflow: hidden;
}

.no-touch .btn-round:hover {
  -webkit-transform: scale(1.04);
     -moz-transform: scale(1.04);
      -ms-transform: scale(1.04);
          transform: scale(1.04);
}

.btn-round-large {
  width: 5.6rem;
  height: 5.6rem;
  border-width: 2px;
}

.btn-round-large i {
  font-size: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .btn-round-large {
      width: 8.2rem;
      height: 8.2rem;
    }
  
  .btn-round-large i {
      font-size: 3rem;
    }
}

.btn-round-medium {
  width: 5.6rem;
  height: 5.6rem;
  border-width: 1px;
}

.btn-round-medium i {
  font-size: 2.4rem;
}

.btn-round-small {
  width: 4rem;
  height: 4rem;
  border-width: 1px;
}

.btn-round-small i {
  font-size: 1.8rem;
}

.btn-form {
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  width: 6rem;
  height: 6rem;
  border-width: 2px;
  font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  transition: color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium);
  -moz-transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium), color var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium), -moz-transform var(--_animspeed-medium);
}

.btn-form i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  font-size: 2.6rem;
  overflow: hidden;
}

.no-touch .btn-form:hover {
  -webkit-transform: scale(1.04);
     -moz-transform: scale(1.04);
      -ms-transform: scale(1.04);
          transform: scale(1.04);
}

.no-touch .btn-form:hover.no-scale {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.btn-absolute-right {
  position: absolute;
  top: 0;
  right: 0;
}

.btn-fullwidth {
  width: 100%;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.btn-outline {
  background-color: transparent;
  border-style: solid;
  border-color: var(--st-bright);
  color: var(--t-bright);
}

.btn-outline.opposite {
  border-color: var(--st-opp-bright);
  color: var(--t-opp-bright);
}

.btn-outline.permanent {
  border-color: var(--pt-base);
  color: var(--pt-t-light-bright);
}

.btn-accent {
  background-color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--t-opp-bright);
}

.btn-additional {
  background-color: var(--additional);
  border-style: solid;
  border-color: var(--additional);
}

.btn-opposite {
  background-color: var(--base-opp);
  border-style: solid;
  border-color: var(--base-opp);
  color: var(--t-opp-bright);
}

.btn-base {
  background-color: var(--base);
  border-style: solid;
  border-color: var(--base);
  color: var(--t-bright);
}

.btn-permanent {
  background-color: var(--pt-base);
  border-style: solid;
  border-color: var(--pt-st-light-bright);
  color: var(--pt-t-dark-bright);
}

.btn-muted {
  background-color: transparent;
  color: var(--t-muted);
}

.no-touch .btn-muted:hover {
  color: var(--t-bright);
}

.btn-bright {
  background-color: transparent;
  color: var(--t-bright);
}

.no-touch .btn-bright:hover {
  color: var(--t-bright);
}

.btn-anim.play .btn-anim__letter {
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.btn-anim:hover .btn-anim__letter {
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.btn-anim .btn-caption {
  display: block !important;
  height: 3.3rem;
  line-height: 3.3rem;
  overflow: hidden;
}

.btn-anim.btn-anim-medium .btn-caption {
  height: 2.3rem;
  line-height: 2.3rem;
}

.btn-anim__letter {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  -moz-transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1), -moz-transform 0.5s cubic-bezier(0.76, 0, 0.024, 1);
}

.btn-anim .btn-anim__block:last-child {
  color: var(--primary);
}

.btn-anim__letter:nth-child(1) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
          transition-delay: 0s;
}

.btn-anim__letter:nth-child(2) {
  -webkit-transition-delay: 0.03s;
     -moz-transition-delay: 0.03s;
          transition-delay: 0.03s;
}

.btn-anim__letter:nth-child(3) {
  -webkit-transition-delay: 0.06s;
     -moz-transition-delay: 0.06s;
          transition-delay: 0.06s;
}

.btn-anim__letter:nth-child(4) {
  -webkit-transition-delay: 0.09s;
     -moz-transition-delay: 0.09s;
          transition-delay: 0.09s;
}

.btn-anim__letter:nth-child(5) {
  -webkit-transition-delay: 0.12s;
     -moz-transition-delay: 0.12s;
          transition-delay: 0.12s;
}

.btn-anim__letter:nth-child(6) {
  -webkit-transition-delay: 0.15s;
     -moz-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

.btn-anim__letter:nth-child(7) {
  -webkit-transition-delay: 0.18s;
     -moz-transition-delay: 0.18s;
          transition-delay: 0.18s;
}

.btn-anim__letter:nth-child(8) {
  -webkit-transition-delay: 0.21s;
     -moz-transition-delay: 0.21s;
          transition-delay: 0.21s;
}

.btn-anim__letter:nth-child(9) {
  -webkit-transition-delay: 0.24s;
     -moz-transition-delay: 0.24s;
          transition-delay: 0.24s;
}

.btn-anim__letter:nth-child(10) {
  -webkit-transition-delay: 0.27s;
     -moz-transition-delay: 0.27s;
          transition-delay: 0.27s;
}

.btn-anim__letter:nth-child(11) {
  -webkit-transition-delay: 0.3s;
     -moz-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.btn-anim__letter:nth-child(12) {
  -webkit-transition-delay: 0.33s;
     -moz-transition-delay: 0.33s;
          transition-delay: 0.33s;
}

.btn-anim__letter:nth-child(13) {
  -webkit-transition-delay: 0.36s;
     -moz-transition-delay: 0.36s;
          transition-delay: 0.36s;
}

.btn-anim__letter:nth-child(14) {
  -webkit-transition-delay: 0.39s;
     -moz-transition-delay: 0.39s;
          transition-delay: 0.39s;
}

.btn-anim__letter:nth-child(15) {
  -webkit-transition-delay: 0.42s;
     -moz-transition-delay: 0.42s;
          transition-delay: 0.42s;
}

.btn-anim__letter:nth-child(16) {
  -webkit-transition-delay: 0.45s;
     -moz-transition-delay: 0.45s;
          transition-delay: 0.45s;
}

.btn-anim__letter:nth-child(17) {
  -webkit-transition-delay: 0.48s;
     -moz-transition-delay: 0.48s;
          transition-delay: 0.48s;
}

.btn-anim__letter:nth-child(18) {
  -webkit-transition-delay: 0.51s;
     -moz-transition-delay: 0.51s;
          transition-delay: 0.51s;
}

.btn-anim__letter:nth-child(19) {
  -webkit-transition-delay: 0.54s;
     -moz-transition-delay: 0.54s;
          transition-delay: 0.54s;
}

.btn-anim__letter:nth-child(20) {
  -webkit-transition-delay: 0.57s;
     -moz-transition-delay: 0.57s;
          transition-delay: 0.57s;
}

.btn-anim__letter:nth-child(21) {
  -webkit-transition-delay: 0.6s;
     -moz-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

.btn-anim__letter:nth-child(22) {
  -webkit-transition-delay: 0.63s;
     -moz-transition-delay: 0.63s;
          transition-delay: 0.63s;
}

.btn-anim__letter:nth-child(23) {
  -webkit-transition-delay: 0.66s;
     -moz-transition-delay: 0.66s;
          transition-delay: 0.66s;
}

.btn-anim__letter:nth-child(24) {
  -webkit-transition-delay: 0.69s;
     -moz-transition-delay: 0.69s;
          transition-delay: 0.69s;
}

.btn-anim__letter:nth-child(25) {
  -webkit-transition-delay: 0.72s;
     -moz-transition-delay: 0.72s;
          transition-delay: 0.72s;
}

.btn-anim__letter:nth-child(26) {
  -webkit-transition-delay: 0.75s;
     -moz-transition-delay: 0.75s;
          transition-delay: 0.75s;
}

.btn-anim__letter:nth-child(27) {
  -webkit-transition-delay: 0.78s;
     -moz-transition-delay: 0.78s;
          transition-delay: 0.78s;
}

.btn-anim__letter:nth-child(28) {
  -webkit-transition-delay: 0.81s;
     -moz-transition-delay: 0.81s;
          transition-delay: 0.81s;
}

.btn-anim__letter:nth-child(29) {
  -webkit-transition-delay: 0.84s;
     -moz-transition-delay: 0.84s;
          transition-delay: 0.84s;
}

.btn-anim__letter:nth-child(30) {
  -webkit-transition-delay: 0.87s;
     -moz-transition-delay: 0.87s;
          transition-delay: 0.87s;
}

.btn-mobile-icon {
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  -moz-border-radius: 50%;
       border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.btn-mobile-icon i {
  font-size: 2rem;
}

.btn-mobile-icon .btn-caption {
  display: none !important;
}

@media only screen and (min-width: 768px) {
  .btn-mobile-icon {
      width: auto;
      height: 5.6rem;
      padding: 0 2.2rem;
      -moz-border-radius: 2.8rem;
           border-radius: 2.8rem;
    }
  
  .btn-mobile-icon i {
      font-size: 2.6rem;
    }
  
  .btn-mobile-icon .btn-caption {
      display: block !important;
    }
}

.footer-nav__link .btn-caption {
  height: 3.6rem;
  line-height: 1.2;
}

@media only screen and (min-width: 768px) {
  .footer-nav__link .btn-caption {
      height: 5.3rem;
    }
}

/* ---------- buttons ---------- */
.btn.btn-default {
  border-radius: 999px;
  font-weight: 500;
}

.btn.btn-default.btn-additional,
.btn.btn-default.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--bl-hl);
}

.btn.btn-default.btn-outline {
  background-color: var(--base-tint);
  border: 1px solid #DCDCE0;
  box-shadow: var(--bl-e1);
}

/* ---------- buttons: one system, as the Bones .hd-btn ----------
   Pill: 52px tall, 24px side padding, 17px/500 text. Small pill: 40px, 15px.
   Primary is the accent; everything else is the white outline pill.
   The header pill (44px) and footer submit keep their compact sizes. */
.btn.btn-default,
.btn.btn-large,
.bl-home-hero__btn {
  height: 52px;
  line-height: 52px;
  gap: var(--sp-10);
  padding: 0 var(--sp-24);
  border-width: 1px;
  border-radius: 999px;
  font: normal 500 17px/52px var(--_font-default);
  letter-spacing: -0.01em;
}

.btn.btn-default i,
.btn.btn-large i {
  font-size: var(--fs-18);
}

.btn.btn-default.btn-small {
  height: 40px;
  line-height: 40px;
  padding: 0 var(--sp-18);
  font-size: var(--fs-15);
}

.btn.btn-default.btn-small i {
  font-size: var(--fs-16);
}

.btn.btn-default.btn-outline,
.bl-home-hero__btn:not(.bl-home-hero__btn--primary) {
  background-color: var(--base-tint);
  border: 1px solid var(--bl-line);
  color: var(--t-bright);
  box-shadow: var(--bl-e1);
}

.btn.btn-default.btn-opposite,
.btn.btn-large.btn-opposite,
.btn.btn-default.btn-additional,
.btn.btn-default.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow: var(--bl-hl);
}

.no-touch .btn.btn-default.btn-outline:hover,
.no-touch .bl-home-hero__btn:not(.bl-home-hero__btn--primary):hover {
  background-color: color-mix(in srgb, var(--t-bright) 4%, var(--base-tint));
  border-color: #D4D4D8;
  color: var(--t-bright);
}

.no-touch .btn.btn-default.btn-opposite:hover,
.no-touch .btn.btn-large.btn-opposite:hover,
.no-touch .btn.btn-default.btn-additional:hover,
.no-touch .btn.btn-default.btn-accent:hover,
.no-touch .bl-home-hero__btn--primary:hover {
  background-color: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: #FFFFFF;
}

/* round arrow buttons: one size, accent fill */
.btn.btn-round.btn-round-large {
  width: 56px;
  height: 56px;
  border-width: 1px;
  border-color: var(--accent);
}

.btn.btn-round.btn-round-large i {
  font-size: var(--fs-22);
}

@media only screen and (max-width: 767.98px) {
  .bl-home-hero__btn,
    .btn.btn-default:not(.btn-small),
    .btn.btn-default.btn-large {
      height: 48px !important;
      line-height: 48px !important;
      padding: 0 var(--sp-20) !important;
      font-size: var(--fs-16) !important;
      gap: var(--sp-8);
    }
  
  .btn.btn-default.btn-small:not(.btn-large) {
      height: 40px !important;
      line-height: 40px !important;
      padding: 0 var(--sp-16) !important;
      font-size: var(--fs-15) !important;
    }
  
  .btn-to-top {
      width: 44px;
      height: 44px;
      right: 16px;
      bottom: 16px;
      font-size: var(--fs-20);
    }
}

/* back-to-top: a solid themed button. The theme's mix-blend-mode: difference turned the button
   and its arrow almost black over light areas such as the footer logo, hiding the arrow (2026-11-02). */
.btn-to-top {
  mix-blend-mode: normal;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background-color: var(--base-tint);
  border: 1px solid var(--bl-line);
  box-shadow: var(--bl-e1);
  color: var(--t-bright);
}

/* Buttons: one component, primary and quiet. */
.bl-home-hero__btn, .btn.btn-default, .btn.btn-large, .db-menu__cta-btn {
  height: 48px;
  padding: 0 var(--sp-22);
  border-radius: var(--bl-r-pill);
  font: 500 16px/1 var(--_font-default);
}

.bl-home-hero__btn:not(.bl-home-hero__btn--primary), .btn.btn-default.btn-outline {
  border: 1px solid var(--bl-edge);
  background: var(--base-tint);
  color: var(--t-bright);
}

.bl-home-hero__btn:focus-visible, .btn:focus-visible, .db-menu__cta-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.bl-home-hero__btn:disabled, .bl-home-hero__btn[aria-disabled="true"], .bl-home-hero__btn[aria-busy="true"],
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.bl-home-hero__btn > svg[aria-hidden="true"]:last-child,
.btn.btn-default > i[class*="ph-arrow"],
.db-menu__cta-btn svg,
.db-header__controls .btn i { display: none; }

/* Buttons: 15px 28px padding (about 50px tall), 500 16px; secondary 1px line-outline; primary glow. */
.bl-home-hero__btn, .btn.btn-default, .btn.btn-large { height: 50px; padding: 0 var(--sp-28); }

.bl-home-hero__btn:not(.bl-home-hero__btn--primary), .btn.btn-default.btn-outline { border-color: var(--bl-btn-line); }

.bl-wdev-cases__head .bl-home-hero__btn { background: transparent; } /* web development's case list head (bones-look/05): outline button with no fill */