/* crytex.biz — additions on top of the main crytex.io styles */

.biz-here {
  margin: 34rem auto 0;
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(135, 174, 219, .3);
  background: rgba(135, 174, 219, .08);
  font: 500 16em "Avenir Next LT Pro", sans-serif;
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
.biz-here b { color: #c9e1ff; font-weight: 600 }
.biz-here__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #87aedb;
}

/* about / SEO text */
.biz-about { padding: 50rem 0 40rem }
.biz-about__grid {
  margin: 40rem 0 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
}
.biz-about__text {
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  border-radius: 20px;
  background: hsla(0, 0%, 100%, .05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 32rem 30rem;
}
.biz-about__text p {
  font: 400 16em/1.65 "Avenir Next LT Pro", sans-serif;
  color: rgba(255, 255, 255, .7);
}
.biz-about__text p + p { margin-top: 16rem }
.biz-about__text b { color: #fff; font-weight: 600 }
.biz-about__text a, .biz-faq a { color: #a9cbf7 }
.biz-about__tips { display: flex; flex-direction: column; gap: 12px }
.biz-tip {
  flex: 1;
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  border-radius: 20px;
  background: hsla(0, 0%, 100%, .05);
  padding: 22rem 24rem;
}
.biz-tip__name { font: 600 19em "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-tip__text { margin: 8rem 0 0; font: 400 15em/1.55 "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .6) }

.biz-faq { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.biz-faq__item {
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  border-radius: 16px;
  background: hsla(0, 0%, 100%, .04);
  padding: 18rem 22rem;
}
.biz-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 17em "Avenir Next LT Pro", sans-serif;
  color: #fff;
}
.biz-faq__item summary::-webkit-details-marker { display: none }
.biz-faq__item summary::after { content: "+"; color: #87aedb; font-size: 1.2em; line-height: 1 }
.biz-faq__item[open] summary::after { content: "\2212" }
.biz-faq__item p { margin: 10rem 0 0; font: 400 15em/1.6 "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .6) }

@media (max-width: 1024px) {
  .biz-about__grid, .biz-faq { grid-template-columns: 1fr }
}
@media (max-width: 600px) {
  .biz-here { font-size: 13px; padding: 9px 14px; border-radius: 16px; text-align: left }
}


/* domains — plain table in the site palette */
.biz-domains { position: relative }
.biz-status {
  position: relative;
  z-index: 1;
  margin: 40rem auto 0;
  max-width: 1000px;
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  border-radius: 20px;
  background: rgba(13, 19, 28, .7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.biz-table__head,
.biz-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.1fr 110px;
  align-items: center;
  gap: 20px;
  padding: 0 30px;
}
.biz-table__head {
  padding-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
  font: 500 13px "Avenir Next LT Pro", sans-serif;
  color: rgba(255, 255, 255, .4);
}
.biz-row {
  min-height: 78px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .06);
}
.biz-row__name { font: 600 23em "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-row__desc { font: 400 16em/1.45 "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .6) }
.biz-row__st {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  font: 500 16em "Avenir Next LT Pro", sans-serif;
  color: #c9e1ff;
}
.biz-row__st i { width: 7px; height: 7px; border-radius: 50%; background: #87aedb; flex-shrink: 0 }
.biz-row__st span { flex-basis: 100%; padding-left: 16px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .4) }
.biz-row--wait .biz-row__st { color: rgba(255, 255, 255, .6) }
.biz-row--wait .biz-row__st i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5) }
.biz-row--off .biz-row__name { color: rgba(255, 255, 255, .45) }
.biz-row--off .biz-row__st { color: rgba(255, 255, 255, .45) }
.biz-row--off .biz-row__st i { background: rgba(255, 255, 255, .25) }
.biz-row--chk .biz-row__st { color: rgba(255, 255, 255, .4) }
.biz-row--chk .biz-row__st i { background: rgba(255, 255, 255, .2) }
.biz-row__act { text-align: right }
.biz-row__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px "Avenir Next LT Pro", sans-serif;
  color: #a9cbf7;
}
.biz-row__open::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("../img/link_arrow.svg") center / contain no-repeat;
  transition: transform .25s;
}
.biz-row__open:hover { color: #fff }
.biz-row__open::after { filter: invert(1); opacity: .75 }
.biz-row__open:hover::after { transform: translate(2px, -2px) }
.biz-row__here { font: 400 13px "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .4) }
.biz-status__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 16px 30px 18px;
  font: 400 13px "Avenir Next LT Pro", sans-serif;
  color: rgba(255, 255, 255, .4);
}
.biz-recheck {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #a9cbf7;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(169, 203, 247, .4);
}
.biz-recheck:hover { color: #fff }
.biz-recheck.is-busy { opacity: .5; pointer-events: none }


@media (max-width: 1024px) {
  .biz-domains .advant__bg { display: none }
}
@media (max-width: 700px) {
  .biz-table__head { display: none }
  .biz-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name act" "desc desc" "st st";
    gap: 6px 14px;
    padding: 16px 18px;
  }
  .biz-row__name { grid-area: name }
  .biz-row__desc { grid-area: desc }
  .biz-row__st { grid-area: st }
  .biz-row__st span { flex-basis: auto; padding-left: 0 }
  .biz-row__act { grid-area: act }
  .biz-status__foot { padding: 14px 18px 16px }
}

/* Online is green everywhere */
.biz-row--on .biz-row__st { color: #4fd88b }
.biz-row--on .biz-row__st i { background: #4fd88b }


/* domains table inside the hero */
.header .biz-status { margin: 46rem auto 0; text-align: left }
.biz-status__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 22px 30px 4px;
}
.biz-status__title { font: 600 22px "Avenir Next LT Pro", sans-serif; color: #fff; margin: 0 }
.biz-status__time { font: 400 13px "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .4) }
.biz-status .biz-table__head { padding-top: 12px }
.biz-actions { margin-top: 34rem }
.header .biz-here { margin-top: 24rem }

@media (max-width: 700px) {
  .biz-status__top { padding: 18px 18px 8px }
  .biz-status__title { font-size: 19px }
}

/* less empty space between the hero and "What is crytex.biz?" */
header.header { padding-bottom: 30rem }

/* service status (demo data) */
.biz-svc { position: relative; padding: 60rem 0 10rem }
.biz-svc__net,
.biz-svc__card { max-width: 1000px; margin-left: auto; margin-right: auto }

.biz-svc__net {
  margin-top: 40rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  border-radius: 16px;
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  background: rgba(13, 19, 28, .7);
}
.biz-svc__net-name { font: 600 20em "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-svc__net-sub { margin-top: 3px; font: 400 14em "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .5) }
.biz-svc__net-st, .biz-svc__st {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px "Avenir Next LT Pro", sans-serif;
  color: #4fd88b;
  white-space: nowrap;
}
.biz-svc__net-st i, .biz-svc__st i { width: 8px; height: 8px; border-radius: 50%; background: #4fd88b; box-shadow: 0 0 0 3px rgba(79, 216, 139, .18) }

.biz-svc__card {
  margin-top: 14px;
  padding: 26px 26px 10px;
  border-radius: 20px;
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  background: rgba(13, 19, 28, .7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.biz-svc__card-title { margin: 0 0 8px; font: 600 22px "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-svc__item { padding: 16px 0 14px; border-bottom: 1px solid hsla(0, 0%, 100%, .06) }
.biz-svc__item:last-child { border-bottom: 0 }
.biz-svc__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px }
.biz-svc__name { font: 500 17em "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-svc__st { font-size: 14px }
.biz-svc__bars { display: flex; gap: 3px; height: 36px }
.biz-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 4px;
  background: rgba(79, 216, 139, .42);
  transition: opacity .15s;
}
.biz-bar.is-minor { background: rgba(242, 196, 90, .5) }
.biz-bar.is-major { background: rgba(240, 120, 90, .6) }
.biz-bar:hover { filter: brightness(1.6) }
.biz-bar:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 8px;
  background: #fff;
  color: #0d1b29;
  font: 500 12px "Avenir Next LT Pro", sans-serif;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 5;
  pointer-events: none;
}
.biz-svc__bars .biz-bar:first-child:hover::after { left: 0; transform: none }
.biz-svc__bars .biz-bar:last-child:hover::after { left: auto; right: 0; transform: none }
.biz-svc__axis {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font: 400 13px "Avenir Next LT Pro", sans-serif;
  color: rgba(255, 255, 255, .4);
}
.biz-svc__axis b { font-weight: 400 }
.biz-svc__axis .d30 { display: none }
.biz-svc__up { flex: 1; display: flex; align-items: center; gap: 12px; font-weight: 500; color: rgba(255, 255, 255, .7) }
.biz-svc__up::before, .biz-svc__up::after { content: ""; flex: 1; height: 1px; background: hsla(0, 0%, 100%, .12) }

@media (max-width: 700px) {
  .biz-svc__net { padding: 16px 18px }
  .biz-svc__card { padding: 20px 16px 6px }
  .biz-bar.is-old { display: none }
  .biz-svc__bars { height: 32px }
  .biz-svc__axis .d60 { display: none }
  .biz-svc__axis .d30 { display: inline }
  .biz-svc__up::before, .biz-svc__up::after { display: none }
  .biz-svc__up { justify-content: center }
}

/* visible SEO text at the bottom of "About" */
.biz-seo {
  margin: 24px 0 0;
  padding: 30rem 30rem 24rem;
  border: 1.5px solid hsla(0, 0%, 100%, .1);
  border-radius: 20px;
  background: hsla(0, 0%, 100%, .03);
}
.biz-seo__title { margin: 0 0 14rem; font: 600 22em "Avenir Next LT Pro", sans-serif; color: #fff }
.biz-seo p { font: 400 15em/1.65 "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .6) }
.biz-seo p + p { margin-top: 12rem }
.biz-seo b { color: rgba(255, 255, 255, .85); font-weight: 600 }
.biz-seo a { color: #a9cbf7 }
.biz-seo h3 { margin: 20rem 0 6rem; font: 600 17em "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .85) }
.biz-seo__more { margin-top: 14rem }
.biz-seo__more summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 14px "Avenir Next LT Pro", sans-serif;
  color: #a9cbf7;
}
.biz-seo__more summary::-webkit-details-marker { display: none }
.biz-seo__more summary::after { content: "\2193" }
.biz-seo__more[open] summary { display: none }
.biz-seo__tags { margin-top: 18rem; font-size: 13px !important; color: rgba(255, 255, 255, .35) !important }

/* Telegram / X under the hero title — plain pills like the site's Authorization button */
.biz-soc {
  margin: 30rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.biz-soc__title { flex-basis: 100%; text-align: center; font: 400 15em "Avenir Next LT Pro", sans-serif; color: rgba(255, 255, 255, .5) }
.biz-soc__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 26px;
  border-radius: 999px;
  font: 500 17em "Avenir Next LT Pro", sans-serif;
  color: #fff;
  background: hsla(0, 0%, 100%, .08);
  border: 1px solid hsla(0, 0%, 100%, .14);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background .25s, border-color .25s;
}
.biz-soc__btn:hover { background: hsla(0, 0%, 100%, .14); border-color: rgba(169, 203, 247, .5) }
.biz-soc__ico { width: 18px; height: 18px; flex-shrink: 0 }
.biz-soc__ico--x { width: 14px; height: 14px }