@import "https://cdn.jsdelivr.net/npm/@fontsource/roboto-slab@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/roboto-slab@latest/700.css";

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

::selection {
  background: #5ac9c34d;
  color: #f1ecdd;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

.pageframe {
  font-family: "Roboto Slab", Georgia, serif;
  background-color: #0a0d16;
  color: #f1ecdd;
  font-size: 17px;
  line-height: 1.55;
}

.sitehead {
  background: linear-gradient(135deg, #090c14 0%, #0d1220 55%, #101625 100%);
  border-bottom: 1px solid #5ac9c338;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  position: relative;
}

.sitehead-shell {
  max-width: 1170px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  min-height: 96px;
}

.brandzone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
}

.headdivider {
  background: linear-gradient(to bottom, transparent, #5ac9c359, transparent);
  width: 1px;
  align-self: stretch;
}

.navzone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 32px;
}

.logoframe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 68px;
  border: 1px solid #8ad9c847;
  border-radius: 0;
  background-color: #f1ecdd0f;
  box-shadow: 1px 5px 18px 0 #5ac9c314 inset 0 2px 4px #5ac9c30d;
  flex-shrink: 0;
  padding: 4px;
}

.logoframe img {
  width: 52px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.brandtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brandname {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: #8ad9c8;
  letter-spacing: 0;
  text-decoration: none;
}

.brandname:hover {
  color: #5ac9c3;
  transition: color 0.15s ease-out;
}

.brandtag {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.1;
  color: #5ac9c3d1;
  letter-spacing: 0;
}

.primarynav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primarynav li {
  display: flex;
}

.primarynav a {
  display: flex;
  align-items: center;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #f1ecdd;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 38px;
  border: 1px solid transparent;
  transition: color 0.12s ease-out, background-color 0.18s ease,
    border-color 0.18s ease;
  min-height: 44px;
  white-space: nowrap;
}

.primarynav a:hover {
  color: #8ad9c8;
  background-color: #5ac9c31f;
  border-color: #5ac9c34d;
}

.primarynav a:focus-visible {
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #5ac9c32e;
}

.primarynav a.active {
  color: #5ac9c3;
  background-color: #5ac9c31a;
  border-color: #5ac9c340;
}

@media (max-width: 1024px) {
  .sitehead-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .headdivider {
    display: none;
  }

  .brandzone {
    padding: 16px 32px 8px;
    border-bottom: 1px solid #5ac9c326;
  }

  .navzone {
    padding: 8px 32px 16px;
    justify-content: flex-start;
  }

  .primarynav {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .brandzone {
    padding: 16px;
  }

  .navzone {
    padding: 8px 16px 16px;
  }

  .primarynav a {
    font-size: 15px;
    padding: 8px 12px;
  }
}

@media (max-width: 360px) {
  .brandname {
    font-size: 17px;
  }

  .primarynav a {
    padding: 8px;
  }
}

.sitefooter {
  background: linear-gradient(180deg, #05070c 0%, #0a0d16 100%);
  border-top: 1px solid #5ac9c34d;
  box-shadow: 1px 10px 36px 0 #5ac9c314;
}

.footer-shell {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 32px 32px;
}

.footer-upper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footerlogoframe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 68px;
  border: 1px solid #8ad9c838;
  border-radius: 0;
  background-color: #f1ecdd0a;
  box-shadow: 1px 5px 18px 0 #5ac9c314 inset 0 3px 6px #5ac9c30f;
  padding: 4px;
}

.footerlogoframe img {
  width: 52px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.footer-brandname {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: #8ad9c8;
}

.footer-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #f1ecdd9e;
  max-width: 240px;
}

.footer-contact {
  margin-top: 8px;
}

.footer-contactlink {
  font-size: 15px;
  color: #5ac9c3;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.12s ease-out;
}

.footer-contactlink:hover {
  color: #8ad9c8;
}

.footer-contactlink:focus-visible {
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #5ac9c32e;
}

.footer-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-trust {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.trustitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trustlabel {
  font-size: 15px;
  font-weight: 700;
  color: #5ac9c3;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trustval {
  font-size: 17px;
  font-weight: 400;
  color: #f1ecddc7;
  line-height: 1.55;
}

.footer-lownav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-lownav a {
  font-size: 15px;
  font-weight: 400;
  color: #f1ecdd8c;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 38px;
  border: 1px solid #8ad9c81a;
  transition: color 0.15s ease-out, border-color 0.2s ease,
    background-color 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-lownav a:hover {
  color: #8ad9c8;
  border-color: #5ac9c34d;
  background-color: #5ac9c312;
}

.footer-lownav a:focus-visible {
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #5ac9c32e;
}

.footer-bottom {
  border-top: 1px solid #5ac9c326;
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 15px;
  color: #f1ecdd66;
  line-height: 1.55;
}

.footer-domain {
  font-size: 15px;
  color: #5ac9c399;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .footer-upper {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .footer-shell {
    padding: 32px 16px;
  }

  .footer-upper {
    gap: 32px;
    margin-bottom: 32px;
  }

  .footer-trust {
    gap: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {
  .footer-lownav a {
    font-size: 15px;
    padding: 8px 12px;
  }
}

.legal-data {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 32px;
  color: #f1ecdd;
  background: #11151f;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  border-radius: 0;
}

.legal-data p {
  font-size: 17px;
  line-height: 1.55;
  margin-top: 0;
  margin-bottom: 16px;
  color: #f1ecdd;
}

.legal-data ul,
.legal-data ol {
  padding-left: 32px;
  margin-bottom: 16px;
  margin-top: 0;
}

.legal-data ul {
  list-style-type: disc;
}

.legal-data ol {
  list-style-type: decimal;
}

.legal-data li {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
  margin-bottom: 8px;
  padding-left: 4px;
}

.legal-data li:last-child {
  margin-bottom: 0;
}

.legal-data ul ul,
.legal-data ol ol,
.legal-data ul ol,
.legal-data ol ul {
  margin-top: 8px;
  margin-bottom: 4px;
}

.legal-data em,
.legal-data i {
  font-style: italic;
  color: #8ad9c8;
}

.legal-data a {
  color: #5ac9c3;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease-out, text-decoration-color 0.15s ease-out;
}

.legal-data a:hover {
  color: #8ad9c8;
  text-decoration-color: #8ad9c8;
}

.legal-data a:visited {
  color: #5ac9c3;
}

.legal-data hr {
  border: none;
  border-top: 1px solid #8ad9c82e;
  margin-top: 48px;
  margin-bottom: 48px;
  box-shadow: 0 1px 3px 0 #5ac9c314;
}

@media (max-width: 640px) {
  .legal-data {
    padding: 32px 16px;
  }

  .legal-data p,
  .legal-data li {
    font-size: 15px;
  }

  .legal-data ul,
  .legal-data ol {
    padding-left: 16px;
  }

  .legal-data hr {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

@media (max-width: 360px) {
  .legal-data {
    padding: 16px 8px;
  }
}

.blogdet {
  background: #0c1019;
  color: #f1ecdd;
  overflow-x: hidden;
  width: 100%;
}

.blogdet .maxw {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.blogdet .posthead {
  position: relative;
  padding-top: 96px;
  padding-bottom: 96px;
  background: conic-gradient(
    from 323deg at 8% 12%,
    #070911 0%,
    #0e1322 18%,
    #0c1019 40%,
    #060810 70%,
    #0d111c 100%
  );
}

.blogdet .posthead::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    180deg,
    #5ac9c3 0%,
    #8ad9c8 60%,
    transparent 100%
  );
  opacity: 0.7;
}

.blogdet .posthead .maxw {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
}

.blogdet .postheadtext {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.blogdet .postheadtext::before {
  content: "";
  position: absolute;
  top: -32px;
  left: -32px;
  width: 180px;
  height: 180px;
  background: conic-gradient(
    from 323deg at 15% 20%,
    #5ac9c32e 0%,
    transparent 60%
  );
  border-radius: 0;
  pointer-events: none;
}

.blogdet .postmeta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.blogdet .cattag {
  background: #5ac9c3;
  color: #0c1019;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blogdet .readtime {
  font-size: 15px;
  color: #8ad9c8;
  opacity: 0.8;
}

.blogdet .viewcount {
  font-size: 15px;
  color: #8ad9c8;
  opacity: 0.7;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.blogdet .viewcount .eyeico {
  width: 18px;
  height: 12px;
  display: inline-block;
  position: relative;
}

.blogdet .viewcount .eyeico::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 12px;
  border: 2px solid #8ad9c8;
  border-radius: 38px;
  opacity: 0.7;
}

.blogdet .viewcount .eyeico::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 6px;
  background: #8ad9c8;
  border-radius: 38px;
  opacity: 0.7;
}

.blogdet .likecount {
  font-size: 15px;
  color: #8ad9c8;
  opacity: 0.7;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.blogdet .likecount .heartico {
  width: 16px;
  height: 14px;
  display: inline-block;
  position: relative;
}

.blogdet .heartico::before,
.blogdet .heartico::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #5ac9c3;
  border-radius: 38px 38px 0 0;
}

.blogdet .heartico::before {
  left: 0;
  top: 0;
}

.blogdet .heartico::after {
  left: 8px;
  top: 0;
}

.blogdet .posth1 {
  font-size: 50px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0;
  animation: sweepcolor 0.7s ease-out both;
}

@keyframes sweepcolor {
  0% {
    color: #5ac9c3;
  }

  100% {
    color: #f1ecdd;
  }
}

.blogdet .posth1 .firstword {
  color: #5ac9c3;
}

.blogdet .postsub {
  font-size: 20px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  max-width: 560px;
}

.blogdet .authorline {
  font-size: 15px;
  color: #f1ecdd;
  opacity: 0.65;
  margin-top: 8px;
}

.blogdet .authorline strong {
  color: #5ac9c3;
  opacity: 1;
}

.blogdet .postheadimg {
  flex: 1 1 40%;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.blogdet .postheadimg img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.blogdet .postheadimg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(to bottom, transparent, #0c1019 100%);
  pointer-events: none;
}

.blogdet .readarrow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0.45;
}

.blogdet .readarrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid #8ad9c8;
  border-bottom: 2px solid #8ad9c8;
  transform: rotate(45deg);
  margin: 4px auto 0;
}

.blogdet .divdoublecurve {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
  background: #0c1019;
}

.blogdet .divdoublecurve svg {
  width: 100%;
  height: 100%;
  display: block;
}

.blogdet .articlearea {
  padding-top: 48px;
  padding-bottom: 48px;
  background: #0c1019;
  position: relative;
}

.blogdet .articlearea .maxw {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
}

.blogdet .articlecol {
  flex: 1 1 65%;
  min-width: 0;
}

.blogdet .articlesidebar {
  flex: 0 0 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blogdet .articlecol .postcontent {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
}

.blogdet .articlecol .postcontent p {
  margin-bottom: 16px;
}

.blogdet .articlecol .postcontent h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #5ac9c3;
  margin-top: 48px;
  margin-bottom: 16px;
}

.blogdet .articlecol .postcontent h3 {
  font-size: 26px;
  line-height: 1.1;
  color: #8ad9c8;
  margin-top: 32px;
  margin-bottom: 16px;
}

.blogdet .articlecol .postcontent h4 {
  font-size: 20px;
  line-height: 1.55;
  color: #f1ecdd;
  margin-top: 32px;
  margin-bottom: 8px;
}

.blogdet .articlecol .postcontent em {
  color: #8ad9c8;
  font-style: italic;
}

.blogdet .articlecol .postcontent code {
  background: #131a29;
  color: #5ac9c3;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 15px;
}

.blogdet .articlecol .postcontent ul {
  padding-left: 32px;
  margin-bottom: 16px;
  list-style: none;
  counter-reset: listnum;
}

.blogdet .articlecol .postcontent ul li {
  counter-increment: listnum;
  position: relative;
  padding-left: 32px;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.55;
}

.blogdet .articlecol .postcontent ul li::before {
  content: counter(listnum);
  position: absolute;
  left: 0;
  top: 0;
  color: #5ac9c3;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.blogdet .sidecard {
  background: #111623;
  border-radius: 0;
  padding: 32px;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  position: relative;
  overflow: hidden;
}

.blogdet .sidecard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #5ac9c3;
  opacity: 0.5;
}

.blogdet .sidecard .sidecardtitle {
  font-size: 17px;
  font-weight: 700;
  color: #8ad9c8;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.blogdet .sidecard .sidecardtext {
  font-size: 15px;
  line-height: 1.55;
  color: #f1ecdd;
  opacity: 0.8;
}

.blogdet .sidecard .sidecardlink {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
  color: #5ac9c3;
  text-decoration: none;
  border-bottom: 1px solid #5ac9c34d;
  padding-bottom: 4px;
  transition: color 0.15s ease-out, border-color 0.2s ease;
}

.blogdet .sidecard .sidecardlink:hover {
  color: #8ad9c8;
  border-color: #8ad9c8;
}

.blogdet .metricstrip {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blogdet .metricitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.blogdet .metricnum {
  font-size: 36px;
  font-weight: 700;
  color: #5ac9c3;
  line-height: 1.1;
  min-width: 64px;
}

.blogdet .metriclabel {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
}

.blogdet .divdoublecurve2 {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
  background: #111623;
}

.blogdet .divdoublecurve2 svg {
  width: 100%;
  height: 100%;
  display: block;
}

.blogdet .highlightband {
  background: #111623;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}

.blogdet .highlightband::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #8ad9c8 50%,
    transparent 100%
  );
  opacity: 0.35;
}

.blogdet .highlightband .maxw {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
}

.blogdet .hbquote {
  flex: 1 1 55%;
  position: relative;
}

.blogdet .hbquotetxt {
  font-size: 26px;
  line-height: 1.55;
  color: #f1ecdd;
  position: relative;
  z-index: 1;
}

.blogdet .hbquotetxt .accentword {
  background: #5ac9c3;
  color: #0c1019 !important;
  padding: 0 8px;
  border-radius: 0;
}

.blogdet .hbquotemark {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 48px;
  height: 40px;
  pointer-events: none;
  z-index: 0;
}

.blogdet .hbquotemark::before,
.blogdet .hbquotemark::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 22px;
  border-top: 4px solid #5ac9c340;
  border-right: 4px solid #5ac9c340;
  border-radius: 0 38px 0 0;
}

.blogdet .hbquotemark::before {
  left: 0;
  top: 0;
}

.blogdet .hbquotemark::after {
  left: 20px;
  top: 0;
}

.blogdet .hbmetrics {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blogdet .hbmetricrow {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.blogdet .hbmetricbox {
  flex: 1;
  background: #0c1019;
  border-radius: 0;
  padding: 32px 16px;
  text-align: center;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
  transition: box-shadow 0.15s ease-out;
}

.blogdet .hbmetricbox:hover {
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.blogdet .hbmetricbox .hbnum {
  font-size: 50px;
  font-weight: 700;
  color: #5ac9c3;
  line-height: 1.1;
  display: block;
}

.blogdet .hbmetricbox .hbunit {
  font-size: 15px;
  color: #8ad9c8;
  margin-top: 8px;
  display: block;
}

.blogdet .divdoublecurve3 {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
  background: #0c1019;
}

.blogdet .divdoublecurve3 svg {
  width: 100%;
  height: 100%;
  display: block;
}

.blogdet .ctaarea {
  background: #0c1019;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}

.blogdet .ctaarea .maxw {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
}

.blogdet .ctacopy {
  flex: 1 1 55%;
}

.blogdet .ctacopy .ctah {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin-bottom: 16px;
}

.blogdet .ctacopy .ctah .fw {
  color: #5ac9c3;
}

.blogdet .ctacopy .ctap {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin-bottom: 32px;
}

.blogdet .ctabtns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.blogdet .btnprimary {
  display: inline-block;
  padding: 16px 32px;
  background: #5ac9c3;
  color: #0c1019;
  font-size: 17px;
  font-weight: 700;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid #5ac9c3;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out,
    box-shadow 0.2s ease;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.blogdet .btnprimary:hover {
  background: transparent;
  color: #5ac9c3;
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.blogdet .btnprimary:focus {
  outline: 2px solid #8ad9c8;
  outline-offset: 3px;
}

.blogdet .btnsecondary {
  display: inline-block;
  padding: 16px 32px;
  background: transparent;
  color: #8ad9c8;
  font-size: 17px;
  font-weight: 700;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid #8ad9c866;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.15s ease-out;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.blogdet .btnsecondary:hover {
  border-color: #8ad9c8;
  color: #f1ecdd;
  outline: 2px solid #8ad9c84d;
  outline-offset: 3px;
}

.blogdet .btnsecondary:focus {
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
}

.blogdet .ctavisual {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blogdet .ctastatrow {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.blogdet .ctastatbox {
  flex: 1;
  background: #111623;
  border-radius: 0;
  padding: 32px 16px;
  text-align: center;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
  transition: box-shadow 0.18s ease-out, background 0.15s ease-out;
}

.blogdet .ctastatbox:hover {
  background: #131a29;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.blogdet .ctastatbox .statico {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  position: relative;
}

.blogdet .ctastatbox .statico.chart::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 16px;
  background: #5ac9c3;
  border-radius: 0;
}

.blogdet .ctastatbox .statico.chart::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  width: 8px;
  height: 28px;
  background: #8ad9c8;
  border-radius: 0;
}

.blogdet .ctastatbox .statico.doc::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 20px;
  height: 26px;
  border: 2px solid #5ac9c3;
  border-radius: 0;
}

.blogdet .ctastatbox .statico.doc::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  width: 10px;
  height: 2px;
  background: #8ad9c8;
  box-shadow: 0 5px 0 #8ad9c8, 0 10px 0 #8ad9c8;
}

.blogdet .ctastatbox .statval {
  font-size: 26px;
  font-weight: 700;
  color: #5ac9c3;
  display: block;
  line-height: 1.1;
}

.blogdet .ctastatbox .statlabel {
  font-size: 15px;
  color: #8ad9c8;
  margin-top: 4px;
  display: block;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .blogdet .posthead .maxw {
    flex-direction: column;
    gap: 32px;
  }

  .blogdet .postheadtext {
    flex: 1 1 auto;
  }

  .blogdet .postheadimg {
    flex: 1 1 auto;
    width: 100%;
  }

  .blogdet .articlearea .maxw {
    flex-direction: column;
  }

  .blogdet .articlesidebar {
    flex: 1 1 auto;
    width: 100%;
  }

  .blogdet .highlightband .maxw {
    flex-direction: column;
  }

  .blogdet .ctaarea .maxw {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .blogdet .posth1 {
    font-size: 36px;
  }

  .blogdet .postsub {
    font-size: 17px;
  }

  .blogdet .posthead {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .blogdet .maxw {
    padding-left: 16px;
    padding-right: 16px;
  }

  .blogdet .hbmetricrow {
    flex-direction: column;
    gap: 16px;
  }

  .blogdet .ctastatrow {
    flex-direction: column;
    gap: 16px;
  }

  .blogdet .highlightband {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .blogdet .ctaarea {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .blogdet .hbquotetxt {
    font-size: 20px;
  }

  .blogdet .ctacopy .ctah {
    font-size: 26px;
  }
}

@media (max-width: 360px) {
  .blogdet .posth1 {
    font-size: 26px;
  }

  .blogdet .cattag {
    font-size: 15px;
  }

  .blogdet .ctabtns {
    flex-direction: column;
  }
}

.blogdet .sidecard .statico {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  transition: transform 0.15s ease-out;
}

.blogdet .sidecard:hover .statico {
  transform: scale(1.25) rotate(-8deg);
}

.csd {
  background: #0c1019;
  color: #f1ecdd;
  overflow-x: hidden;
  padding: 0;
}

.csd .grain-bg {
  position: relative;
  background: #0c1019;
}

.csd .grain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
}

.csd .dotgrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #5ac9c32e 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.csd .artpost {
  max-width: 1170px;
  margin: 0 auto;
  padding: 96px 32px 48px;
  position: relative;
  z-index: 1;
}

.csd .artpost-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.csd .atag {
  display: inline-block;
  background: #5ac9c3;
  color: #0c1019;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.csd .ctag {
  display: inline-block;
  border: 1.5px solid #5ac9c373;
  color: #5ac9c3;
  font-size: 15px;
  padding: 4px 16px;
  border-radius: 38px;
  letter-spacing: 0.04em;
}

.csd .metarow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}

.csd .metarow .mdate,
.csd .metarow .mviews,
.csd .metarow .mauthor {
  font-size: 15px;
  color: #8ad9c8;
  opacity: 0.75;
}

.csd .metarow .mdot {
  width: 4px;
  height: 4px;
  border-radius: 38px;
  background: #8ad9c866;
  display: inline-block;
}

.csd .arttitle {
  font-size: 50px;
  line-height: 1.1;
  color: #f1ecdd;
  margin-bottom: 32px;
  max-width: 820px;
  position: relative;
  z-index: 1;
}

.csd .arttitle .accent-word {
  color: #5ac9c3;
}

.csd .artlayout {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.csd .imgwrap {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.csd .imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease-out;
}

.csd .imgwrap:hover img {
  transform: scale(1.03);
}

.csd .lightleak {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 55%;
  background: conic-gradient(
    from 323deg at 10% 10%,
    #5ac9c361,
    #8ad9c821,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
}

.csd .arrowdeco {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  opacity: 0.22;
  pointer-events: none;
  z-index: 3;
}

.csd .arrowdeco svg {
  width: 100%;
  height: 100%;
}

.csd .titlepanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: #8ad9c80d;
  border-radius: 0;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  position: relative;
}

.csd .titlepanel .tpauthor {
  font-size: 17px;
  color: #8ad9c8;
  font-weight: 600;
}

.csd .titlepanel .tpdesc {
  font-size: 17px;
  color: #f1ecdd;
  line-height: 1.55;
  opacity: 0.88;
}

.csd .titlepanel .tpdate {
  font-size: 15px;
  color: #5ac9c3;
  opacity: 0.85;
}

.csd .printbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid #5ac9c38c;
  color: #5ac9c3;
  font-size: 15px;
  padding: 8px 32px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out,
    color 0.15s ease-out, box-shadow 0.2s ease;
  position: relative;
  margin-top: 8px;
  align-self: flex-start;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.csd .printbtn:hover {
  background: #5ac9c31f;
  border-color: #5ac9c3;
  outline-color: #5ac9c359;
  outline-offset: 4px;
}

.csd .printbtn:focus-visible {
  outline: 2px solid #5ac9c3;
  outline-offset: 4px;
}

.csd .printbtn:active {
  background: #5ac9c338;
}

.csd .printbtn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.csd .heightreveal {
  overflow: hidden;
  animation: heightopen 0.55s ease-out forwards;
  animation-delay: 0.1s;
  max-height: none;
}

@keyframes heightopen {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.2;
  }

  to {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}

.csd .artbody-wrap {
  background: #f1ecdd;
  position: relative;
}

.csd .artbody-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.csd .artbody {
  color: #0c1019;
  font-size: 17px;
  line-height: 1.55;
}

.csd .artbody p {
  margin-bottom: 16px;
  color: #0c1019;
}

.csd .artbody h2 {
  font-size: 26px;
  line-height: 1.1;
  color: #0c1019;
  margin-top: 32px;
  margin-bottom: 16px;
}

.csd .artbody em {
  color: #5ac9c3;
  font-style: italic;
}

.csd .artbody ins {
  text-decoration: underline;
  text-decoration-color: #5ac9c3;
  text-underline-offset: 3px;
}

.csd .artbody blockquote {
  border-top: 2px solid #5ac9c3;
  border-bottom: 2px solid #5ac9c3;
  padding: 16px 32px;
  margin: 32px 0;
  background: #5ac9c312;
  border-radius: 0;
  color: #0c1019;
  font-size: 20px;
  line-height: 1.55;
}

.csd .artbody blockquote cite {
  display: block;
  font-size: 15px;
  color: #5ac9c3;
  margin-top: 8px;
  font-style: normal;
}

.csd .artbody table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
}

.csd .artbody th {
  background: #5ac9c3;
  color: #0c1019;
  padding: 8px 16px;
  text-align: left;
  font-weight: 700;
}

.csd .artbody td {
  padding: 8px 16px;
  border-bottom: 1px solid #5ac9c333;
  color: #0c1019;
}

.csd .artbody tr:nth-child(even) td {
  background: #5ac9c30f;
}

.csd .aside-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 32px;
}

.csd .aside-block {
  background: #0c1019;
  border-radius: 0;
  padding: 32px;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.csd .aside-block .ablabel {
  font-size: 15px;
  color: #5ac9c3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: block;
  font-weight: 700;
}

.csd .aside-block .abtext {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
}

.csd .aside-block .abauthor {
  font-size: 17px;
  color: #f1ecdd;
  font-weight: 600;
  margin-bottom: 8px;
}

.csd .keylist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: keycount;
}

.csd .keylist li {
  counter-increment: keycount;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
}

.csd .keylist li::before {
  content: counter(keycount, decimal-leading-zero);
  color: #5ac9c3;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  flex-shrink: 0;
  min-width: 28px;
}

.csd .bottombar {
  background: #5ac9c3;
  position: relative;
}

.csd .bottombar-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.csd .bottombar .barlabel {
  font-size: 26px;
  line-height: 1.1;
  color: #0c1019;
  font-weight: 700;
  max-width: 480px;
}

.csd .bottombar .barlabel span {
  color: #f1ecdd;
}

.csd .barlinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.csd .barlink {
  display: inline-block;
  background: #0c1019;
  color: #5ac9c3;
  font-size: 15px;
  padding: 8px 32px;
  border-radius: 0;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease-out, color 0.12s ease-out,
    outline-offset 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.csd .barlink:hover {
  background: #f1ecdd;
  color: #0c1019;
  outline-color: #f1ecdd80;
  outline-offset: 3px;
}

.csd .barlink:focus-visible {
  outline: 2px solid #f1ecdd;
  outline-offset: 4px;
}

@media (max-width: 1024px) {
  .csd .artlayout {
    grid-template-columns: 1fr;
  }

  .csd .arrowdeco {
    display: none;
  }

  .csd .artbody-inner {
    grid-template-columns: 1fr;
    padding: 48px 32px;
  }

  .csd .aside-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .csd .artpost {
    padding: 48px 16px 32px;
  }

  .csd .arttitle {
    font-size: 36px;
  }

  .csd .artbody-inner {
    padding: 48px 16px;
  }

  .csd .bottombar-inner {
    padding: 48px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .csd .metarow {
    margin-left: 0;
  }
}

@media (max-width: 360px) {
  .csd .arttitle {
    font-size: 26px;
  }

  .csd .artbody h2 {
    font-size: 20px;
  }
}

.abtauth {
  background: #0c1019;
  overflow-x: clip;
  padding: 0;
}

.abtauth .pgwrap {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
}

.abtauth .profileblock {
  padding: 96px 0 48px;
}

.abtauth .profileblock .pgwrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.abtauth .portraitcol {
  flex: 0 0 280px;
  position: relative;
}

.abtauth .portraitframe {
  position: relative;
  width: 280px;
  height: 420px;
  overflow: hidden;
}

.abtauth .portraitframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: blur(0px);
}

.abtauth .portraitframe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    #0c101973 100%
  );
  z-index: 1;
  pointer-events: none;
}

.abtauth .bracketdeco {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.abtauth .bracketdeco.tl {
  top: -8px;
  left: -8px;
  border-top: 2px solid #5ac9c3;
  border-left: 2px solid #5ac9c3;
}

.abtauth .bracketdeco.tr {
  top: -8px;
  right: -8px;
  border-top: 2px solid #5ac9c3;
  border-right: 2px solid #5ac9c3;
}

.abtauth .bracketdeco.bl {
  bottom: -8px;
  left: -8px;
  border-bottom: 2px solid #5ac9c3;
  border-left: 2px solid #5ac9c3;
}

.abtauth .bracketdeco.br {
  bottom: -8px;
  right: -8px;
  border-bottom: 2px solid #5ac9c3;
  border-right: 2px solid #5ac9c3;
}

.abtauth .parallines {
  position: absolute;
  bottom: -32px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.abtauth .parallines span {
  display: block;
  height: 1px;
  background: #5ac9c3;
  opacity: 0.35;
}

.abtauth .parallines span:nth-child(1) {
  width: 80px;
}

.abtauth .parallines span:nth-child(2) {
  width: 56px;
}

.abtauth .parallines span:nth-child(3) {
  width: 40px;
}

.abtauth .parallines span:nth-child(4) {
  width: 28px;
}

.abtauth .profiletext {
  flex: 1 1 0;
  padding-top: 8px;
}

.abtauth .profiletext .eyebrow {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5ac9c3;
  margin-bottom: 16px;
  display: block;
}

.abtauth .profiletext h1 {
  font-size: 50px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #f1ecdd;
}

.abtauth .profiletext h1 .accent {
  color: #5ac9c3;
}

.abtauth .profiletext .lead {
  font-size: 20px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0 0 32px;
}

.abtauth .profiletext .bio {
  font-size: 17px;
  line-height: 1.55;
  color: #b0a480;
  margin: 0 0 16px;
}

.abtauth .metricrow {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.abtauth .metricitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abtauth .metricitem .mval {
  font-size: 36px;
  line-height: 1.1;
  color: #5ac9c3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.abtauth .metricitem .mval .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #8ad9c8;
  margin-bottom: 4px;
}

.abtauth .metricitem .mlabel {
  font-size: 15px;
  color: #7c8494;
  line-height: 1.55;
}

.abtauth .divider-convex {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 48px;
}

.abtauth .divider-convex svg {
  display: block;
  width: 100%;
  height: 48px;
}

.abtauth .approachblock {
  background: #161d2d;
  padding: 96px 0 80px;
}

.abtauth .approachblock .pgwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.abtauth .approachtext h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 32px;
}

.abtauth .approachtext h2 .firstword {
  color: #5ac9c3;
}

.abtauth .approachtext p {
  font-size: 17px;
  line-height: 1.55;
  color: #b0a480;
  margin: 0 0 16px;
}

.abtauth .approachtext .highlight {
  display: inline;
  background: #5ac9c3;
  color: #0c1019;
  padding: 0 4px;
}

.abtauth .methodlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.abtauth .methodlist li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.abtauth .methodlist .mnum {
  font-size: 50px;
  line-height: 1.1;
  color: #5ac9c3;
  opacity: 0.28;
  flex: 0 0 48px;
  text-align: right;
  font-weight: 700;
}

.abtauth .methodlist .mtext {
  flex: 1 1 0;
}

.abtauth .methodlist .mtext h4 {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0 0 4px;
}

.abtauth .methodlist .mtext p {
  font-size: 15px;
  line-height: 1.55;
  color: #7c8494;
  margin: 0;
}

.abtauth .divider-convex2 {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 48px;
}

.abtauth .divider-convex2 svg {
  display: block;
  width: 100%;
  height: 48px;
}

.abtauth .workblock {
  background: #0c1019;
  padding: 80px 0 96px;
}

.abtauth .workblock .pgwrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.abtauth .workblock .worktop {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.abtauth .workblock .workleft {
  flex: 0 0 420px;
}

.abtauth .workblock .workleft h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 16px;
}

.abtauth .workblock .workleft h2 .firstword {
  color: #5ac9c3;
}

.abtauth .workblock .workleft p {
  font-size: 17px;
  line-height: 1.55;
  color: #b0a480;
  margin: 0 0 16px;
}

.abtauth .workblock .workright {
  flex: 1 1 0;
}

.abtauth .imgrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.abtauth .imgcard {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid #5ac9c32e;
}

.abtauth .imgcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease-out;
}

.abtauth .imgcard:hover img {
  transform: scale(1.04);
}

.abtauth .imgcard .cardlabel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c1019c7;
  padding: 8px 16px;
  font-size: 15px;
  color: #8ad9c8;
}

.abtauth .largeimgcard {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid #5ac9c32e;
  margin-top: 16px;
}

.abtauth .largeimgcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abtauth .largeimgcard .cardlabel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c1019c7;
  padding: 8px 16px;
  font-size: 15px;
  color: #8ad9c8;
}

.abtauth .divider-convex3 {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 48px;
}

.abtauth .divider-convex3 svg {
  display: block;
  width: 100%;
  height: 48px;
}

.abtauth .contactblock {
  background: #121826;
  padding: 80px 0 96px;
}

.abtauth .contactblock .pgwrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.abtauth .contactleft {
  flex: 1 1 0;
}

.abtauth .contactleft h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 16px;
}

.abtauth .contactleft h2 .firstword {
  color: #5ac9c3;
}

.abtauth .contactleft p {
  font-size: 17px;
  line-height: 1.55;
  color: #b0a480;
  margin: 0 0 16px;
}

.abtauth .contactright {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.abtauth .infocard {
  background: #0c1019;
  border: 1px solid #5ac9c326;
  padding: 32px;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  position: relative;
  overflow: hidden;
}

.abtauth .infocard::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-right: 1px solid #5ac9c338;
  border-top: 1px solid #5ac9c338;
  pointer-events: none;
}

.abtauth .infocard h5 {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5ac9c3;
  margin: 0 0 16px;
}

.abtauth .infocard .emaillink {
  font-size: 17px;
  color: #8ad9c8;
  text-decoration: none;
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #8ad9c81f;
  transition: color 0.15s ease-out;
}

.abtauth .infocard .emaillink:hover {
  color: #f1ecdd;
}

.abtauth .infocard .domainval {
  font-size: 17px;
  color: #8ad9c8;
  margin-top: 8px;
  display: block;
}

.abtauth .statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.abtauth .statcell {
  background: #0c1019;
  border: 1px solid #5ac9c31f;
  padding: 16px;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
}

.abtauth .statcell .sval {
  font-size: 26px;
  line-height: 1.1;
  color: #5ac9c3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.abtauth .statcell .sval .arrowup {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #8ad9c8;
}

.abtauth .statcell .slabel {
  font-size: 15px;
  color: #7c8494;
  margin-top: 4px;
  line-height: 1.55;
}

.abtauth .borderhover {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  font-size: 17px;
  color: #5ac9c3;
  background: transparent;
  border: 0 !important;
  cursor: pointer;
  text-decoration: none;
  margin-top: 16px;
  transition: color 0.18s ease-out;
}

.abtauth .borderhover::before,
.abtauth .borderhover::after {
  content: "";
  position: absolute;
  background: #5ac9c3;
  transition: width 0.15s ease-out, height 0.15s ease-out;
}

.abtauth .borderhover::before {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
}

.abtauth .borderhover::after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
}

.abtauth .borderhover:hover::before,
.abtauth .borderhover:hover::after {
  width: 100%;
}

.abtauth .borderhover .bside {
  position: absolute;
  background: #5ac9c3;
  transition: height 0.15s ease-out 0.12s;
}

.abtauth .borderhover .bside.left {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
}

.abtauth .borderhover .bside.right {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
}

.abtauth .borderhover:hover .bside.left,
.abtauth .borderhover:hover .bside.right {
  height: 100%;
}

.abtauth .rotatesettlecard {
  animation: rotsettle 0.55s ease-out both;
}

@keyframes rotsettle {
  from {
    transform: rotate(-4deg) translateY(18px);
    opacity: 0;
  }

  80% {
    transform: rotate(0.8deg);
  }

  to {
    transform: rotate(0deg) translateY(0);
    opacity: 1;
  }
}

.abtauth .rotatesettlecard2 {
  animation: rotsettle2 0.5s ease-out 0.12s both;
}

@keyframes rotsettle2 {
  from {
    transform: rotate(3deg) translateY(14px);
    opacity: 0;
  }

  80% {
    transform: rotate(-0.5deg);
  }

  to {
    transform: rotate(0deg) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .abtauth .profileblock .pgwrap {
    flex-direction: column;
    gap: 32px;
  }

  .abtauth .portraitcol {
    flex: 0 0 auto;
  }

  .abtauth .approachblock .pgwrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .abtauth .workblock .worktop {
    flex-direction: column;
    gap: 32px;
  }

  .abtauth .workblock .workleft {
    flex: 0 0 auto;
  }

  .abtauth .contactblock .pgwrap {
    flex-direction: column;
    gap: 32px;
  }

  .abtauth .contactright {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .abtauth .profiletext h1 {
    font-size: 36px;
  }

  .abtauth .metricrow {
    gap: 16px;
  }

  .abtauth .imgrow {
    grid-template-columns: 1fr;
  }

  .abtauth .statgrid {
    grid-template-columns: 1fr;
  }

  .abtauth .pgwrap {
    padding: 0 16px;
  }

  .abtauth .portraitframe {
    width: 100%;
    height: 320px;
  }
}

@media (max-width: 360px) {
  .abtauth .profiletext h1 {
    font-size: 26px;
  }

  .abtauth .metricitem .mval {
    font-size: 26px;
  }
}

.blg {
  background-color: #0c1019;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.blg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

.blg * {
  box-sizing: border-box;
}

.blg .pagebound {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

.blg .pagetop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
  padding-top: 48px;
}

.blg .pagetop .imgside {
  position: relative;
  overflow: hidden;
  border-radius: 38px 0 0 38px;
}

.blg .pagetop .imgside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  display: block;
  border: 2px solid #5ac9c347;
  border-radius: 38px 0 0 38px;
  animation: fadeimg 0.7s ease-out both;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

@keyframes fadeimg {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.blg .pagetop .txtside {
  background: #0c1019d1;
  border: 1px solid #5ac9c32e;
  border-left: none;
  border-radius: 0 38px 38px 0;
  padding: 48px 48px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.blg .pagetop .txtside .pagelabel {
  font-size: 15px;
  color: #5ac9c3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.blg .pagetop .txtside h1 {
  font-size: 50px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 16px;
}

.blg .pagetop .txtside h1 .accentword {
  background: #5ac9c3;
  color: #0c1019;
  padding: 0 8px;
  border-radius: 0;
  display: inline;
}

.blg .pagetop .txtside .subtext {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0 0 32px;
}

.blg .pagetop .txtside .dashedlink {
  display: inline-block;
  border: 2px dashed #5ac9c380;
  border-radius: 38px;
  padding: 8px 32px;
  font-size: 15px;
  color: #5ac9c3;
  text-decoration: none;
  transition: border-color 0.15s ease-out, color 0.15s ease-out,
    background 0.2s ease;
}

.blg .pagetop .txtside .dashedlink:hover {
  border-color: #5ac9c3;
  background: #5ac9c31a;
  color: #f1ecdd;
}

.blg .divrow1 {
  height: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 48px;
  position: relative;
  z-index: 1;
}

.blg .divrow1 span {
  display: block;
  border-top: 2px dotted #5ac9c340;
  width: 100%;
}

.blg .postsgrid {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
}

.blg .postsgrid .gridhead {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 48px;
}

.blg .postsgrid .gridhead h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0;
}

.blg .postsgrid .gridhead h2 span {
  color: #5ac9c3;
}

.blg .postsgrid .gridhead .countbadge {
  font-size: 15px;
  color: #8ad9c8;
  background: #5ac9c31f;
  border: 1px solid #5ac9c338;
  border-radius: 38px;
  padding: 4px 16px;
}

.blg .cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blg .postcard {
  background: #0f1420e6;
  border: 1px solid #5ac9c326;
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  animation: cardrise 0.25s ease-out both;
}

.blg .postcard:nth-child(2) {
  animation-delay: 0.06s;
}

.blg .postcard:nth-child(3) {
  animation-delay: 0.12s;
}

.blg .postcard:nth-child(4) {
  animation-delay: 0.18s;
}

.blg .postcard:nth-child(5) {
  animation-delay: 0.24s;
}

.blg .postcard:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes cardrise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blg .postcard:hover {
  border-color: #5ac9c373;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.blg .postcard .cardimg {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #5ac9c31f;
}

.blg .postcard .cardimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease-out;
}

.blg .postcard:hover .cardimg img {
  transform: scale(1.03);
}

.blg .postcard .cardimg .cattag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #5ac9c3;
  color: #0c1019;
  font-size: 15px;
  border-radius: 38px;
  padding: 4px 16px;
  font-weight: 600;
}

.blg .postcard .cardbody {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

.blg .postcard .cardbody h3 {
  font-size: 20px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0;
}

.blg .postcard .cardbody h3 span {
  color: #5ac9c3;
}

.blg .postcard .cardbody .subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.blg .postcard .cardbody .desc {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8b8;
  margin: 0;
  flex: 1;
}

.blg .postcard .cardbody .cardmeta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px dotted #5ac9c333;
}

.blg .postcard .cardbody .cardmeta .author {
  font-size: 15px;
  color: #5ac9c3;
}

.blg .postcard .cardbody .cardmeta .metaright {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  color: #f1ecdd80;
}

.blg .postcard .cardbody .cardmeta .metaright .dot {
  width: 3px;
  height: 3px;
  background: #5ac9c366;
  border-radius: 0;
  display: inline-block;
}

.blg .postcard .readlink {
  display: block;
  margin: 0 32px 32px;
  padding: 8px 32px;
  background: #5ac9c31a;
  border: 2px solid #5ac9c34d;
  border-radius: 38px;
  color: #5ac9c3;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  transition: background 0.15s ease-out, border-color 0.15s ease-out,
    color 0.15s ease-out;
  position: relative;
}

.blg .postcard .readlink:hover {
  background: #5ac9c3;
  border-color: #5ac9c3;
  color: #0c1019;
}

.blg .divrow2 {
  height: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 96px;
  position: relative;
  z-index: 1;
}

.blg .divrow2 span {
  display: block;
  border-top: 2px dotted #8ad9c82e;
  width: 100%;
}

.blg .casestrip {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
}

.blg .casestrip .striphead {
  margin-bottom: 48px;
}

.blg .casestrip .striphead h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 8px;
}

.blg .casestrip .striphead h2 span {
  color: #5ac9c3;
}

.blg .casestrip .striphead p {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  max-width: 580px;
}

.blg .casegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.blg .casecard {
  background: #0c1019d9;
  border: 1px solid #8ad9c81f;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
}

.blg .casecard:hover {
  border-color: #8ad9c84d;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.blg .casecard .casenum {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5ac9c314;
  position: relative;
}

.blg .casecard .casenum .ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #5ac9c34d;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.blg .casecard .casenum .ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from 323deg,
    #5ac9c3 0deg,
    #5ac9c3 120deg,
    transparent 120deg
  );
  z-index: 0;
  opacity: 0.7;
}

.blg .casecard .casenum .ring .numval {
  font-size: 17px;
  color: #f1ecdd;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.blg .casecard .casecontent {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blg .casecard .casecontent .casetags {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.blg .casecard .casecontent .casetags .tagitem {
  font-size: 15px;
  color: #8ad9c8;
  background: #8ad9c814;
  border: 1px solid #8ad9c826;
  border-radius: 38px;
  padding: 4px 16px;
}

.blg .casecard .casecontent h4 {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0;
}

.blg .casecard .casecontent h4 span {
  color: #5ac9c3;
}

.blg .casecard .casecontent .casedesc {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8a6;
  margin: 0;
}

.blg .casecard .casecontent .casefooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.blg .casecard .casecontent .casefooter .caseauthor {
  font-size: 15px;
  color: #5ac9c3cc;
}

.blg .casecard .casecontent .casefooter .casedate {
  font-size: 15px;
  color: #f1ecdd66;
}

.blg .casecard .casecontent .caselink {
  display: inline-block;
  font-size: 15px;
  color: #5ac9c3;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease-out;
  margin-top: 8px;
  align-self: flex-start;
}

.blg .casecard .casecontent .caselink:hover {
  color: #f1ecdd;
}

.blg .divrow3 {
  height: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 96px;
  position: relative;
  z-index: 1;
}

.blg .divrow3 span {
  display: block;
  border-top: 2px dotted #5ac9c333;
  width: 100%;
}

.blg .topicblock {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
  background: #f1ecdd0a;
  border-top: 1px solid #f1ecdd14;
  border-bottom: 1px solid #f1ecdd14;
}

.blg .topicblock .topicinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 48px;
  align-items: start;
}

.blg .topicblock .topicinner .topicmain h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0 0 32px;
}

.blg .topicblock .topicinner .topicmain h2 span {
  color: #5ac9c3;
}

.blg .topicblock .topicinner .topicmain .topictext {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0 0 32px;
}

.blg .topicblock .topicinner .topicmain .topictext2 {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8b3;
  margin: 0 0 32px;
}

.blg .topicblock .topicinner .topicmain .kwtag {
  display: inline-block;
  background: #5ac9c326;
  border: 1px solid #5ac9c359;
  border-radius: 38px;
  padding: 8px 32px;
  font-size: 15px;
  color: #5ac9c3;
}

.blg .topicblock .topicinner .topiccol {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blg .topicblock .topicinner .topiccol .colcard {
  background: #5ac9c312;
  border: 1px solid #5ac9c333;
  border-radius: 38px;
  padding: 32px;
  box-shadow: inset 0 4px 6px #5ac9c30d;
}

.blg .topicblock .topicinner .topiccol .colcard h5 {
  font-size: 15px;
  color: #5ac9c3;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blg .topicblock .topicinner .topiccol .colcard p {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.blg .contactband {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
}

.blg .contactband .bandinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.blg .contactband .bandinner h2 {
  font-size: 36px;
  line-height: 1.1;
  color: #f1ecdd;
  margin: 0;
}

.blg .contactband .bandinner h2 span {
  color: #5ac9c3;
}

.blg .contactband .bandinner p {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  max-width: 560px;
}

.blg .contactband .bandinner .emaillink {
  display: inline-block;
  background: #5ac9c3;
  color: #0c1019;
  font-size: 17px;
  border-radius: 38px;
  padding: 16px 48px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid #5ac9c3;
  transition: background 0.18s ease-out, color 0.18s ease-out,
    border-color 0.18s ease-out;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.blg .contactband .bandinner .emaillink:hover {
  background: transparent;
  color: #5ac9c3;
  border-color: #5ac9c3;
}

@media (max-width: 1024px) {
  .blg .pagetop {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
    padding-top: 32px;
  }

  .blg .pagetop .imgside {
    border-radius: 38px 38px 0 0;
    height: 280px;
  }

  .blg .pagetop .imgside img {
    border-radius: 38px 38px 0 0;
    height: 280px;
  }

  .blg .pagetop .txtside {
    border-left: 1px solid #5ac9c32e;
    border-top: none;
    border-radius: 0 0 38px 38px;
    padding: 32px 32px 48px;
  }

  .blg .pagetop .txtside h1 {
    font-size: 36px;
  }

  .blg .cardgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blg .casegrid {
    grid-template-columns: 1fr;
  }

  .blg .topicblock .topicinner {
    grid-template-columns: 1fr;
    padding: 48px 32px;
  }
}

@media (max-width: 640px) {
  .blg .pagebound {
    padding: 0 16px;
  }

  .blg .pagetop .txtside h1 {
    font-size: 26px;
  }

  .blg .cardgrid {
    grid-template-columns: 1fr;
  }

  .blg .casegrid {
    grid-template-columns: 1fr;
  }

  .blg .casecard {
    flex-direction: column;
  }

  .blg .casecard .casenum {
    width: 100%;
    height: 48px;
    flex-direction: row;
  }

  .blg .postsgrid .gridhead h2 {
    font-size: 26px;
  }

  .blg .casestrip .striphead h2 {
    font-size: 26px;
  }

  .blg .contactband .bandinner h2 {
    font-size: 26px;
  }

  .blg .topicblock .topicinner .topicmain h2 {
    font-size: 26px;
  }
}

@media (max-width: 360px) {
  .blg .pagetop .txtside {
    padding: 16px 16px 32px;
  }

  .blg .postcard .cardbody {
    padding: 16px;
  }

  .blg .postcard .readlink {
    margin: 0 16px 16px;
  }
}

.cstud {
  background: #0c1019;
  color: #f1ecdd;
  overflow-x: hidden;
  padding: 0;
}

.cstud a {
  text-decoration: none !important;
  color: inherit;
}

.cstud .splitscreen {
  display: flex;
  flex-direction: row;
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
}

.cstud .splitleft {
  flex: 1 1 55%;
  background: #0f1420;
  padding: 96px 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cstud .splitleft::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #5ac9c3 0%, transparent 100%);
}

.cstud .splitright {
  flex: 1 1 45%;
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.cstud .splitright img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cstud .splitright .imgoverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, transparent 30%, #0f1420 100%);
  pointer-events: none;
}

.cstud .pagelabel {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5ac9c3;
  margin-bottom: 16px;
  display: block;
}

.cstud .splith1 {
  font-size: 50px;
  line-height: 1.1;
  margin-bottom: 32px;
  margin-top: 0;
}

.cstud .splith1 .wordone {
  color: #5ac9c3;
}

.cstud .splith1 .wordtwo {
  color: #f1ecdd;
}

.cstud .countrow {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 48px;
  margin-top: 32px;
}

.cstud .countitem {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cstud .countnum {
  font-size: 36px;
  line-height: 1.1;
  color: #5ac9c3;
}

.cstud .countbar {
  height: 2px;
  background: #5ac9c3;
  opacity: 0.35;
  border-radius: 0;
}

.cstud .countlabel {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
}

.cstud .svgdivider {
  width: 100%;
  display: block;
  overflow: hidden;
  line-height: 0;
  background: #0c1019;
}

.cstud .svgdivider svg {
  display: block;
  width: 100%;
}

.cstud .cardgridouter {
  background: #0c1019;
  padding: 96px 0;
}

.cstud .cardgridinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
}

.cstud .gridlabel {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5ac9c3;
  margin-bottom: 8px;
  display: block;
}

.cstud .gridheading {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 48px;
}

.cstud .gridheading .wd1 {
  color: #5ac9c3;
}

.cstud .gridheading .wd2 {
  color: #f1ecdd;
}

.cstud .postgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.cstud .postcard {
  background: #0f1420;
  border-radius: 0;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease-out, background 0.15s ease-out;
  position: relative;
}

.cstud .postcard:hover {
  background: #121826;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.cstud .postcard:focus-within {
  outline: 2px solid #5ac9c3;
  outline-offset: 4px;
}

.cstud .cardimgwrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.cstud .cardimgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.2s ease-out;
}

.cstud .postcard:hover .cardimgwrap img {
  transform: scale(1.03);
}

.cstud .cardbody {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

.cstud .tagrow {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.cstud .atag {
  font-size: 15px;
  background: #5ac9c3;
  color: #0c1019;
  padding: 4px 16px;
  border-radius: 38px;
  line-height: 1.55;
}

.cstud .ctag {
  font-size: 15px;
  border: 1px solid #8ad9c8;
  color: #8ad9c8;
  padding: 4px 16px;
  border-radius: 38px;
  line-height: 1.55;
}

.cstud .cardtitle {
  font-size: 20px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0;
}

.cstud .carddesc {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  flex: 1;
}

.cstud .cardmeta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #8ad9c81f;
}

.cstud .cardauthor {
  font-size: 15px;
  color: #5ac9c3;
}

.cstud .cardlink {
  margin-top: 0;
  display: inline-block;
  font-size: 15px;
  color: #5ac9c3;
  border-bottom: 1px solid #5ac9c366;
  padding-bottom: 2px;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.cstud .postcard:hover .cardlink {
  color: #8ad9c8;
  border-color: #8ad9c899;
}

.cstud .geobg {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.07;
  animation: geoPulse 4.5s ease-in-out infinite;
}

@keyframes geoPulse {
  0%,
  100% {
    opacity: 0.07;
  }

  50% {
    opacity: 0.13;
  }
}

.cstud .svgdivider2 {
  width: 100%;
  display: block;
  overflow: hidden;
  line-height: 0;
  background: #111623;
}

.cstud .svgdivider2 svg {
  display: block;
  width: 100%;
}

.cstud .texturebg {
  background: #111623;
  position: relative;
  padding: 96px 0;
}

.cstud .texturebg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
}

.cstud .textureinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

.cstud .twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cstud .textcol h2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 32px;
}

.cstud .textcol h2 .wd1 {
  color: #5ac9c3;
}

.cstud .textcol h2 .wd2 {
  color: #f1ecdd;
}

.cstud .textcol p {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0 0 16px;
}

.cstud .accentword {
  background: #5ac9c3;
  color: #0c1019;
  padding: 0 8px;
  border-radius: 0;
}

.cstud .imgcol {
  position: relative;
}

.cstud .imgcol img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.cstud .svgdivider3 {
  width: 100%;
  display: block;
  overflow: hidden;
  line-height: 0;
  background: #0c1019;
}

.cstud .svgdivider3 svg {
  display: block;
  width: 100%;
}

.cstud .expertsouter {
  background: #0c1019;
  padding: 96px 0;
  animation: bgOsc 7s ease-in-out infinite;
}

@keyframes bgOsc {
  0%,
  100% {
    background: #0c1019;
  }

  50% {
    background: #0d111b;
  }
}

.cstud .expertsinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
}

.cstud .expertsheading {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.cstud .expertsheading .wd1 {
  color: #5ac9c3;
}

.cstud .expertsheading .wd2 {
  color: #f1ecdd;
}

.cstud .expertssub {
  font-size: 17px;
  color: #8ad9c8;
  line-height: 1.55;
  margin: 0 0 48px;
  max-width: 560px;
}

.cstud .expertsgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.cstud .expertcard {
  background: #0f1420;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
  transition: box-shadow 0.18s ease-out;
  border-radius: 0;
}

.cstud .expertcard:hover {
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.cstud .expertcard:focus-within {
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
}

.cstud .numblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cstud .bignum {
  font-size: 50px;
  line-height: 1.1;
  color: #5ac9c3;
}

.cstud .numfill {
  height: 2px;
  background: linear-gradient(90deg, #5ac9c3 0%, transparent 100%);
  border-radius: 0;
}

.cstud .expertcardh {
  font-size: 20px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0;
}

.cstud .expertcardp {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.cstud .portraitrow {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-top: 48px;
  align-items: flex-start;
}

.cstud .portraitcard {
  display: flex;
  flex-direction: row;
  gap: 32px;
  flex: 1;
  background: #0f1420;
  padding: 32px;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.cstud .portraitwrap {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 0;
  flex-shrink: 0;
}

.cstud .portraitwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cstud .portraittext {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.cstud .portraitname {
  font-size: 20px;
  color: #f1ecdd;
  margin: 0;
}

.cstud .portraitrole {
  font-size: 15px;
  color: #5ac9c3;
}

.cstud .portraitquote {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

@media (max-width: 1024px) {
  .cstud .splitscreen {
    flex-direction: column;
  }

  .cstud .splitright {
    min-height: 260px;
  }

  .cstud .splith1 {
    font-size: 36px;
  }

  .cstud .postgrid {
    grid-template-columns: 1fr;
  }

  .cstud .twocol {
    grid-template-columns: 1fr;
  }

  .cstud .expertsgrid {
    grid-template-columns: 1fr 1fr;
  }

  .cstud .portraitrow {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .cstud .splitleft {
    padding: 48px 16px;
  }

  .cstud .cardgridinner,
  .cstud .textureinner,
  .cstud .expertsinner {
    padding: 0 16px;
  }

  .cstud .expertsgrid {
    grid-template-columns: 1fr;
  }

  .cstud .countrow {
    gap: 32px;
  }

  .cstud .splith1 {
    font-size: 26px;
  }

  .cstud .portraitcard {
    flex-direction: column;
  }

  .cstud .portraitwrap {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .cstud .splith1 {
    font-size: 20px;
  }

  .cstud .bignum {
    font-size: 36px;
  }
}

.frst {
  background: #0c1019;
  color: #f1ecdd;
  overflow-x: hidden;
  width: 100%;
}

.frst .pagewrap {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 32px;
}

.frst .gradline {
  height: 1px;
  background: linear-gradient(to right, #5ac9c3 0%, transparent 60%);
  border: none;
  margin: 0;
}

.frst .gradline.rev {
  background: linear-gradient(to left, #5ac9c3 0%, transparent 60%);
}

.frst .titblock {
  padding: 96px 0 48px;
  border-top: 1px solid #5ac9c3;
  border-bottom: 1px solid #5ac9c340;
}

.frst .titblock .pagewrap {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
}

.frst .titcol {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.frst .imgcol {
  flex: 0 0 420px;
  max-width: 420px;
}

.frst .imgframe {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
  border-top: 2px solid #5ac9c3;
  border-bottom: 2px solid #8ad9c8;
}

.frst .imgframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.15);
  transform: scale(0.97);
  animation: imgload 0.18s ease-out forwards;
}

@keyframes imgload {
  to {
    transform: scale(1);
  }
}

.frst .titlabel {
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5ac9c3;
  line-height: 1.55;
}

.frst .tith1 {
  font-size: 50px;
  line-height: 1.1;
  margin: 0;
}

.frst .tith1 .accent {
  color: #5ac9c3;
}

.frst .titdesc {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.frst .titlinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

.frst .btnprim {
  display: inline-block;
  padding: 16px 32px;
  background: #5ac9c3;
  color: #0c1019;
  font-size: 15px;
  font-weight: 700;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid #5ac9c3;
  transition: background 0.15s ease-out, color 0.15s ease-out,
    border-color 0.15s ease-out;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frst .btnprim:hover {
  background: transparent;
  color: #5ac9c3;
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
}

.frst .btnsec {
  display: inline-block;
  padding: 16px 32px;
  background: transparent;
  color: #8ad9c8;
  font-size: 15px;
  border-radius: 0;
  text-decoration: none;
  border: 2px solid #8ad9c8;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frst .btnsec:hover {
  border-color: #5ac9c3;
  color: #5ac9c3;
  outline: 2px solid #5ac9c3;
  outline-offset: 3px;
}

.frst .postfeed {
  padding: 96px 0;
  background: #0f1420;
}

.frst .feedtop {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 16px;
}

.frst .feedh2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0;
}

.frst .feedh2 .first {
  color: #5ac9c3;
}

.frst .feedlink {
  font-size: 15px;
  color: #5ac9c3;
  text-decoration: none;
  border-bottom: 1px solid #5ac9c366;
  transition: border-color 0.15s ease-out;
  white-space: nowrap;
}

.frst .feedlink:hover {
  border-color: #5ac9c3;
}

.frst .postlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.frst .postcard {
  background: #0c1019;
  border-radius: 0;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid #5ac9c333;
  transition: border-color 0.15s ease-out, box-shadow 0.18s ease-out;
  position: relative;
}

.frst .postcard:hover {
  border-color: #5ac9c3;
  box-shadow: 1px 5px 18px 0 #5ac9c32e 6px 6px 0 0 #8ad9c82e;
}

.frst .postcard.featured {
  grid-column: span 2;
  flex-direction: row;
}

.frst .postcard.featured .cardimg {
  flex: 0 0 48%;
}

.frst .postcard.featured .cardbody {
  flex: 1 1 0;
  padding: 32px;
}

.frst .cardimg {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.frst .cardimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.18s ease-out;
}

.frst .postcard:hover .cardimg img {
  transform: scale(1.03);
}

.frst .cardbody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.frst .cardtag {
  font-size: 15px;
  color: #5ac9c3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.55;
}

.frst .cardh3 {
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  color: #f1ecdd;
}

.frst .cardh3.big {
  font-size: 26px;
}

.frst .cardsub {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
  margin: 0;
}

.frst .carddesc {
  font-size: 15px;
  color: #f1ecddb3;
  line-height: 1.55;
  margin: 0;
}

.frst .cardmeta {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.frst .metaitem {
  font-size: 15px;
  color: #f1ecdd80;
  line-height: 1.55;
}

.frst .metaauthor {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
}

.frst .depthblock {
  padding: 48px 0;
  background: #f2ffff;
  border-top: 1px solid #8ad9c8;
  border-bottom: 1px solid #8ad9c8;
}

.frst .depthblock .pagewrap {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
}

.frst .depthtext {
  flex: 1 1 0;
}

.frst .depthh2 {
  font-size: 36px;
  line-height: 1.1;
  color: #0c1019;
  margin: 0 0 16px;
}

.frst .depthh2 .first {
  color: #5ac9c3;
}

.frst .depthp {
  font-size: 17px;
  line-height: 1.55;
  color: #1f2a3f;
  margin: 0 0 16px;
}

.frst .depthp:last-child {
  margin-bottom: 0;
}

.frst .depthnums {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.frst .numrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #0c1019;
  border-radius: 0;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.frst .numval {
  font-size: 36px;
  line-height: 1.1;
  color: #5ac9c3;
  font-weight: 700;
  min-width: 60px;
}

.frst .numlabel {
  font-size: 15px;
  color: #f1ecdd;
  line-height: 1.55;
}

.frst .casesect {
  padding: 96px 0;
  background: #0c1019;
}

.frst .casetop {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 16px;
}

.frst .caseh2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0;
}

.frst .caseh2 .first {
  color: #5ac9c3;
}

.frst .casegrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.frst .casecard {
  background: #0f1420;
  border-radius: 0;
  box-shadow: 1px 3px 2px 0 #5ac9c30d;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid #5ac9c333;
  transition: border-color 0.12s ease-out, box-shadow 0.15s ease-out;
}

.frst .casecard:hover {
  border-color: #5ac9c3;
  box-shadow: 4px 8px 0 0 #8ad9c81f 1px 10px 36px 0 #5ac9c321;
}

.frst .caseimg {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.frst .caseimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.18s ease-out;
}

.frst .casecard:hover .caseimg img {
  transform: scale(1.04);
}

.frst .casebody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.frst .casetag {
  font-size: 15px;
  color: #5ac9c3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.frst .caseh4 {
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  color: #f1ecdd;
}

.frst .casedesc {
  font-size: 15px;
  color: #f1ecdda6;
  line-height: 1.55;
  margin: 0;
}

.frst .casemeta {
  font-size: 15px;
  color: #f1ecdd66;
  margin-top: 8px;
}

.frst .teamsect {
  padding: 96px 0;
  background: #0f1420;
  border-top: 1px solid #5ac9c326;
}

.frst .teamgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.frst .teamtext {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.frst .teamh2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0;
}

.frst .teamh2 .first {
  color: #5ac9c3;
}

.frst .teamp {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.frst .teamcards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.frst .authorcard {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  background: #0c1019;
  padding: 16px;
  border-radius: 38px;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
}

.frst .authorpic {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 38px;
  overflow: hidden;
}

.frst .authorpic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.frst .authorinfo {
  flex: 1 1 0;
}

.frst .authorname {
  font-size: 17px;
  color: #f1ecdd;
  line-height: 1.55;
  font-weight: 700;
}

.frst .authorrole {
  font-size: 15px;
  color: #5ac9c3;
  line-height: 1.55;
}

.frst .authorbio {
  font-size: 15px;
  color: #f1ecdda6;
  line-height: 1.55;
  margin-top: 4px;
}

.frst .topread {
  padding: 96px 0;
  background: #0c1019;
}

.frst .topreadwrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}

.frst .topreadsidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.frst .topreadsidebar .sideimg {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 24px;
}

.frst .topreadsidebar .sideimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.frst .topreadh2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 32px;
}

.frst .topreadh2 .first {
  color: #5ac9c3;
}

.frst .rankedlist {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: rankcount;
}

.frst .rankitem {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #5ac9c31f;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease-out;
}

.frst .rankitem:last-child {
  border-bottom: none;
}

.frst .rankitem:hover .ranknum {
  color: #f1ecdd;
}

.frst .ranknum {
  font-size: 36px;
  line-height: 1.1;
  color: #5ac9c359;
  font-weight: 700;
  min-width: 48px;
  transition: color 0.12s ease-out;
}

.frst .rankbody {
  flex: 1 1 0;
}

.frst .ranktitle {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0 0 4px;
}

.frst .rankdesc {
  font-size: 15px;
  color: #f1ecdd8c;
  line-height: 1.55;
  margin: 0;
}

.frst .ranktag {
  font-size: 15px;
  color: #5ac9c3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.frst .engagesect {
  padding: 96px 0;
  background: #0f1420;
  border-top: 1px solid #8ad9c81a;
  border-bottom: 1px solid #8ad9c81a;
}

.frst .engagegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.frst .engagetext {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.frst .engageh2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 0;
}

.frst .engageh2 .first {
  color: #5ac9c3;
}

.frst .engagep {
  font-size: 17px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
}

.frst .engageform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0c1019;
  padding: 32px;
  border-radius: 0;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  border-top: 2px solid #5ac9c3;
}

.frst .engageform label {
  font-size: 15px;
  color: #8ad9c8;
  line-height: 1.55;
  display: block;
  margin-bottom: 4px;
}

.frst .engageform input,
.frst .engageform textarea {
  width: 100%;
  background: #0f1420;
  border: 1px solid #5ac9c34d;
  border-radius: 0;
  color: #f1ecdd;
  font-size: 15px;
  line-height: 1.55;
  padding: 12px 16px;
  box-sizing: border-box;
  transition: border-color 0.15s ease-out;
  outline: none;
}

.frst .engageform input::placeholder,
.frst .engageform textarea::placeholder {
  color: #f1ecdd59;
}

.frst .engageform input:focus,
.frst .engageform textarea:focus {
  border-color: #5ac9c3;
  box-shadow: inset 0 2px 6px 0 #5ac9c314;
}

.frst .engageform textarea {
  resize: vertical;
  min-height: 96px;
}

.frst .engageform .btnprim {
  align-self: flex-start;
}

.frst .progressbar {
  width: 100%;
  height: 8px;
  background: #5ac9c326;
  border-radius: 0;
  margin-top: 8px;
  overflow: hidden;
}

.frst .progressfill {
  height: 100%;
  background: conic-gradient(
    from 323deg,
    #5ac9c3 0%,
    #8ad9c8 60%,
    #5ac9c3 100%
  );
  border-radius: 0;
  animation: progressgrow 0.18s ease-out forwards;
}

@keyframes progressgrow {
  from {
    width: 0;
  }
}

.frst .progressrow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.frst .progresslabel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 15px;
  color: #f1ecdda6;
}

.frst .highlightword {
  background: #5ac9c3;
  color: #0c1019;
  padding: 0 8px;
  border-radius: 0;
}

.frst .titblock {
  position: relative;
  overflow: hidden;
}

.frst .titblock::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, #5ac9c326 0%, transparent 70%);
  pointer-events: none;
  animation: heroglow 6s ease-in-out infinite;
}

@keyframes heroglow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.frst .tith1 .accent {
  background: linear-gradient(90deg, #5ac9c3 0%, #8ad9c8 50%, #5ac9c3 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldshift 6s ease-in-out infinite;
}

@keyframes goldshift {
  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}

.frst .btnprim,
.frst .engageform .btnprim {
  position: relative;
  overflow: hidden;
}

.frst .btnprim::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, #0a0d1633, transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease-out;
}

.frst .btnprim:hover::after {
  left: 130%;
}

.frst .postlist .postcard,
.frst .casegrid .casecard,
.frst .teamcards .authorcard {
  animation: cardrise 0.5s ease-out both;
}

.frst .postlist .postcard:nth-child(2) {
  animation-delay: 0.08s;
}

.frst .postlist .postcard:nth-child(3) {
  animation-delay: 0.16s;
}

.frst .postlist .postcard:nth-child(4) {
  animation-delay: 0.24s;
}

.frst .casegrid .casecard:nth-child(2) {
  animation-delay: 0.1s;
}

.frst .casegrid .casecard:nth-child(3) {
  animation-delay: 0.2s;
}

.frst .teamcards .authorcard:nth-child(2) {
  animation-delay: 0.12s;
}

.frst .rankitem {
  border-radius: 0;
  padding-left: 8px;
  margin-left: -8px;
  transition: background 0.18s ease-out, padding-left 0.18s ease-out;
}

.frst .rankitem:hover {
  background: #5ac9c312;
  padding-left: 16px;
}

.frst .numrow {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.frst .numrow:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #5ac9c321;
}

.frst .authorcard {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.frst .authorcard:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #5ac9c31f;
}

@media (prefers-reduced-motion: reduce) {
  .frst .titblock::before,
  .frst .tith1 .accent {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .frst .titblock .pagewrap {
    flex-direction: column;
  }

  .frst .imgcol {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .frst .postcard.featured {
    flex-direction: column;
  }

  .frst .postcard.featured .cardimg {
    flex: 0 0 auto;
  }

  .frst .casegrid {
    grid-template-columns: 1fr 1fr;
  }

  .frst .topreadwrap {
    grid-template-columns: 1fr;
  }

  .frst .topreadsidebar {
    display: none;
  }

  .frst .depthblock .pagewrap {
    flex-direction: column;
  }

  .frst .depthnums {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .frst .tith1 {
    font-size: 36px;
  }

  .frst .postlist {
    grid-template-columns: 1fr;
  }

  .frst .postcard.featured {
    grid-column: span 1;
  }

  .frst .casegrid {
    grid-template-columns: 1fr;
  }

  .frst .teamgrid {
    grid-template-columns: 1fr;
  }

  .frst .engagegrid {
    grid-template-columns: 1fr;
  }

  .frst .feedh2,
  .frst .caseh2,
  .frst .teamh2,
  .frst .topreadh2,
  .frst .engageh2,
  .frst .depthh2 {
    font-size: 26px;
  }

  .frst .pagewrap {
    padding: 0 16px;
  }

  .frst .titblock {
    padding: 48px 0 32px;
  }

  .frst .postfeed,
  .frst .casesect,
  .frst .teamsect,
  .frst .topread,
  .frst .engagesect {
    padding: 48px 0;
  }
}

@media (max-width: 360px) {
  .frst .tith1 {
    font-size: 26px;
  }

  .frst .titlinks {
    flex-direction: column;
  }

  .frst .btnprim,
  .frst .btnsec {
    width: 100%;
    text-align: center;
  }
}

.SuccessPage {
  min-height: 100vh;
  background-color: #070911;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 16px;
}

.SuccessPage .SuccessWrapper {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.SuccessPage .SuccessIcon {
  width: 88px;
  height: 88px;
  border-radius: 38px;
  background: linear-gradient(323deg, #5ac9c3 0%, #8ad9c8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  flex-shrink: 0;
}

.SuccessPage .SuccessIcon svg {
  width: 40px;
  height: 40px;
  display: block;
}

.SuccessPage .SuccessContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 560px;
}

.SuccessPage .SuccessHeading {
  font-size: 50px;
  line-height: 1.1;
  color: #8ad9c8;
  margin: 0;
}

.SuccessPage .SuccessHeading span {
  color: #5ac9c3;
}

.SuccessPage .SuccessSubtext {
  font-size: 17px;
  line-height: 1.55;
  color: #f1ecdd;
  margin: 0;
  opacity: 0.82;
}

.SuccessPage .SuccessDivider {
  width: 64px;
  height: 2px;
  background: linear-gradient(323deg, #5ac9c3, #8ad9c8);
  border-radius: 0;
  flex-shrink: 0;
}

.SuccessPage .SuccessNote {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  opacity: 0.65;
  text-align: center;
  max-width: 420px;
}

.SuccessPage .SuccessActions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.SuccessPage .BtnPrimary {
  display: inline-block;
  padding: 16px 32px;
  background: linear-gradient(323deg, #5ac9c3 0%, #8ad9c8 100%);
  color: #070911;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 700;
  border-radius: 0;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 1px 5px 18px 0 #5ac9c314;
  transition: box-shadow 0.15s ease-out, outline-offset 0.15s ease-out;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.SuccessPage .BtnPrimary:hover {
  box-shadow: 1px 10px 36px 0 #5ac9c321;
  outline: 2px solid #5ac9c3;
  outline-offset: 4px;
}

.SuccessPage .BtnPrimary:focus-visible {
  outline: 2px solid #5ac9c3;
  outline-offset: 4px;
}

.SuccessPage .BtnSecondary {
  display: inline-block;
  padding: 16px 32px;
  background: transparent;
  color: #8ad9c8;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 600;
  border-radius: 0;
  border: 2px solid #5ac9c3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    outline-offset 0.15s ease-out;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.SuccessPage .BtnSecondary:hover {
  background-color: #5ac9c31f;
  color: #f1ecdd;
  outline: 2px solid #8ad9c8;
  outline-offset: 4px;
}

.SuccessPage .BtnSecondary:focus-visible {
  outline: 2px solid #8ad9c8;
  outline-offset: 4px;
}

.SuccessPage .SuccessContact {
  font-size: 15px;
  line-height: 1.55;
  color: #8ad9c8;
  margin: 0;
  opacity: 0.6;
  text-align: center;
}

.SuccessPage .SuccessContact a {
  color: #5ac9c3;
  text-decoration: none;
  border-bottom: 1px solid #5ac9c366;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

.SuccessPage .SuccessContact a:hover {
  color: #8ad9c8;
  border-color: #8ad9c8b3;
}

@media (max-width: 640px) {
  .SuccessPage {
    padding: 48px 16px;
  }

  .SuccessPage .SuccessHeading {
    font-size: 36px;
  }

  .SuccessPage .SuccessActions {
    flex-direction: column;
    width: 100%;
  }

  .SuccessPage .BtnPrimary,
  .SuccessPage .BtnSecondary {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .SuccessPage .SuccessHeading {
    font-size: 26px;
  }

  .SuccessPage .SuccessIcon {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}