/* ==========================================================
   BLOG PAGE
========================================================== */

.blog-page {

  --blog-bg: #05090d;
  --blog-bg-two: #07121e;

  --blog-card: #0d1928;

  --blog-white: #f3f6f9;
  --blog-text: #9aacbc;
  --blog-muted: #718699;

  --blog-blue: #65c8fa;
  --blog-purple: #8b87ff;
  --blog-teal: #5dd9c8;

  --blog-border:
    rgba(125,170,207,.13);

  --blog-blue-border:
    rgba(101,200,250,.24);

  background:
    var(--blog-bg);

  overflow: hidden;

}


.blog-section {

  position: relative;

  padding:
    100px 0;

}


.blog-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    var(--blog-blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.blog-eyebrow > span {

  width: 20px;

  height: 1px;

  background:
    var(--blog-blue);

}



/* ==========================================================
   HERO
========================================================== */

.blog-hero {

  position: relative;

  padding:
    170px 0 65px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 10% 20%,
      rgba(28,111,179,.22),
      transparent 36%
    ),

    radial-gradient(
      circle at 88% 12%,
      rgba(95,72,196,.14),
      transparent 33%
    ),

    linear-gradient(
      135deg,
      #071421,
      #05090d 54%,
      #091421
    );

}


.blog-grid-bg {

  position: absolute;

  inset: 0;

  opacity: .04;

  background-image:

    linear-gradient(
      rgba(101,200,250,.11) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(101,200,250,.11) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

}


.blog-glow {

  position: absolute;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  filter:
    blur(135px);

  pointer-events: none;

}


.blog-glow-one {

  left: -370px;

  bottom: -310px;

  background:
    rgba(32,123,187,.18);

}


.blog-glow-two {

  right: -380px;

  top: -270px;

  background:
    rgba(91,68,188,.15);

}


.blog-hero-copy {

  position: relative;

  z-index: 2;

  max-width: 960px;

  margin: auto;

  text-align: center;

}


.blog-hero-copy
.blog-eyebrow {

  justify-content: center;

}


.blog-hero-copy h1 {

  margin:
    18px 0 0;

  color:
    var(--blog-white);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      52px,
      6vw,
      82px
    );

  line-height: .99;

  letter-spacing:
    -4.8px;

}


.blog-hero-copy h1 span {

  display: block;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      #65c8fa,
      #72b8ff 42%,
      #8f85ff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.blog-hero-copy > p {

  max-width: 700px;

  margin:
    24px auto 0;

  color:
    #9dafbf;

  font-size: 15px;

  line-height: 1.75;

}



/* ==========================================================
   BLOG TOOLBAR
========================================================== */

.blog-toolbar {

  position: relative;

  z-index: 3;

  margin-top: 48px;

  padding:
    13px;

  display: grid;

  grid-template-columns:
    1fr 240px;

  gap: 14px;

  align-items: center;

  border-radius: 16px;

  border:
    1px solid
    var(--blog-border);

  background:
    rgba(10,24,39,.75);

  backdrop-filter:
    blur(20px);

}


.blog-categories {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}


.blog-category {

  min-height: 39px;

  padding:
    0 13px;

  border: 0;

  border-radius: 8px;

  color:
    #8598aa;

  background:
    transparent;

  font-family:
    inherit;

  font-size: 9px;

  font-weight: 600;

  cursor: pointer;

  transition:
    color .2s ease,
    background .2s ease;

}


.blog-category:hover {

  color:
    #dce7ee;

}


.blog-category.active {

  color:
    #daf4ff;

  background:
    rgba(101,200,250,.09);

}


.blog-search {

  height: 42px;

  padding:
    0 13px;

  display: flex;

  align-items: center;

  gap: 9px;

  border-radius: 9px;

  border:
    1px solid
    rgba(125,170,207,.11);

  background:
    rgba(3,10,17,.4);

}


.blog-search svg {

  width: 15px;

  color:
    #678398;

}


.blog-search input {

  width: 100%;

  border: 0;

  outline: 0;

  color:
    #dce8ef;

  background:
    transparent;

  font-family:
    inherit;

  font-size: 10px;

}


.blog-search input::placeholder {

  color:
    #5f7487;

}



/* ==========================================================
   SECTION LABEL
========================================================== */

.blog-section-label {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 27px;

}


.blog-section-label > span:first-child {

  color:
    var(--blog-blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.blog-section-line {

  flex: 1;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      rgba(101,200,250,.2),
      transparent
    );

}



/* ==========================================================
   FEATURED ARTICLE
========================================================== */

.blog-featured-section {

  background:

    linear-gradient(
      180deg,
      #07111c,
      #05090d
    );

}


.blog-featured {

  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  overflow: hidden;

  border-radius: 21px;

  border:
    1px solid
    var(--blog-border);

  background:

    linear-gradient(
      145deg,
      #111f31,
      #080f16
    );

}


.blog-featured-visual {

  position: relative;

  min-height: 475px;

  padding: 28px;

  overflow: hidden;

  color: inherit;

  text-decoration: none;

  border-right:
    1px solid
    var(--blog-border);

  background:

    radial-gradient(
      circle at 50% 50%,
      rgba(54,145,208,.12),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #10253b,
      #081421
    );

}


.blog-featured-pattern {

  position: absolute;

  inset: 0;

  opacity: .065;

  background-image:

    linear-gradient(
      rgba(101,200,250,.15) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(101,200,250,.15) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

}


.blog-featured-visual-top {

  position: relative;

  z-index: 3;

  display: flex;

  justify-content: space-between;

  color:
    #7593aa;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1px;

}


.blog-featured-visual-top
span:first-child {

  color:
    var(--blog-blue);

}


.blog-featured-diagram {

  position: absolute;

  left: 50%;

  top: 54%;

  width: 380px;

  height: 380px;

  transform:
    translate(-50%,-50%);

}


.blog-diagram-ring {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(101,200,250,.12);

}


.blog-diagram-ring.ring-one {

  width: 205px;

  height: 205px;

}


.blog-diagram-ring.ring-two {

  width: 340px;

  height: 340px;

}


.blog-diagram-center {

  position: absolute;

  z-index: 4;

  left: 50%;

  top: 50%;

  width: 112px;

  height: 112px;

  transform:
    translate(-50%,-50%);

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    #dff4ff;

  background:

    linear-gradient(
      145deg,
      #0e2d4d,
      #071729
    );

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.3);

}


.blog-diagram-center svg {

  width: 26px;

  color:
    var(--blog-blue);

}


.blog-diagram-center strong {

  font-size: 10px;

}


.blog-diagram-node {

  position: absolute;

  z-index: 5;

  padding:
    10px 12px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-radius: 9px;

  color:
    #9cc9e5;

  border:
    1px solid
    rgba(101,200,250,.15);

  background:
    rgba(8,25,41,.92);

  font-size: 8px;

}


.blog-diagram-node svg {

  width: 14px;

}


.blog-diagram-node.node-one {

  left: 0;

  top: 18%;

}


.blog-diagram-node.node-two {

  right: 0;

  top: 22%;

}


.blog-diagram-node.node-three {

  left: 3%;

  bottom: 17%;

}


.blog-diagram-node.node-four {

  right: 1%;

  bottom: 18%;

}


.blog-featured-copy {

  padding:
    48px 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}


.blog-post-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  align-items: center;

}


.blog-post-meta span {

  color:
    #6c8295;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1px;

}


.blog-post-meta
span:first-child {

  color:
    var(--blog-blue);

}


.blog-featured-copy h2 {

  margin:
    20px 0 0;

  color:
    #edf3f7;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      31px,
      3vw,
      42px
    );

  line-height: 1.1;

  letter-spacing:
    -1.8px;

}


.blog-featured-copy > p {

  margin:
    19px 0 0;

  color:
    #8fa1b2;

  font-size: 13px;

  line-height: 1.75;

}


.blog-featured-bottom {

  margin-top: 34px;

  padding-top: 26px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-top:
    1px solid
    var(--blog-border);

}


.blog-read-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--blog-blue);

  text-decoration: none;

  font-size: 10px;

  font-weight: 700;

}


.blog-read-link svg {

  width: 13px;

  transition:
    transform .2s ease;

}


.blog-read-link:hover svg {

  transform:
    translate(3px,-3px);

}


.blog-author {

  display: flex;

  align-items: center;

  gap: 10px;

}


.blog-author-avatar {

  width: 36px;

  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    #06131d;

  background:

    linear-gradient(
      145deg,
      var(--blog-blue),
      var(--blog-purple)
    );

  font-size: 10px;

  font-weight: 800;

}


.blog-author strong {

  display: block;

  color:
    #dfe9ef;

  font-size: 9px;

}


.blog-author small {

  display: block;

  margin-top: 3px;

  color:
    #6f8497;

  font-size: 7px;

}



/* ==========================================================
   HEADINGS
========================================================== */

.blog-heading-row {

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 48px;

}


.blog-heading-row h2,
.blog-center-heading h2 {

  margin:
    15px 0 0;

  color:
    var(--blog-white);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      38px,
      4vw,
      56px
    );

  line-height: 1.05;

  letter-spacing:
    -2.4px;

}


.blog-heading-row h2 span,
.blog-center-heading h2 span {

  display: block;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      var(--blog-blue),
      var(--blog-purple)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.blog-heading-row > p {

  margin: 0;

  max-width: 560px;

  color:
    var(--blog-text);

  font-size: 14px;

  line-height: 1.75;

}


.blog-center-heading {

  max-width: 790px;

  margin:
    0 auto 50px;

  text-align: center;

}


.blog-center-heading
.blog-eyebrow {

  justify-content: center;

}



/* ==========================================================
   POST GRID
========================================================== */

.blog-latest {

  background:
    #05090d;

}


.blog-post-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 16px;

}


.blog-post-card {

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    var(--blog-border);

  background:

    linear-gradient(
      145deg,
      #0f1b2a,
      #080f16
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    opacity .25s ease;

}


.blog-post-card:hover {

  transform:
    translateY(-6px);

  border-color:
    var(--blog-blue-border);

}


.blog-post-card.blog-hidden {

  display: none;

}


.blog-card-visual {

  position: relative;

  height: 230px;

  display: block;

  overflow: hidden;

  color: inherit;

  text-decoration: none;

  border-bottom:
    1px solid
    var(--blog-border);

}


.visual-blue {

  background:

    radial-gradient(
      circle at 70% 30%,
      rgba(62,150,220,.13),
      transparent 34%
    ),

    #0b1928;

}


.visual-purple {

  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(121,91,224,.13),
      transparent 34%
    ),

    #10162b;

}


.visual-teal {

  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(80,206,190,.11),
      transparent 34%
    ),

    #091a20;

}


.visual-indigo {

  background:

    radial-gradient(
      circle at 68% 22%,
      rgba(90,118,234,.14),
      transparent 34%
    ),

    #0c1528;

}


.blog-card-icon {

  position: absolute;

  left: 23px;

  top: 23px;

  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color:
    var(--blog-blue);

  border:
    1px solid
    rgba(101,200,250,.15);

  background:
    rgba(101,200,250,.04);

}


.blog-card-icon svg {

  width: 19px;

}


.blog-card-number {

  position: absolute;

  right: 22px;

  top: 24px;

  color:
    #546b7d;

  font-size: 8px;

}


.blog-card-mini-flow {

  position: absolute;

  left: 50%;

  bottom: 46px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 10px;

}


.blog-card-mini-flow span {

  padding:
    8px 10px;

  border-radius: 8px;

  color:
    #a0b6c6;

  border:
    1px solid
    rgba(101,200,250,.12);

  background:
    rgba(7,18,29,.8);

  font-size: 8px;

}


.blog-card-mini-flow svg {

  width: 12px;

  color:
    #55788f;

}


.blog-data-stack {

  position: absolute;

  left: 50%;

  bottom: 35px;

  width: 74%;

  transform:
    translateX(-50%);

  display: grid;

  gap: 8px;

}


.blog-data-stack div {

  padding:
    9px 12px;

  display: flex;

  align-items: center;

  gap: 9px;

  border-radius: 8px;

  color:
    #8fa4b5;

  border:
    1px solid
    rgba(125,170,207,.09);

  background:
    rgba(5,12,21,.5);

  font-size: 8px;

}


.blog-data-stack span {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--blog-teal);

}


.blog-wave {

  position: absolute;

  left: 50%;

  bottom: 55px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 6px;

}


.blog-wave span {

  width: 4px;

  border-radius: 100px;

  background:

    linear-gradient(
      180deg,
      var(--blog-blue),
      var(--blog-purple)
    );

}


.blog-wave span:nth-child(1) {
  height: 25px;
}

.blog-wave span:nth-child(2) {
  height: 43px;
}

.blog-wave span:nth-child(3) {
  height: 60px;
}

.blog-wave span:nth-child(4) {
  height: 37px;
}

.blog-wave span:nth-child(5) {
  height: 70px;
}

.blog-wave span:nth-child(6) {
  height: 49px;
}

.blog-wave span:nth-child(7) {
  height: 63px;
}

.blog-wave span:nth-child(8) {
  height: 39px;
}

.blog-wave span:nth-child(9) {
  height: 28px;
}


.blog-calendar-mini {

  position: absolute;

  left: 50%;

  bottom: 34px;

  width: 72%;

  padding: 18px;

  transform:
    translateX(-50%);

  border-radius: 12px;

  border:
    1px solid
    rgba(101,200,250,.13);

  background:
    rgba(5,14,24,.63);

}


.blog-calendar-mini span {

  display: block;

  color:
    var(--blog-blue);

  font-size: 7px;

  letter-spacing: .8px;

}


.blog-calendar-mini strong {

  display: block;

  margin-top: 11px;

  color:
    #e6eef4;

  font-size: 12px;

}


.blog-calendar-mini small {

  display: block;

  margin-top: 6px;

  color:
    var(--blog-teal);

  font-size: 7px;

}


.blog-target-visual {

  position: absolute;

  left: 50%;

  bottom: 31px;

  width: 140px;

  height: 140px;

  transform:
    translateX(-50%);

}


.blog-target-visual span {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(101,200,250,.15);

}


.blog-target-visual span:nth-child(1) {

  width: 140px;

  height: 140px;

}


.blog-target-visual span:nth-child(2) {

  width: 95px;

  height: 95px;

}


.blog-target-visual span:nth-child(3) {

  width: 50px;

  height: 50px;

  background:
    rgba(101,200,250,.06);

}


.blog-target-visual svg {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 4;

  width: 20px;

  transform:
    translate(-50%,-50%);

  color:
    var(--blog-blue);

}


.blog-metrics {

  position: absolute;

  left: 50%;

  bottom: 35px;

  width: 78%;

  transform:
    translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 7px;

}


.blog-metrics div {

  padding:
    12px 8px;

  text-align: center;

  border-radius: 8px;

  border:
    1px solid
    rgba(101,200,250,.1);

  background:
    rgba(5,14,24,.5);

}


.blog-metrics small {

  display: block;

  color:
    #667e91;

  font-size: 6px;

}


.blog-metrics strong {

  display: block;

  margin-top: 6px;

  color:
    #e7eff4;

  font-size: 14px;

}


.blog-card-copy {

  min-height: 300px;

  padding: 25px;

  display: flex;

  flex-direction: column;

}


.blog-card-copy h3 {

  margin:
    15px 0 0;

  color:
    #edf3f7;

  font-family:
    "Manrope",
    sans-serif;

  font-size: 19px;

  line-height: 1.28;

  letter-spacing: -.5px;

}


.blog-card-copy > p {

  margin:
    11px 0 24px;

  color:
    #8296a8;

  font-size: 10px;

  line-height: 1.7;

}


.blog-card-copy
.blog-read-link {

  margin-top: auto;

}


.blog-no-results {

  display: none;

  padding:
    70px 20px;

  text-align: center;

}


.blog-no-results.show {

  display: block;

}


.blog-no-results svg {

  width: 32px;

  color:
    #6587a0;

}


.blog-no-results strong {

  display: block;

  margin-top: 15px;

  color:
    #d9e5ed;

}


.blog-no-results p {

  margin-top: 7px;

  color:
    #718698;

  font-size: 10px;

}



/* ==========================================================
   EDITOR PICKS
========================================================== */

.blog-picks {

  background:

    linear-gradient(
      180deg,
      #07111c,
      #05090d
    );

}


.blog-pick-grid {

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    var(--blog-border);

}


.blog-pick {

  min-height: 130px;

  padding:
    24px 27px;

  display: grid;

  grid-template-columns:
    50px 1fr auto;

  gap: 20px;

  align-items: center;

  color: inherit;

  text-decoration: none;

  border-bottom:
    1px solid
    var(--blog-border);

  background:

    linear-gradient(
      90deg,
      rgba(15,29,45,.8),
      rgba(7,14,21,.8)
    );

  transition:
    background .25s ease;

}


.blog-pick:last-child {

  border-bottom: 0;

}


.blog-pick:hover {

  background:

    linear-gradient(
      90deg,
      rgba(21,44,68,.9),
      rgba(8,17,27,.9)
    );

}


.blog-pick > span {

  color:
    var(--blog-blue);

  font-size: 9px;

  font-weight: 700;

}


.blog-pick small {

  color:
    #60788b;

  font-size: 7px;

  letter-spacing: 1px;

}


.blog-pick h3 {

  margin:
    7px 0 0;

  color:
    #e6edf2;

  font-size: 18px;

}


.blog-pick > svg {

  width: 18px;

  color:
    #6f8aa0;

}



/* ==========================================================
   TOPICS
========================================================== */

.blog-topics {

  background:
    #05090d;

}


.blog-topic-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 14px;

}


.blog-topic-card {

  min-height: 290px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  border-radius: 16px;

  color: inherit;

  border:
    1px solid
    var(--blog-border);

  background:

    linear-gradient(
      145deg,
      #101c2b,
      #080f16
    );

  text-decoration: none;

  transition:
    transform .3s ease,
    border-color .3s ease;

}


.blog-topic-card:hover {

  transform:
    translateY(-6px);

  border-color:
    var(--blog-blue-border);

}


.blog-topic-card > div:first-child {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}


.blog-topic-card
> div:first-child svg {

  width: 46px;

  height: 46px;

  padding: 12px;

  border-radius: 11px;

  color:
    var(--blog-blue);

  border:
    1px solid
    rgba(101,200,250,.14);

}


.blog-topic-card
> div:first-child span {

  color:
    #52697c;

  font-size: 8px;

}


.blog-topic-card h3 {

  margin:
    48px 0 0;

  color:
    #edf3f7;

  font-size: 19px;

}


.blog-topic-card p {

  margin:
    9px 0 0;

  color:
    #8094a7;

  font-size: 10px;

  line-height: 1.7;

}


.blog-topic-card > strong {

  margin-top: auto;

  padding-top: 24px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--blog-blue);

  font-size: 9px;

}


.blog-topic-card > strong svg {

  width: 13px;

}



/* ==========================================================
   NEWSLETTER
========================================================== */

.blog-newsletter {

  background:

    linear-gradient(
      180deg,
      #05090d,
      #07111c
    );

}


.blog-newsletter-shell {

  padding:
    43px 48px;

  display: grid;

  grid-template-columns:
    1fr .8fr;

  gap: 60px;

  align-items: center;

  border-radius: 20px;

  border:
    1px solid
    rgba(101,200,250,.17);

  background:

    radial-gradient(
      circle at 90% 30%,
      rgba(91,74,205,.11),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #14243b,
      #09131f
    );

}


.blog-newsletter-copy small {

  color:
    var(--blog-blue);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.3px;

}


.blog-newsletter-copy h2 {

  margin:
    12px 0 0;

  color:
    #edf3f7;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      31px,
      3vw,
      44px
    );

  line-height: 1.07;

  letter-spacing:
    -1.7px;

}


.blog-newsletter-copy h2 span {

  display: block;

  color:
    var(--blog-blue);

}


.blog-newsletter-copy p {

  max-width: 540px;

  margin:
    14px 0 0;

  color:
    #879bad;

  font-size: 11px;

  line-height: 1.7;

}


.blog-newsletter-form {

  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 9px;

}


.blog-newsletter-input {

  height: 52px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-radius: 9px;

  border:
    1px solid
    var(--blog-border);

  background:
    rgba(3,10,17,.5);

}


.blog-newsletter-input svg {

  width: 16px;

  color:
    #658096;

}


.blog-newsletter-input input {

  width: 100%;

  border: 0;

  outline: 0;

  color:
    #e4edf2;

  background:
    transparent;

  font-family:
    inherit;

  font-size: 10px;

}


.blog-newsletter-form button {

  min-width: 125px;

  padding:
    0 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: 0;

  border-radius: 9px;

  color:
    #071522;

  background:

    linear-gradient(
      135deg,
      #ace4ff,
      #65c8fa
    );

  font-family:
    inherit;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

}


.blog-newsletter-form
button svg {

  width: 13px;

}


.blog-newsletter-status {

  grid-column:
    1 / -1;

  min-height: 13px;

  margin: 0;

  color:
    var(--blog-teal);

  font-size: 8px;

}



/* ==========================================================
   FINAL CTA
========================================================== */

.blog-final {

  padding:
    95px 0;

  background:
    #05090d;

}


.blog-final-shell {

  min-height: 410px;

  display: grid;

  grid-template-columns:
    1fr .78fr;

  overflow: hidden;

  border-radius: 24px;

  background:

    radial-gradient(
      circle at 82% 45%,
      rgba(93,86,216,.22),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #b8e2ff,
      #8fcfff 50%,
      #a0a8ff
    );

}


.blog-final-copy {

  padding: 56px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}


.blog-final-copy small {

  color:
    #27547d;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.4px;

}


.blog-final-copy h2 {

  margin:
    15px 0 0;

  color:
    #07192d;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  line-height: 1.05;

  letter-spacing:
    -2.3px;

}


.blog-final-copy h2 span {

  display: block;

  color:
    #205b8e;

}


.blog-final-copy p {

  max-width: 590px;

  margin:
    17px 0 0;

  color:
    #315c80;

  font-size: 13px;

  line-height: 1.72;

}


.blog-final-btn {

  width: fit-content;

  min-height: 50px;

  margin-top: 27px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border-radius: 10px;

  color:
    #f3f7fa;

  background:
    #07192d;

  text-decoration: none;

  font-size: 11px;

  font-weight: 700;

}


.blog-final-btn svg {

  width: 14px;

}


.blog-final-visual {

  position: relative;

  min-height: 410px;

  display: grid;

  place-items: center;

}


.blog-final-ring {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(14,55,91,.14);

}


.blog-final-ring.ring-one {

  width: 210px;

  height: 210px;

}


.blog-final-ring.ring-two {

  width: 315px;

  height: 315px;

}


.blog-final-center {

  position: relative;

  z-index: 3;

  width: 120px;

  height: 120px;

  display: grid;

  place-items: center;

  text-align: center;

  border-radius: 50%;

  color:
    #dff4ff;

  background:

    linear-gradient(
      145deg,
      #0d2947,
      #07172a
    );

}


.blog-final-center svg {

  width: 27px;

}


.blog-final-center strong {

  font-size: 12px;

}


.blog-final-center small {

  color:
    #82b6dc;

  font-size: 7px;

}


.blog-final-node {

  position: absolute;

  z-index: 4;

  padding:
    9px 11px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-radius: 10px;

  color:
    #143f65;

  border:
    1px solid
    rgba(14,55,91,.14);

  background:
    rgba(241,249,255,.8);

  font-size: 8px;

}


.blog-final-node svg {

  width: 14px;

}


.blog-final-node.node-one {

  left: 8%;

  top: 27%;

}


.blog-final-node.node-two {

  right: 8%;

  top: 31%;

}


.blog-final-node.node-three {

  right: 17%;

  bottom: 19%;

}



/* ==========================================================
   FOOTER
========================================================== */

.blog-footer {

  border-top:
    1px solid
    rgba(130,170,205,.08);

  background:

    radial-gradient(
      circle at 8% 0%,
      rgba(34,101,160,.11),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #08131f,
      #030608
    );

}


.blog-footer-main {

  padding:
    60px 0 48px;

  display: grid;

  grid-template-columns:
    1.45fr .72fr .72fr 1fr;

  gap: 55px;

}


.blog-footer-brand img {

  max-width: 145px;

  max-height: 55px;

}


.blog-footer-brand p {

  max-width: 390px;

  margin:
    21px 0 0;

  color:
    #8799aa;

  font-size: 13px;

  line-height: 1.75;

}


.blog-footer-heading {

  position: relative;

  display: block;

  margin-bottom: 23px;

  padding-bottom: 12px;

  color:
    #65c8fa;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.blog-footer-heading::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 28px;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      #65c8fa,
      transparent
    );

}


.blog-footer-column {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}


.blog-footer-column a {

  margin-bottom: 14px;

  color:
    #93a5b5;

  text-decoration: none;

  font-size: 12px;

}


.blog-footer-sales > p {

  color:
    #899bab;

  font-size: 12px;

  line-height: 1.65;

}


.blog-footer-sales-card {

  width: 100%;

  margin-top: 20px;

  padding: 16px;

  display: grid;

  grid-template-columns:
    42px 1fr auto;

  gap: 13px;

  align-items: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(101,200,250,.14);

  color: inherit;

  background:
    rgba(101,200,250,.035);

  text-decoration: none;

}


.blog-footer-sales-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  color:
    #65c8fa;

  border-radius: 10px;

  border:
    1px solid
    rgba(101,200,250,.16);

}


.blog-footer-sales-card
strong {

  display: block;

  color:
    #edf3f7;

  font-size: 12px;

}


.blog-footer-sales-card
small {

  display: block;

  margin-top: 4px;

  color:
    #73879a;

  font-size: 8px;

}


.blog-footer-sales-card
> svg {

  width: 15px;

  color:
    #65c8fa;

}


.blog-footer-contact {

  display: grid;

  grid-template-columns:
    .78fr 1fr 1.55fr 1fr;

  border-top:
    1px solid
    rgba(130,170,205,.09);

  border-bottom:
    1px solid
    rgba(130,170,205,.09);

}


.blog-contact-item {

  min-height: 150px;

  padding: 25px;

  display: grid;

  grid-template-columns:
    44px 1fr;

  gap: 15px;

  align-items: center;

  border-right:
    1px solid
    rgba(130,170,205,.08);

}


.blog-contact-item:last-child {

  border-right: 0;

}


.blog-contact-icon {

  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color:
    #65c8fa;

  border:
    1px solid
    rgba(101,200,250,.14);

}


.blog-contact-icon svg {

  width: 18px;

}


.blog-contact-label {

  display: block;

  margin-bottom: 8px;

  color:
    #65c8fa;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.blog-contact-item a,
.blog-contact-item address {

  color:
    #d7e1e9;

  font-size: 11px;

  line-height: 1.7;

  text-decoration: none;

  font-style: normal;

}


.blog-social {

  display: flex;

  gap: 7px;

}


.blog-social a {

  width: 39px;

  height: 39px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  color:
    #9cb0c1;

  border:
    1px solid
    rgba(130,170,205,.14);

  text-decoration: none;

}


.blog-social svg {

  width: 16px;

  height: 16px;

}


.blog-footer-bottom {

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color:
    #667a8d;

  font-size: 9px;

}


.blog-footer-bottom div {

  display: flex;

  gap: 20px;

}


.blog-footer-bottom a {

  color:
    #6f8497;

  text-decoration: none;

}



/* ==========================================================
   SCROLL REVEAL
========================================================== */

[data-blog-reveal] {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


[data-blog-reveal].blog-visible {

  opacity: 1;

  transform:
    translate3d(0,0,0);

}



/* ==========================================================
   TABLET
========================================================== */

@media
(max-width: 1100px) {

  .blog-toolbar {

    grid-template-columns: 1fr;

  }


  .blog-search {

    max-width: 360px;

  }


  .blog-featured {

    grid-template-columns: 1fr;

  }


  .blog-featured-visual {

    border-right: 0;

    border-bottom:
      1px solid
      var(--blog-border);

  }


  .blog-heading-row {

    grid-template-columns: 1fr;

  }


  .blog-post-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .blog-topic-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .blog-newsletter-shell {

    grid-template-columns: 1fr;

  }


  .blog-footer-main {

    grid-template-columns:
      repeat(2,1fr);

  }


  .blog-footer-contact {

    grid-template-columns:
      repeat(2,1fr);

  }

}



/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 768px) {

  .blog-section {

    padding:
      72px 0;

  }


  .blog-hero {

    padding:
      135px 0 50px;

  }


  .blog-hero-copy {

    text-align: left;

  }


  .blog-hero-copy
  .blog-eyebrow {

    justify-content:
      flex-start;

  }


  .blog-hero-copy h1 {

    font-size:
      clamp(
        43px,
        12vw,
        61px
      );

    letter-spacing:
      -3.2px;

  }


  .blog-hero-copy > p {

    margin-left: 0;

  }


  .blog-toolbar {

    margin-top: 35px;

  }


  .blog-categories {

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 3px;

  }


  .blog-category {

    flex: 0 0 auto;

  }


  .blog-search {

    max-width: none;

  }


  .blog-featured-visual {

    min-height: 390px;

  }


  .blog-featured-diagram {

    width: 300px;

    height: 300px;

  }


  .blog-diagram-ring.ring-two {

    width: 285px;

    height: 285px;

  }


  .blog-featured-copy {

    padding:
      30px 23px;

  }


  .blog-featured-bottom {

    align-items:
      flex-start;

    flex-direction: column;

  }


  .blog-post-grid,
  .blog-topic-grid,
  .blog-footer-main,
  .blog-footer-contact {

    grid-template-columns: 1fr;

  }


  .blog-card-copy {

    min-height: auto;

  }


  .blog-pick {

    grid-template-columns:
      35px 1fr auto;

    padding:
      21px 17px;

  }


  .blog-pick h3 {

    font-size: 15px;

  }


  .blog-newsletter-shell {

    padding:
      32px 22px;

  }


  .blog-newsletter-form {

    grid-template-columns: 1fr;

  }


  .blog-newsletter-form
  button {

    min-height: 50px;

  }


  .blog-final-shell {

    grid-template-columns: 1fr;

  }


  .blog-final-copy {

    padding:
      40px 24px 10px;

  }


  .blog-final-visual {

    min-height: 330px;

  }


  .blog-contact-item {

    min-height: auto;

    padding:
      24px 4px;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(130,170,205,.08);

  }


  .blog-footer-bottom {

    padding:
      22px 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

  }

}



/* ==========================================================
   SMALL MOBILE
========================================================== */

@media
(max-width: 480px) {

  .blog-featured-visual {

    min-height: 345px;

  }


  .blog-featured-diagram {

    width: 270px;

    height: 270px;

  }


  .blog-diagram-ring.ring-two {

    width: 250px;

    height: 250px;

  }


  .blog-diagram-node {

    font-size: 7px;

    padding:
      8px 9px;

  }


  .blog-final-node.node-one {

    left: 1%;

  }


  .blog-final-node.node-two {

    right: 1%;

  }

}



/* REDUCED MOTION */

@media
(prefers-reduced-motion: reduce) {

  [data-blog-reveal] {

    opacity: 1;

    transform: none;

    transition: none;

  }

}