/* ── TOKENS ── */
  :root {
    font-size:18px;
    --midnight: #000d2b;
    --midnight-800: #082a5f;
    --midnight-900: #001A4E;
    --midnight-950: #000d2b;
    --electric: #1751ff;
    --electric-400: #347dff;
    --electric-500: #1751FF;
    --electric-800: #092f99;
    --electric-900: #052475;
    --glacier: #06c8fc;
    --glacier-400: #2FD3FF;
    --glacier-500: #06C8FC;
    --fog-200: #d9e1e8;
    --fog-400: #8d9aa7;
    --fog-600: #4f5b67;
    --white: #ffffff;
    --black: #000000;
    --nav-h: 91px;
    --glow-card: inset 0 -20px 30px -25px rgba(6,200,252,.5),
                 inset 0 -20px 20px -30px #1751ff,
                 inset 0 -40px 60px -21px rgba(13,58,189,.5),
                 inset 0 -51px 80px -25px #052475,
                 inset 0 -70px 100px -5px rgba(2,23,71,.5);
    
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }
 
body {
    background: var(--midnight) ;
    color: var(--white);
    font-family: 'Satoshi', 'Sora', 'Inter', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

  h1 {
    font-size: 3.333rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.25;
    text-align:center;
  }
  h1 span {
    color: var(--glacier-400);
  }

  h2 {
    font-size: 2.222rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 45px;
  }
  h2 span {
    color: var(--glacier-400);
  }

h3 {
  color: var(--glacier);  
  font-size: 1.333rem; 
  font-weight: 400; 
}

h4 {
  color: var(--glacier);  
  font-size: 1.667rem; 
  font-weight: 400; 
}
h4.dark {
  color: var(--midnight-950);  
  font-size: 1.667rem; 
  font-weight: 400; 
}

p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 24px;
  color: var(--white);
}

p span {
  color: var(--glacier-400);
}

ul {
  margin-left:25px;
}
ul li {
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 133.333% */
}

sub, sup {
    font-size: 50%!important;
}

section#homepage.home {
    padding-top: 160px;
}

.punch-text.punch-type-text.tabs-description {
    line-height: 1.4;
}
.punch-text.punch-type-text {
    line-height: 1.4;
}
/* =========================================================
   BLUECORE — FAQ
   ========================================================= */

.bc-faq-item {
  --bc-faq-background: transparent;
  --bc-faq-open-background: var(
    --electric-900,
    #052475
  );
  --bc-faq-border: rgba(141, 154, 167, 0.55);
  --bc-faq-text: var(--white, #fff);
  --bc-faq-horizontal-padding: clamp(
    24px,
    3.25vw,
    64px
  );

  background: var(--bc-faq-background);
  border: 0;
  border-bottom: 1px solid var(--bc-faq-border);
  color: var(--bc-faq-text);
  margin: 0;
  overflow: hidden;
  transition: background-color 250ms ease;
  width: 100%;
}

/*
 * If every FAQ is its own HubSpot module, each item gets
 * a top border. Adjacent borders overlap visually.
 */
.bc-faq-item {
  border-top: 1px solid var(--bc-faq-border);
}

.bc-faq-item[open] {
  background: var(--bc-faq-open-background);
}

/* Remove the browser's native disclosure marker. */
.bc-faq-item > summary {
  list-style: none;
}

.bc-faq-item > summary::-webkit-details-marker {
  display: none;
}

.bc-faq-item__question {
  align-items: center;
  color: var(--bc-faq-text);
  cursor: pointer;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  min-height: 106px;
  padding: 28px var(--bc-faq-horizontal-padding);
  transition:
    color 200ms ease,
    background-color 200ms ease;
}

.bc-faq-item__question:hover {
  color: var(--glacier, #06c8fc);
}

.bc-faq-item__question:focus-visible {
  outline: 2px solid var(--glacier, #06c8fc);
  outline-offset: -4px;
}

.bc-faq-item__question-text {
  color: inherit;
  display: block;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.4;
  max-width: calc(100% - 60px);
}

.bc-faq-item__icon {
  align-items: center;
  color: var(--white, #fff);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  justify-content: center;
  transition:
    color 200ms ease,
    transform 250ms ease;
}

.bc-faq-item__question:hover
.bc-faq-item__icon {
  color: var(--glacier, #06c8fc);
}

.bc-faq-item[open]
.bc-faq-item__icon {
  transform: rotate(180deg);
}

/* Answer container */
.bc-faq-item__answer {
  color: var(--white, #fff);
  padding:
    0
    var(--bc-faq-horizontal-padding)
    clamp(42px, 5vw, 76px);
}

.bc-faq-item__answer-inner {
  max-width: 1080px;
}

.bc-faq-item__answer,
.bc-faq-item__answer p,
.bc-faq-item__answer li {
  color: inherit;
  font-size: 0.889rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
}

.bc-faq-item__answer p {
  margin: 0 0 1rem;
}

.bc-faq-item__answer p:last-child {
  margin-bottom: 0;
}

.bc-faq-item__answer a {
  color: var(--electric-400, #347dff);
}

.bc-faq-item__answer a:hover,
.bc-faq-item__answer a:focus-visible {
  color: var(--glacier, #06c8fc);
}

@media (max-width: 950px) {
  .bc-faq-item {
    --bc-faq-horizontal-padding: 24px;
  }

  .bc-faq-item__question {
    min-height: 88px;
    padding-block: 22px;
  }

  .bc-faq-item__question-text {
    font-size: 0.944rem;
  }

  .bc-faq-item__answer {
    padding-bottom: 40px;
  }
}

@media (max-width: 560px) {
  .bc-faq-item {
    --bc-faq-horizontal-padding: 20px;
  }

  .bc-faq-item__question {
    gap: 1rem;
    min-height: 78px;
    padding-block: 20px;
  }

  .bc-faq-item__question-text {
    max-width: calc(100% - 40px);
  }

  .bc-faq-item__icon {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-faq-item,
  .bc-faq-item__icon {
    transition: none;
  }
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.bc-back-to-top {
  --bc-back-to-top-size: 80px;
  --bc-back-to-top-bottom: 30px;
  --bc-back-to-top-right: 30px;

  align-items: center;
  bottom: var(--bc-back-to-top-bottom);
  display: flex;
  height: var(--bc-back-to-top-size);
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: var(--bc-back-to-top-right);
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  visibility: hidden;
  width: var(--bc-back-to-top-size);
  z-index: 100;
}

.bc-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.bc-back-to-top img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.bc-back-to-top:hover,
.bc-back-to-top:focus-visible {
  transform: translate3d(0, -5px, 0);
}

.bc-back-to-top:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--glacier, #06c8fc);
  outline-offset: 4px;
}

@media (max-width: 950px) {
  .bc-back-to-top {
    --bc-back-to-top-size: 64px;
    --bc-back-to-top-bottom: 20px;
    --bc-back-to-top-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-back-to-top {
    transition: none;
  }

  .bc-back-to-top:hover,
  .bc-back-to-top:focus-visible {
    transform: none;
  }
}


  /* ── MEGAMENU ── */

body:not(.page-has-transparent-hero) main {
  padding-top: var(--header-h, 90px);
}
.container-fluid.main h1.punch-heading-tag {
    margin-top: 150px;
}
.bc-mega-header {
    --header-h: 90px;
    --container: 1400px;
    --dark: var(--midnight-950, #000d2b);
    --light: var(--white, #fff);
    --ink: var(--black, #000);
    --electric: var(--electric, #1751ff);
    color: var(--light);
    left: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.bc-mega-header * {
    box-sizing: border-box;
}
.bc-mega-header__bar {
    background: transparent;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.bc-mega-header.is-scrolled .bc-mega-header__bar,
.bc-mega-header.is-open .bc-mega-header__bar {
    background: var(--light);
    color: var(--ink);
}
.bc-mega-header__inner {
    align-items: center;
    display: flex;
    height: var(--header-h);
    justify-content: space-between;
    margin: auto;
    max-width: var(--container);
}
.bc-mega-header__logo {
    display: block;
    width: 150px;
}

.bc-mega-header__logo-image {
  display: block;
  height: auto;
  width: 100%;
}

/* Transparent header */
.bc-mega-header__logo-image--light {
  display: block;
}

.bc-mega-header__logo-image--dark {
  display: none;
}
.bc-mega-header
  .bc-mega-header__demo.btn-primary,
.bc-mega-header
  .bc-mega-header__demo.btn-primary:visited {
  align-items: center;
  background: var(--electric, #1751ff);
  border: 1px solid var(--electric, #1751ff);
  border-radius: 100px;
  color: var(--white, #fff);
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}
.bc-mega-header
  .bc-mega-header__demo.btn-primary:hover {
  background: var(--glacier);
  color: var(--electric-800);
  text-decoration: none;
  opacity: 1;
}

/* Scrolled or open header */
.bc-mega-header.is-scrolled
  .bc-mega-header__logo-image--light,
.bc-mega-header.is-open
  .bc-mega-header__logo-image--light {
  display: none;
}

.bc-mega-header.is-scrolled
  .bc-mega-header__logo-image--dark,
.bc-mega-header.is-open
  .bc-mega-header__logo-image--dark {
  display: block;
}

.bc-mega-header__top-list {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bc-mega-header__top-list button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 1rem 0;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}
.bc-mega-header__top-list button.is-active {
    font-weight: 700;
}
.bc-mega-header__actions {
    align-items: center;
    display: flex;
    gap: 1rem;
}
.bc-mega-header__icon {
    color: inherit;
    display: grid;
    height: 28px;
    place-items: center;
    width: 28px;
}
.bc-mega-header__icon svg {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    width: 22px;
}
.bc-mega-header__demo,
.bc-mega-header__resource-btn {
    border: 1px solid var(--electric);
    border-radius: 999px;
    color: inherit;
    font-size: 0.75rem;
    padding: 0.65rem 1.1rem;
    text-decoration: none;
}
.bc-mega-header__panels {
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
}
.bc-mega-header__panel {
    background: #000;
    color: #fff;
    display: none;
}
.bc-mega-header__panel.is-active {
    display: block;
}
.bc-mega-header__panel-inner {
    display: grid;
    gap: 2.75rem;
    grid-template-columns: 220px minmax(0, 1fr) 280px;
    margin: auto;
    max-width: var(--container);
    min-height: 360px;
    padding: 2rem;
}
.bc-mega-header__panel-inner--plain {
    grid-template-columns: 220px minmax(0, 1fr);
}
.bc-mega-header__side {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    padding-right: 2rem;
}
.bc-mega-header__heading,
.bc-mega-header__side a,
.bc-mega-header__links a {
    color: #fff;
    text-decoration: none;
}
.bc-mega-header__heading {
    color: #347dff !important;
    display: block;
    margin-bottom: 1rem;
}
.bc-mega-header__side ul {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bc-mega-header__links {
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bc-mega-header__links a {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bc-mega-header__links strong {
    color: #347dff;
    font-weight: 400;
}
.bc-mega-header__links span,
.bc-mega-header__resource p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.45;
}
.bc-mega-header__resource {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 2.75rem;
}
.bc-mega-header__resource img {
    display: block;
    object-fit: cover;
    width: 100%;
}
.bc-mega-header__resource h3 {
    color: #347dff;
    font-size: 1rem;
    font-weight: 400;
}
.bc-mega-header__resource-btn {
    display: inline-block;
    margin-top: 0.5rem;
}
.bc-mega-header__toggle,
.bc-mega-header__mobile {
    display: none;
}
@media (max-width: 950px) {
    .bc-mega-header__desktop,
    .bc-mega-header__actions {
        display: none;
    }
    .bc-mega-header__toggle {
        background: none;
        border: 0;
        display: grid;
        gap: 5px;
        padding: 8px;
    }
    .bc-mega-header__toggle span {
        background: currentColor;
        display: block;
        height: 2px;
        width: 25px;
    }
    .bc-mega-header__mobile {
        background: var(--dark);
        color: #fff;
        display: none;
        max-height: calc(100vh - var(--header-h));
        overflow: auto;
        padding: 1rem 1.5rem 2rem;
    }
    .bc-mega-header__mobile.is-active {
        display: block;
    }
    .bc-mega-header__mobile-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .bc-mega-header__mobile-trigger {
        background: none;
        border: 0;
        color: #fff;
        display: flex;
        font: inherit;
        justify-content: space-between;
        padding: 1.25rem 0;
        width: 100%;
    }
    .bc-mega-header__mobile-content {
        display: none;
        padding: 0 0 1.25rem;
    }
    .bc-mega-header__mobile-section.is-active .bc-mega-header__mobile-content {
        display: grid;
        gap: 0.8rem;
    }
    .bc-mega-header__mobile-content a {
        color: #fff;
        text-decoration: none;
    }
    .bc-mega-header__mobile-content small {
        color: rgba(255, 255, 255, 0.65);
        display: block;
        margin-top: 0.2rem;
    }
}

  /* ── UTILITIES ── */

.dnd-section:not([class*='full-width']).punch-container-large > .row-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
}
.row-fluid {
    max-width: 1400px !important;
      margin: 0 auto !important;
}

  .eyebrow h5, h5.eyebrow, .widget-type-header .hs_cos_wrapper_type_header h5, p.eyebrow {
  font-size: 0.778rem !important; 
    font-weight: 400 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: var(--white);
    text-align: center !important;
    margin-bottom: 45px !important;
  }

  .punch-heading.eyebrow-left h5 {
    text-align: left !important;
    margin-bottom: 10px !important;
  }

  .punch-heading.eyebrow-right h5 {
    text-align: right !important;
    margin-bottom: 10px !important;
}

  #customer-mod  div.eyebrow {
  font-size: 0.778rem; 
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--black)!important;
    text-align: center;
    margin-bottom: 10px !important;
    margin-top: 45px;
  }

  .section-title {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 300;
    line-height: 1.15;
    text-align: center;
  }
  .section-sub {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
    color: rgba(255,255,255,.8);
    max-width: 600px;
    margin: 0 auto;
  }

.glow-card, .cobalt-single-post {
    background: linear-gradient(180deg, rgba(0, 13, 43, 0) 0, var(--midnight-950, #000d2b) 100%);
    border: 1px solid var(--electric, #1751ff);
    border-radius: 8px;
    box-shadow: 0 -20px 30px -25px var(--glacier, #06c8fc) inset, 0 -20px 20px -30px var(--electric, #1751ff) inset, 0 -40px 60px -21px rgba(13, 58, 189, .5) inset, 0 -51px 80px -25px var(--electric-900, #052475) inset, 0 -70px 100px -5px rgba(2, 23, 71, .5) inset;
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: visible;
    padding: 2rem 2.25rem 2.5rem;
    position: relative;
    transition: border .7s ease-in-out, box-shadow .45s ease-in-out, transform .45s ease-in-out;
    width: 100%;
}



/* =========================================================
   Full-Width Background Classes
   ========================================================= */
.full-bleed-background {
  position: relative;
  isolation: isolate;
}

.full-bleed-background::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background:
    var(--full-bleed-background, #000d2b);
  transform: translateX(-50%);
  pointer-events: none;
}
div.bc-hero {
 margin: 0 auto;
  text-align:center;
}
div#resources-global {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
      padding-top: 0px !important;
}
div#customer-testimonials {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}
div#continuous-offsec {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
    padding-bottom: 350px !important;
}
div#customer-mod {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}

div#cobalt-platform {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}
div#how-autonomous-works {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}
div#agentic-ptaas-hero {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}

div#recognition-awards {
    width: 100vw !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: relative !important;
}



div#closing-cta {
  text-align:center !important;
}

.dnd-section {
  padding-top: 60px;
  padding-bottom: 60px;
  /* Container */
  /* Padding */
}

.dnd-section[class*='full-width'] > .row-fluid {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.dnd-section:not([class*='full-width']) > .row-fluid {
  width: 85%;
  max-width: 85%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 768px) {
  .dnd-section:not([class*='full-width']) > .row-fluid {
    max-width: 1400px;
    width: 100%;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1310px) {
  .dnd-section:not([class*='full-width']) > .row-fluid {
    width: 100%;
  }
}

.dnd-section:not([class*='full-width']).punch-container-large > .row-fluid {
  max-width: 1572px;
}

.dnd-section:not([class*='full-width']).punch-container-narrow > .row-fluid {
  max-width: 1048px;
}

.dnd-section:not([class*='full-width']).punch-container-narrower > .row-fluid {
  max-width: 786px;
}

@media only screen and (min-width: 768px) {
  .dnd-section.punch-section-padding-huge {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

@media only screen and (min-width: 1200px) {
  .dnd-section.punch-section-padding-huge {
    padding-top: 160px;
    padding-bottom: 160px;
  }
}

@media only screen and (min-width: 768px) {
  .dnd-section.punch-section-padding-large {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media only screen and (min-width: 1200px) {
  .dnd-section.punch-section-padding-large {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.dnd-section.punch-section-padding-small {
  padding-top: 40px;
  padding-bottom: 40px;
}

.dnd-section.punch-section-padding-no-padding {
  padding-top: 0;
  padding-bottom: 0;
}
/* =========================================================
   BUTTON WRAPPERS
   ========================================================= */

.punch-cta-btn-primary,
.punch-cta-btn-secondary,
.punch-cta-btn-tertiary {
  display: inline-flex;
}

.punch-cta-group .punch-cta {
    display: inline-block;
}

.punch-cta-group.punch-btn-group.punch-type-text {
    text-align: center;
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn-primary,
.punch-cta-btn-primary
  :is(a.cta_button, a.cta-button):any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  margin: 12px;
  border: 0;
  border-radius: 100px;
  background: var(--electric);
  color: var(--white);
  font-size: 0.667rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.punch-cta-btn-primary:hover
  :is(a.cta_button, a.cta-button):any-link,
.punch-cta-btn-primary
  :is(a.cta_button, a.cta-button):focus-visible {
  background: var(--glacier);
  color: var(--electric-800);
  text-decoration: none;
  opacity: 1;
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.btn-secondary,
.punch-cta-btn-secondary
  :is(a.cta_button, a.cta-button):any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  margin: 12px;
  border: 1px solid var(--electric);
  border-radius: 100px;
  background: transparent;
  color: var(--electric);
  font-size: 0.667rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.punch-cta-btn-secondary:hover
  :is(a.cta_button, a.cta-button):any-link,
.punch-cta-btn-secondary
  :is(a.cta_button, a.cta-button):focus-visible {
  border-color: var(--glacier);
  color: var(--glacier);
  text-decoration: none;
  opacity: 1;
      background: transparent;
}


/* =========================================================
   TERTIARY BUTTON
   ========================================================= */

.btn-tertiary,
.punch-cta-btn-tertiary
  :is(a.cta_button, a.cta-button):any-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 40px;
  margin: 12px;
  border: 1px solid var(--electric);
  border-radius: 100px;
  background: transparent;
  color: var(--electric);
  font-size: 0.556rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}

.btn-tertiary:hover,
.btn-tertiary:focus-visible,
.punch-cta-btn-tertiary:hover
  :is(a.cta_button, a.cta-button):any-link,
.punch-cta-btn-tertiary
  :is(a.cta_button, a.cta-button):focus-visible {
  border-color: var(--glacier);
  color: var(--glacier);
  text-decoration: none;
  opacity: 1;
}
/* =========================================================
   TEXT CHEVRON LINK
   ========================================================= */
.bc-text-link, .punch-cta-bc-text-link a  {
  align-items: center;
  color: var(--electric-400, #347dff);
  display: inline-flex;
  font-size: .778rem;
  font-style: normal;
  font-weight: 400;
  gap: .35em;
  line-height: normal;
  text-align: center;
  text-decoration: none;
}

.bc-text-link::after,
.punch-cta-bc-text-link a::after {
  border-right: .12em solid currentColor;
  border-top: .12em solid currentColor;
  content: "";
  display: block;
  flex: 0 0 auto;
  height: .48em;
  transform: rotate(45deg);
  transition: transform .25s ease;
  width: .48em;
}

.bc-text-link:hover::after,
.bc-text-link:focus-visible::after,
.punch-cta-bc-text-link a:hover::after,
.punch-cta-bc-text-link a:focus-visible::after {
  transform: translateX(.3rem) rotate(45deg);
}

/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 40px;

  border: 1px solid var(--electric);
  border-radius: 100px;

  background: transparent;
  color: var(--white);

  font-size: 0.667rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;

  white-space: nowrap;
  cursor: pointer;

  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--glacier);
  background: transparent;
  color: var(--glacier);
  text-decoration: none;
}
  .glacier { color: var(--glacier); }
  .electric { color: var(--electric-400); }

  /* ── NOTIFICATION BAR ── */
  .notif-bar {
    background: #000;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--electric-400);
    letter-spacing: .04em;
    position: relative;
    z-index: 100;
  }
  /* ── WAVES LAYER ── */
  .hero-waves-layer {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
  }
  .hero-waves-layer svg {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleY(0.42);
    transform-origin: bottom center;
    position: absolute;
    bottom: 0;
    left: 0;
  }

header, .nav-container, .header-module { 
  position: relative;
  z-index: 10; /* Keeps nav links above the hero layers */
  background: transparent !important; /* Removes solid color or black backgrounds */
}

  


  /* ── HERO WRAPPER ── */
.hero-wrapper {
  position: relative;
  width: 100%;
}

.hero-bg-container {
  position: relative;
  width: min(calc(100% - 160px), 1400px);
  min-height: inherit;
  margin-inline: auto;
  overflow: visible;
}
 /* ── HERO ── */
.hero {
  --hero-next-blade-peek: 0px;
  --hero-min-height: 760px;
  --hero-max-height: 1180px;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  /*
   * 1080px viewport  → approximately 940px hero
   * 1440px viewport  → capped at 1180px
   */
  min-height: clamp(
    var(--hero-min-height),
    calc(115svh - var(--hero-next-blade-peek)),
    var(--hero-max-height)
  );

  margin-top: -80px;
  padding-top: 80px;
}
/* Background artwork */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image:
    url("https://www.cobalt.io/hubfs/assets/bg/gradient-hero-inna.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  -webkit-mask-image:
    linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 76%, transparent 100%);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  height: 180px;

  background: linear-gradient(
    to bottom,
    rgba(0, 13, 43, 0),
    var(--midnight) 90%
  );

  pointer-events: none;
}

/* ── PORTRAIT LAYER ── */

/* Portrait artwork */
.hero-portrait-layer {
  position: absolute;
  right: -250px;
  bottom: -330px;
  z-index: 1;

  width: clamp(820px, 56vw, 1150px);
  aspect-ratio: 700 / 1050;

  pointer-events: none;

  background-image:
    url("https://www.cobalt.io/hubfs/assets/images/homepage-portrait-fade.webp");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

 

  /* ── HERO CONTENT FADE-UP ANIMATION ── */
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-content h1,
  .hero-content .hero-sub,

  }
  .hero-content h1       { animation-delay: 0.1s; }
  .hero-content .hero-sub { animation-delay: 0.3s; }

 /* Decorative spline layer */
.hero-splines {
  position: absolute;
  left: calc((100vw - 85%) / -2);
  width: calc(100vw - clamp(200px,calc(54.6875vw - 800px), 800px ));
  bottom: clamp(-280px,calc(100px - 37vh),-160px
  );

  height: auto;

  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.hero-splines svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

  .sp-ln {
    fill: none;
    stroke-width: 1.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
  }
  .sp-ln {
    fill: none;
    stroke-width: 1.5;
    stroke-miterlimit: 10;
  }
  .sp-l1 { stroke: #06C8FC; }
  .sp-l2 { stroke: #1751FF; }
  .sp-l3 { stroke: #1751FF; }
  .sp-l4 { stroke: #06C8FC; }
  .sp-l5 { stroke: #1751FF; }
  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
  }
/* Contained text layout */
.hero-inner {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  min-height: inherit;
  margin: 0;
  padding: 180px 0 90px;
}
.hero-content {
  width: 800px;
  max-width: 800px;
  padding-bottom: 60px;
}

.container-550 {
  width: 550px;
    max-width: 550px;
    text-align: center;
    margin: 0 auto;
}
.container-600 {
  width: 600px;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}
.container-650 {
  width: 650px;
    max-width: 650px;
    text-align: center;
    margin: 0 auto;
}
.container-700 {
  width: 700px;
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}
.container-750 {
  width: 750px;
    max-width: 750px;
    text-align: center;
    margin: 0 auto;
}
.container-800 {
  width: 800px;
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}
.container-850 {
  width: 850px;
    max-width: 850px;
    text-align: center;
    margin: 0 auto;
}
.container-900 {
  width: 900px;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}
.container-950 {
  width: 950px;
    max-width: 950px;
    text-align: center;
    margin: 0 auto;
}

@media (max-width: 900px) {
  .container-550 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  .container-600 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
    .container-650 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  .container-700 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  .container-750 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  .container-800 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
    .container-850 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
    .container-900 {
    width: 100%;
      max-width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  .container-950 {
    width: 100%;
      max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
}
#cobalt-platform h2.punch-heading-tag {
    margin: 0 auto;
  text-align:center;
}
#platform-hero .cobalt-platform {
      margin: 0 auto;
}
#platform-hero .container-650 {
    padding-bottom: 0;
}
.home.hero h1 {
  font-family: "Satoshi", "Sora", sans-serif;
  font-size: 4.167rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 40px;
  margin-top:-20px;
  text-align:left;
}

  p.hero-sub {
    font-family: 'Satoshi', 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #ffffff;
    max-width: 675px;
    margin-bottom: 40px;
  }
 #homepage .hero-ctas { 
   display: flex; 
   gap: 16px; 
   align-items: center;
   left: unset;
    transform: unset;
    position: unset;
    justify-content: unset; }

.hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    justify-content: center;
}

@media (min-width: 901px) and (max-height: 1100px) {
  .hero {
    --hero-next-blade-peek: 0px;
    --hero-min-height: 780px;
  }

  .hero-portrait-layer {
        width: 1150px;
        right: -250px;
        bottom: -380px;
  }

  .hero-inner {
    padding-top: 155px;
    padding-bottom: 70px;
  }

  .hero-content {
    padding-bottom: 35px;
  }

}

@media (min-width: 1600px) and (max-width: 1750px)
       and (min-height: 1000px) and (max-height: 1100px) {

  .hero-portrait-layer {
    width: 1170px;
    right: right: -290px;
    bottom: -425px;
  }

  .hero-splines {
    bottom: calc(100px - 38.889vh);
  }
}

  /* ── CUSTOMERS ── */
  .customers {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
  }
  .customers-band {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 20%, rgba(255,255,255,.06) 80%, transparent);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 28px 80px;
  }
  .customers-label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(0,0,0,.5);
    text-align: center;
    margin-bottom: 20px;
  }
  .logo-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .logo-pill {
    background: var(--fog-200);
    border-radius: 4px;
    width: 108px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0,0,0,.4);
    letter-spacing: .05em;
  }

  /* ── SECTION WRAPPER ── */
  .section {
    padding: 100px 80px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .section-header {
    margin-bottom: 64px;
  }
  .section-header .section-title { margin-bottom: 20px; }

  /* ── AGE OF AI: 3-COL ── */
  .three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 64px;
  }
  .three-col-item {
    padding: 40px 40px 40px 0;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .three-col-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.08);
    margin-right: 0;
    padding-right: 40px;
  }
  .three-col-item:not(:first-child) { padding-left: 40px; }
  .col-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 14px;
    color: var(--white);
  }
  .col-body {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.7);
  }


  /* ── CUSTOMERS MOD ── */
#customer-mod {
  margin:60px 0;
  padding:150px 0;
}

#customer-mod .row-fluid {
  padding-left:10px;
  padding-right:10px;
  max-width:1400px;
  width:100%;
}
#customer-mod .customers img {
    filter: brightness(0);
}
#customer-mod .customers svg {
    fill: #000000;
}

/* If the SVG uses strokes instead */
#customer-mod .customers svg path {
    stroke: #000000;
}
.punch-item-grid-wrapper.punch-grid-wrapper.punch-flickity-slider-wrapper.customers {
    padding: 0px 0 60px !important;
}


/* =========================================================
   HOMEPAGE — SECURITY IN THE AGE OF AI
   SINGLE SIGNAL PULSE
   ========================================================= */

/*
 * Existing Punch wrapper becomes the positioning reference.
 * Padding creates space above the card content for the line.
 */

#hp-security-age-ai h2 {
  font-size: 2.222rem;
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 45px;
}
#hp-security-age-ai .subheading p {
 font-size: 1.111rem;
  width:100%;
  max-width:650px;
  font-weight:300;
  margin:0 auto 20px;
}
#hp-security-age-ai p {
 font-size: 1.0rem;
  width:100%;
  max-width:650px;
  font-weight:300;
  margin:0 auto;
}

#hp-security-age-ai h4.punch-grid-item-title {
    font-size: 1.222rem !important;
    font-weight: 400;
    margin-bottom:20px;
}

#hp-security-age-ai .punch-item-grid-wrapper .punch-grid-item-excerpt p {
  font-size: 0.889rem;
  font-weight: 300;
  line-height: 22px;
}

#hp-security-age-ai .punch-item-grid-wrapper {
  position: relative;
  padding-top: 30px;
}


/* ---------------------------------------------------------
   Injected pulse track
   --------------------------------------------------------- */

#hp-security-age-ai .age-ai-signal-track {
  --age-ai-trail-width: 10rem;

  position: absolute;
  top: 0;
  z-index: 4;

  height: 12px;

  overflow: hidden;
  pointer-events: none;
}


/* Permanent darker-blue line */

#hp-security-age-ai .age-ai-signal-track::before {
  content: "";

  position: absolute;
  top: 5px;
  right: 0;
  left: 0;

  height: 1px;
  background: #1751ff;
  z-index:1;
}


/* ---------------------------------------------------------
   Moving dot
   --------------------------------------------------------- */

#hp-security-age-ai .age-ai-signal-dot {
  position: absolute;
  top: 1px;
  left: 0;
  z-index: 2;

  width: 10px;
  height: 10px;

  border-radius: 50%;
  background: #06c8fc;

  opacity: 0;
  pointer-events: none;

  box-shadow:
    0 0 5px rgba(6, 200, 252, 0.9),
    0 0 10px rgba(6, 200, 252, 0.5);
}


/*
 * Glacier Blue trail behind the dot.
 *
 * The trail fades back into the permanent darker-blue line
 * after the pulse passes.
 */
#hp-security-age-ai .age-ai-signal-dot::before {
  content: "";

  position: absolute;
  top: 4px;
  right: 5px;

  width: var(--age-ai-trail-width);
  height: 2px;

  background:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(6, 200, 252, 0.08) 20%,
      rgba(6, 200, 252, 0.25) 48%,
      rgba(6, 200, 252, 0.68) 78%,
      #06c8fc 100%
    );

  transform: translateY(-50%);
}


/* ---------------------------------------------------------
   Gap covers
   Injected and positioned by JavaScript using actual cards
   --------------------------------------------------------- */

#hp-security-age-ai .age-ai-gap-cover {
  position: absolute;
  top: 0;
  z-index: 3;
  height: 12px;

  /*
   * Match this to the blade background.
   */
  background: #000d2b;
  pointer-events: none;
}


/* ---------------------------------------------------------
   Animation
   --------------------------------------------------------- */

#hp-security-age-ai.is-age-ai-pulse-active
  .age-ai-signal-dot {
  animation:
    ageAiSignalPulse 5.25s linear 3 forwards;
}

@keyframes ageAiSignalPulse {
  0% {
    left: 0;
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  96% {
    opacity: 1;
  }

  100% {
    /*
     * Dot’s right edge finishes exactly at the
     * right edge of the third card.
     */
    left: calc(100% - 10px);
    opacity: 0;
  }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 900px) {
  #hp-security-age-ai .punch-item-grid-wrapper {
    padding-top: 0;
  }

  #hp-security-age-ai .age-ai-signal-track {
    display: none;
  }
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  #hp-security-age-ai .age-ai-signal-dot {
    display: none;
  }
}


/* =========================================================
   COBALT DIFFERENCE: FAST / FLEXIBLE / PRECISE
   Scope: #cobalt-difference
   ========================================================= */
#cobalt-difference {
  --difference-spline-shift-y:
    clamp(120px, 10vw, 190px);
}

/* Spline row */

#cobalt-difference
  .row-fluid-wrapper:has(.difference-splines) {
  position: relative;
  z-index: 30 !important;

  overflow: visible !important;
  pointer-events: none;
}
#cobalt-difference
  .row-fluid-wrapper:has(.difference-splines)
  > .row-fluid,
#cobalt-difference
  .row-fluid-wrapper:has(.difference-splines)
  .dnd-module,
#cobalt-difference
  .row-fluid-wrapper:has(.difference-splines)
  .hs_cos_wrapper,
#cobalt-difference
  .row-fluid-wrapper:has(.difference-splines)
  .punch-text {
  position: relative;

  overflow: visible !important;
}

/* ---------------------------------------------------------
   Section typography
   --------------------------------------------------------- */

#cobalt-difference h2,
#cobalt-difference h2 span {
  font-size: 2.222rem;
  font-weight: 300;
  margin-bottom:20px;
}

#cobalt-difference h2 span,
#cobalt-difference p span {
  color: #2fd2ff;
}

#cobalt-difference p {
  font-size: 1rem;
  font-weight: 300;
}

/* Card-grid row */

#cobalt-difference
  .row-fluid-wrapper:has(.punch-item-grid-wrapper) {
  position: relative;
  z-index: 10 !important;
}


/* Spline positioning control */

#cobalt-difference {
  /*
   * Negative values move the spline upward.
   */
  --difference-spline-shift-y:  110px;
}


/* Spline artwork */

#cobalt-difference .difference-splines {
  position: absolute;
  right: auto;
  bottom: auto;
  padding-bottom: 10px;
  left:
    calc(
      (105vw - 85%) / -2
    );

  z-index: 30 !important;

  width:
    calc(
      100vw -
      clamp(
        200px,
        calc(54.6875vw - 800px),
        800px
      )
    );

  height:
    clamp(
      265px,
      28vw,
      460px
    );

  overflow: hidden;

  transform:
    translate3d(
      0,
      var(
        --difference-spline-shift-y,
        -60px
      ),
      0
    );

  pointer-events: none;
}

#cobalt-difference .difference-splines svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: 60%;
}



/* ---------------------------------------------------------
   Grid layout
   --------------------------------------------------------- */

#cobalt-difference .punch-item-grid {
  align-items: stretch;
}

#cobalt-difference .punch-grid-item {
  display: flex;
  padding-inline: 0.75rem;
}

#cobalt-difference .punch-item-grid-wrapper,
#cobalt-difference .punch-item-grid {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   Card surface
   --------------------------------------------------------- */

#cobalt-difference .punch-grid-item-inner.column-inner {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 570px;
  padding: 2rem 2.25rem 1.5rem;

  overflow: hidden;

border-radius: 8px;
border: 1px solid var(--Midnight-Current-800, #082A5F);
background: linear-gradient(180deg, var(--Midnight-Current-950, #000D2B) 0%, var(--Midnight-Current-950, #000D2B) 100%);
box-shadow: 0 -20px 30px -25px var(--Glacier-Blue-500, #06C8FC) inset, 0 -20px 20px -30px var(--Electric-Sky-500, #1751FF) inset, 0 -40px 60px -21px rgba(13, 58, 189, 0.50) inset, 0 -51px 80px -25px var(--Electric-Sky-900, #052475) inset, 0 -70px 100px -5px rgba(2, 23, 71, 0.50) inset;

  transition:
    border-color 450ms ease-in-out,
    box-shadow 450ms ease-in-out,
    transform 450ms ease-in-out;
}


/* ---------------------------------------------------------
   Automated sequential highlight
   --------------------------------------------------------- */

#cobalt-difference
  .punch-grid-item.is-card-highlighted
  .punch-grid-item-inner.column-inner {
  border-color: #1751ff;

  box-shadow:
    inset 0 -12px 24px rgba(6, 200, 252, 0.22),
    inset 0 -34px 52px rgba(23, 81, 255, 0.24),
    inset 0 -70px 105px rgba(5, 36, 117, 0.3),
    0 0 0 1px rgba(23, 81, 255, 0.45),
    0 0 18px rgba(23, 81, 255, 0.12);

  transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Upper card area
   Includes:
   - Fast / Flexible / Precise
   - spline artwork area
   - subtitle
   --------------------------------------------------------- */

#cobalt-difference .punch-grid-excerpt-wrapper {
  position: relative;
  z-index: 2;

  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  min-height: 0;

  text-align: center;
}

#cobalt-difference .punch-grid-item-excerpt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  min-height: 0;
}


/* Fast / Flexible / Precise */

#cobalt-difference
  .punch-grid-item-excerpt
  h4.punch-grid-item-title {
  margin: 0;
  padding: 0;

  color: #ffffff;
  font-size: 1.667rem;
  font-weight: 300;
  line-height: 1.15;
}


/*
 * Subtitle:
 * "Security at the speed of change"
 *
 * margin-top:auto pushes this to the bottom of the
 * expandable excerpt area, directly above the body copy.
 */

#cobalt-difference
  .punch-grid-item-excerpt
  > div.punch-text {
  margin-top: auto;
  margin-bottom: 1.25rem;
  padding: 0;

  color: #ffffff;
  font-size: 1.111rem;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}


/* ---------------------------------------------------------
   Lower body-copy area
   --------------------------------------------------------- */

#cobalt-difference .punch-grid-content-wrapper {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  width: 100%;
  margin: 0;
  padding: 0;

  text-align: center;
}


/* Hide duplicated content title output by Punch */

#cobalt-difference
  .punch-grid-content-wrapper
  .punch-grid-item-content
  h4.punch-grid-item-title {
  display: none;
}


/* Body-copy wrapper */

#cobalt-difference
  .punch-grid-content-wrapper
  div.punch-text {
  margin: 0;
  padding: 0 0 1.25rem;
  color: #ffffff;
  font-size: 0.889rem;
  font-weight: 300;
  line-height: 1.25;
}


/* Body paragraphs */

#cobalt-difference
  .punch-grid-content-wrapper
  p {
  max-width: 26rem;
  margin: 0 auto;

  color: rgba(255, 255, 255, 0.78);
  font-size: 0.889rem;
  font-weight: 300;
  line-height: 1.25;
}


/* Remove final paragraph spacing */

#cobalt-difference
  .punch-grid-content-wrapper
  p:last-child {
  margin-bottom: 0;
    color:#ffffff;
}


/* ---------------------------------------------------------
   Internal card glow
   --------------------------------------------------------- */

#cobalt-difference .punch-grid-item-inner.column-inner::before {
left: 8%;
  right: 8%;
  bottom: -18px;
  height: 150px;
  z-index: 0;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(6, 200, 252, 0.34) 0%,
      rgba(23, 81, 255, 0.22) 34%,
      rgba(13, 58, 189, 0.12) 58%,
      transparent 78%
    );

  filter: blur(14px);  pointer-events: none;
}


/* Keep card content above visual effects */

#cobalt-difference .punch-grid-item-inner > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Difference splines
   --------------------------------------------------------- */


#cobalt-difference .difference-spline {
  fill: none;
  opacity: 0;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
}

#cobalt-difference .difference-spline-1,
#cobalt-difference .difference-spline-4 {
  stroke: #06c8fc;
}

#cobalt-difference .difference-spline-2,
#cobalt-difference .difference-spline-3,
#cobalt-difference .difference-spline-5 {
  stroke: #1751ff;
}

#cobalt-difference .difference-dot {
    transform: none !important;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Page splines
   --------------------------------------------------------- */
.bc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bc-hero > *:not(.page-splines) {
  position: relative;
  z-index: 2;
}
.page-splines {
    position: absolute;
    right: auto;
    bottom: auto;
    padding-bottom: 10px;
    left: calc(42.5% - 52.5vw);
    width: calc(100vw - clamp(200px, -800px + 54.6875vw, 800px));
    height: clamp(265px, 28vw, 460px);
    transform: translate3d(0, var(--difference-spline-shift-y, -60px), 0);
    pointer-events: none;
    z-index: 30 !important;
    overflow: hidden;
}
#services-hero .page-splines {
  height: 175%;
}

#platform-hero .page-splines {
    height: 175%;
}
.page-splines {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;
  pointer-events: none;
}

.page-splines svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.page-splines .cs-ln {
  fill: none;

  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}

.page-splines .cs-l1 {
  stroke: #1751ff;
}

.page-splines .cs-l2,
.page-splines .cs-l3 {
  stroke: #06c8fc;
}

.page-splines circle {
  vector-effect: non-scaling-stroke;
}



/* ---------------------------------------------------------
   Tablet and mobile
   --------------------------------------------------------- */

@media (max-width: 1023px) {
  #cobalt-difference .punch-grid-item-inner {
    min-height: 600px;
  }
}

@media (max-width: 767px) {
  #cobalt-difference .punch-grid-item {
    padding-inline: 0;
  }

  #cobalt-difference .punch-grid-item-inner {
    min-height: 560px;
    padding: 2rem 1.5rem;
  }
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #cobalt-difference .punch-grid-item-inner {
    transition: none;
  }

  #cobalt-difference
    .punch-grid-item.is-card-highlighted
    .punch-grid-item-inner {
    transform: none;
  }
}




/* ---------------------------------------------------------
   Section typography
   --------------------------------------------------------- */

#cobalt-advantage h2 {
  font-size: 2.222rem;
  font-weight: 300;
  margin-bottom:20px;
}

#cobalt-advantage h2 span {
  color: #2fd2ff;
  font-style: italic;
}

#cobalt-advantage p {
  font-size: 0.889rem;
  line-height:1.4;
  font-weight: 300;
  text-align:center;
  margin: 0 auto;
  width:100%;
  max-width:650px;
}



/* DIFFERENCE SECTION - TO BE REMOVED */
  .difference-section {
    padding: 100px 80px;
    background: var(--midnight);
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
  }
  .difference-section .section-title,
  .difference-section .eyebrow,
  .difference-tagline,
  .diff-card-label,
  .diff-card-subtitle,
  .diff-card-body {
    font-family: 'Satoshi', sans-serif;
    font-weight: 300;
  }
  .difference-inner { max-width: 1400px; margin: 0 auto; }
  .difference-header { text-align: center; margin-bottom: 64px; }
  .difference-tagline {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    margin-top: 16px;
    color: rgba(255,255,255,.85);
  }
  .cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
  }
  /* Splines overlay spanning all 3 cards — aligned to the middle anim-zone */
  .diff-splines {
    position: absolute;
    top: 110px;
    left: -130px;
    width: calc(100% + 130px);
    height: 240px;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
  }
  .diff-splines svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .ds-ln {
    fill: none;
    stroke-width: 1.2;
    stroke-miterlimit: 10;
  }
  .ds-l1 { stroke: #06C8FC; }
  .ds-l2 { stroke: #1751FF; }
  .ds-l3 { stroke: #1751FF; }
  .ds-l4 { stroke: #06C8FC; }
  .ds-l5 { stroke: #1751FF; }
  /* Invisible spacer inside each card that reserves room for the animation */
  .diff-card-anim-zone {
    height: 240px;
    flex-shrink: 0;
  }
  .diff-card {
    background: var(--midnight);
    border: 1px solid var(--midnight-800);
    border-radius: 10px;
    padding: 32px 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--glow-card);
    transition: border-color .2s;
    display: flex;
    flex-direction: column;
    min-height: 320px;
  }
  .diff-card.featured {
    border: 2px solid var(--electric);
    box-shadow: var(--glow-card);
  }
  .diff-card:hover { border-color: rgba(23,81,255,.5); }
  .diff-card-label {
    font-size: 30px;
    font-weight: 300;
    font-family: 'Satoshi', sans-serif;
    margin-bottom: 0;
    color: var(--white);
    position: relative;
    z-index: 4;
  }
  .diff-card-lower {
    position: relative;
    z-index: 4;
    padding-top: 50px;
  }
  .diff-card-subtitle {
    font-size: 18px;
    font-weight: 400;
    font-family: 'Satoshi', sans-serif;
    color: rgba(255,255,255,.85);
    margin-bottom: 14px;
  }
  .diff-card-body {
    font-size: 16px;
    font-weight: 300;
    font-family: 'Satoshi', sans-serif;
    line-height: 1.75;
    color: rgba(255,255,255,.65);
  }

  /* ── COBALT ADVANTAGE ── */
  .advantage-section {
    padding: 100px 80px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .advantage-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 64px;
  }
  .advantage-timeline {
    position: relative;
  }
  .timeline-line {
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, var(--electric) 0%, rgba(23,81,255,.2) 100%);
  }
  .timeline-item {
    padding-left: 32px;
    margin-bottom: 52px;
    position: relative;
  }
  .timeline-dot {
    position: absolute;
    left: -5px;
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--electric);
    border: 2px solid var(--midnight);
    box-shadow: 0 0 0 3px rgba(23,81,255,.3);
  }
  .timeline-label {
    font-size: 20px;
    font-weight: 400;
    color: var(--glacier);
    margin-bottom: 10px;
  }
  .timeline-body {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,.7);
  }
  .advantage-screenshot {
    border-radius: 10px;
    background: linear-gradient(135deg, #021747, #0a2880);
    border: 1px solid rgba(23,81,255,.3);
    overflow: hidden;
    box-shadow: 0 0 60px rgba(23,81,255,.15), 0 -2px 6px rgba(111,174,255,.2);
    aspect-ratio: 16/11;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .screenshot-label {
    color: rgba(255,255,255,.2);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  /* fake UI lines */
  .advantage-screenshot::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(23,81,255,.06) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(23,81,255,.06) 120px);
  }


/* ---------------------------------------------------------
   Section typography
   --------------------------------------------------------- */

#continuous-offsec h2 {
  font-size: 2.222rem;
  font-weight: 300;
  margin-bottom:0px;
}

#continuous-offsec h2 span {
  color: #2fd2ff;
  font-style: italic;
}

#continuous-offsec p {
  font-size: 1rem;
  line-height:24px;
  font-weight: 300;
  text-align:center;
  margin: 0 auto;
  width:100%;
  max-width:650px;
}

/* ========================================================= 
   BLUECORE — PAGE SPLINES ANIMATION - NOT HOMEPAGE
========================================================= */ 

/* =========================================================
   HERO SPLINE POSITIONING CONTROLS
   ========================================================= */

.bc-spline-hero {
  /*
   * Negative = move left
   * Positive = move right
   */
  --bc-spline-x: -550px;

  /*
   * Negative = move up
   * Positive = move down
   */
  --bc-spline-y: 60px;

  /*
   * 1 = original size
   * More than 1 = longer/larger
   * Less than 1 = shorter/smaller
   */
  --bc-spline-scale: 1.35;

  /*
   * Controls how much vertical room is visible.
   * This crops the spline without distorting the dots.
   */
  --bc-spline-height: 280px;

  height: var(--bc-spline-height) !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
}

.bc-spline-hero .bc-top-splines {
  height: 100% !important;
  inset: 0 !important;
  overflow: visible !important;
  position: absolute !important;
  width: 100% !important;
}

.bc-spline-hero .bc-top-splines svg {
  display: block !important;
  height: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  width: 100% !important;

  transform:
    translate3d(
      var(--bc-spline-x),
      var(--bc-spline-y),
      0
    )
    scale(var(--bc-spline-scale)) !important;

  transform-origin: left center !important;
}
.bc-spline-hero {
  --bc-spline-overhang: 5vw;
}

.bc-spline-hero .bc-top-splines {
  pointer-events: none;
  top: 0;
  z-index: 1;
}

.bc-spline-hero .bc-top-splines svg {
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
}

.bc-top-splines .cs-ln {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.bc-top-splines .cs-l1 {
  stroke: var(--electric, #1751ff);
}

.bc-top-splines .cs-l2,
.bc-top-splines .cs-l3 {
  stroke: var(--glacier, #06c8fc);
}

/* Hide only the original geometry paths. */
.bc-top-splines .cs-ln:not(.bc-spline-drawn-path) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * Do not set opacity here. JavaScript controls it through
 * the SVG opacity attribute.
 */
.bc-top-splines .bc-spline-drawn-path {
  visibility: visible !important;
}

/*
 * Do not set circle opacity in CSS.
 * The HTML starts the circles at opacity="0",
 * then JavaScript controls them.
 */
.bc-top-splines circle {
  visibility: visible;
}


/* ========================================================= 
   BLUECORE — JOIN THE CORE ANIMATION
========================================================= */ 

  .core{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:stretch;
    padding:100px 80px;
    max-width:1350px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .core h2{font-weight:300;font-size:40px;margin-bottom:24px;text-align:left;}
  .core .eyebrow{text-align:left;margin-bottom:8px;}
  .core p{font-size:16px;line-height:22px;font-weight:300;margin-bottom:12px;}
  .core ul{list-style:disc;margin:16px 0;padding-left:24px;}
  .core ul li{margin-bottom:8px;font-size:16px;line-height:22px;font-weight:300;}
  .core .bold-line{font-weight:700;margin:16px 0 24px;}
  .core-illustration{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }
  .core-illustration svg{height:100%;width:auto;max-width:none;transform:scale(1.3);transform-origin:center;}



  /* ── PAGES ── */
/* ========================================================= 
   BLUECORE — HOMEPAGE
========================================================= */ 

#penetration-testing .bc-platform-timeline p.eyebrow {
    text-align:left;
}
/* ========================================================= 
   BLUECORE — SERVICES
========================================================= */ 


/* ========================================================= 
   BLUECORE — ABOUT
========================================================= */ 

#about-hero h1 {
  font-size:2.222rem;
  line-height:normal;
}

.about-stats h4 {
  font-size: 2.222rem;
  color: var(--electric-400);
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 50% */
  letter-spacing: 2px;
}

.about-stats .punch-text {
color: var(--white);
font-size: 0.889rem;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}
.about-stats .punch-grid-item.column {
    border-left: 1px solid var(--fog-600);
    padding-left: 20px;
}
.about-stats .punch-grid-wrapper .punch-grid .punch-grid-item .punch-grid-item-title {
      margin-bottom: 20px;
}

.about-stats .punch-grid-item column {
  border-left: 1px solid var(--fog-600);
}
/* ========================================================= 
   AUTONOMOUS PENTESTING
========================================================= */ 
#page-cobalt-autonomous-pentest {
}


#how-autonomous-works .hiw-steps-left {
    text-align:left;
  margin-left:110px;
}
#how-autonomous-works .hiw-steps-right {
    text-align:left;
  margin-right:110px;
}
#how-autonomous-works h2 {
  font-size: 2.222rem;
  color:var(--midnight-950);
  font-weight: 300;
  margin-bottom:0px;
}

#how-autonomous-works h2 span {
  color: #2fd2ff;
  font-style: italic;
}

#how-autonomous-works h4.dark {
  font-size: 1.667rem;
  color:var(--midnight-950);
  font-weight: 300;
  margin-bottom:0px;
}
#how-autonomous-works p {
  color:var(--midnight-950);
  font-size: 1rem;
  line-height:24px;
  font-weight: 300;
  text-align:left;
  margin: 0 auto;
  width:100%;
  max-width:650px;
}
#how-autonomous-works .eyebrow h5 {
  color:var(--midnight-950);
}
div.punch-heading.punch-type-text {
 text-align:center; 
}
#how-autonomous-works .punch-type-text {
    color:var(--midnight-950);
}
#how-autonomous-works .punch-cta {
  display: flex;
  margin-inline: auto;
  width: fit-content;
}

/* =========================================================
   CHALLENGE COLUMNS
   ========================================================= */

.challenge-columns {
  align-items: flex-start;
  display: grid;
  gap: clamp(2rem, 6vw, 3.75rem);
  grid-template-columns: repeat(2, minmax(0, 425px));
  justify-content: center;
  margin-inline: auto;
  max-width: 910px;
  width: 100%;
}

.challenge-columns__column {
  align-self: start;
  max-width: 425px;
  width: 100%;
}

.challenge-columns__column p {
  margin: 0;
}



.challenge-columns__column ul {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .challenge-columns {
    gap: 2rem;
    grid-template-columns: minmax(0, 425px);
  }

  .challenge-columns__column {
    max-width: none;
  }
}
/*  HOW AUTONOMOUS WORKS — PAGE-SPECIFIC WAVES */

#how-autonomous-works {
  --wave-overlap: 2px;
  --wave-top-inset: 400px;
  --wave-bottom-inset: 400px;
  
  background: var(--white, #fff);
  isolation: isolate;
  overflow: visible !important;
  position: relative;
  z-index: 2;
  padding:400px 0;
}

#how-autonomous-works::before,
#how-autonomous-works::after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    max-height: 440px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 20;
}


/* Upper dark-to-white transition */
#how-autonomous-works::before {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-down.webp");
  bottom: calc(100% - var(--wave-top-inset));
}

/* Lower white-to-dark transition */
#how-autonomous-works::after {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-up.webp");
  top: calc(100% - var(--wave-bottom-inset));
}



#recognition-awards {
  --wave-overlap: 2px;
  --wave-top-inset: 400px;
  --wave-bottom-inset: 400px;
  
  background: var(--white, #fff);
  isolation: isolate;
  overflow: visible !important;
  position: relative;
  z-index: 2;
  padding:400px 0;
}

#recognition-awards::before,
#recognition-awards::after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    max-height: 440px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 20;
}

/* Upper dark-to-white transition */
#recognition-awards::before {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-down.webp");
  bottom: calc(100% - var(--wave-top-inset));
}

/* Lower white-to-dark transition */
#recognition-awards::after {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-up.webp");
  top: calc(100% - var(--wave-bottom-inset));
}

#careers-hero {
  --wave-overlap: 2px;
  --wave-top-inset: 400px;
  --wave-bottom-inset: 400px;
  
  isolation: isolate;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

#careers-hero::after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    max-height: 440px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 20;
}


/* Lower white-to-dark transition */
#careers-hero::after {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-up.webp");
  top: calc(100% - var(--wave-bottom-inset));
}


/*  HOW AUTONOMOUS WORKS — PAGE-SPECIFIC WAVES */

#how-autonomous-works {
  --wave-overlap: 2px;
  --wave-top-inset: 400px;
  --wave-bottom-inset: 400px;
  
  background: var(--white, #fff);
  isolation: isolate;
  overflow: visible !important;
  position: relative;
  z-index: 2;
  padding:400px 0;
}

#how-autonomous-works::before,
#how-autonomous-works::after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    max-height: 440px;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 20;
}


/* Upper dark-to-white transition */
#how-autonomous-works::before {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-down.webp");
  bottom: calc(100% - var(--wave-top-inset));
}

/* Lower white-to-dark transition */
#how-autonomous-works::after {
  background-image: url("https://www.cobalt.io/hubfs/assets/images/dark-wave-soft-transition-up.webp");
  top: calc(100% - var(--wave-bottom-inset));
}

/* =========================================================
   RESEARCH QUOTE BOX
   ========================================================= */

.bc-research-quote {
  background: linear-gradient(
    180deg,
    var(--midnight-950, #000d2b) 0%,
    var(--midnight-950, #000d2b) 100%
  );
  border: 1px solid var(--midnight-800, #082a5f);
  border-radius: 8px;
  box-shadow:
    0 -20px 30px -25px var(--glacier, #06c8fc) inset,
    0 -20px 20px -30px var(--electric, #1751ff) inset,
    0 -40px 60px -21px rgba(13, 58, 189, 0.5) inset,
    0 -51px 80px -25px var(--electric-900, #052475) inset,
    0 -70px 100px -5px rgba(2, 23, 71, 0.5) inset;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 640px;
  padding: 2.25rem;
  width: 100%;
}

.bc-research-quote__eyebrow {
  color: var(--white, #fff);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.6px;
  line-height: normal;
  margin: 0 0 2.5rem;
  text-transform: uppercase;
}

.bc-research-quote__quotation {
  color: var(--glacier, #06c8fc);
  font-size: 1.111rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.bc-research-quote__citation {
  color: var(--white, #fff);
  font-size: 0.778rem;
  font-weight: 300;
  line-height: 22px;
  margin: 2rem 0 0;
}

.bc-research-quote__citation cite {
  font-style: italic;
}

.bc-research-quote__citation time {
  font-style: normal;
}

@media (max-width: 767px) {
  .bc-research-quote {
    padding: 2rem 1.5rem 2.5rem;
  }

  .bc-research-quote__eyebrow {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .challenge-text > .row-fluid {
    align-items: stretch;
    flex-direction: column;
    gap: 2rem;
  }

  .challenge-text > .row-fluid > .dnd-column {
    flex-basis: auto;
    max-width: none;
    width: 100% !important;
  }
}
/* ========================================================= 
   BLUECORE — REQUEST A DEMO
========================================================= */ 

#request-a-demo .form-over-bg {
  width:100%;
  max-width:650px;
  margin:0 auto;
  color: var(--white);
}
#request-a-demo .form-over-bg h2 {
  font-size:3.333rem;
  color: var(--white);
}
#request-a-demo .form-over-bg label span {
  font-size:1.111rem;
  color: var(--white);
  font-weight:400;
}
#request-a-demo .form-over-bg input {
  font-size: 0.889rem !important;
  color: var(--white);
    padding: 22px;
    background: none !important;
    border-radius: 10px;
    border: 1px solid var(--fog-600, #4F5B67);
}
#request-a-demo .form-over-bg textarea {
  font-size: 0.889rem !important;
  color: var(--white);
    padding: 22px;
    background: none !important;
    border-radius: 10px;
    border: 1px solid var(--fog-600, #4F5B67);
}
#request-a-demo .form-over-bg button {
  border-radius: 100px !important;
  background: var(--electric)!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  border: 0;
  color: var(--white)!important;
  font-size: 0.667rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease;
}

#request-a-demo .form-over-bg button:hover,
{
  background: var(--glacier)!important;
  color: var(--electric-800)!important;
  text-decoration: none;!important
  opacity: 1;
}
#request-a-demo .form-over-bg hsfc-NavigationRow__Buttons {
  display:block !important;
  margin:0 auto !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--white, #ffffff);
  opacity: 1;
}
.hsfc-NavigationRow__Buttons {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

.hsfc-NavigationRow__Buttons .hsfc-Button,  
.hsfc-NavigationRow__Buttons .hsfc-Button:hover,
.hsfc-NavigationRow__Buttons .hsfc-Button:focus,
.hsfc-NavigationRow__Buttons .hsfc-Button:focus-visible,
.hsfc-NavigationRow__Buttons .hsfc-Button:active {
  background: var(--electric-500, #1751ff) !important;
  border: 1px solid var(--electric-500, #1751ff) !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}
.hsfc-Step .hsfc-Step__Content>:last-child {
    margin-bottom: 0;
    margin-top: 0;
}

#resources-ty-header h2 {
  margin-bottom:-5px;
}

.thank-you .cobalt-single-post {
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

/* =========================================================
   BLUECORE — CONTACT US FORM
   Supports HubSpot legacy and hsfc forms
   ========================================================= */

.contact-us .form-over-bg {
  color: var(--white, #fff);
  margin: 0 auto;
  max-width: 650px;
  width: 100%;
}

/* Keep the generated form itself constrained. */
.contact-us .form-over-bg form,
.contact-us .form-over-bg .hs-form,
.contact-us .form-over-bg .hsfc-Form {
  margin: 0 auto !important;
  max-width: 650px !important;
  width: 100% !important;
}

/* Ensure predictable sizing throughout the form. */
.contact-us .form-over-bg form *,
.contact-us .form-over-bg .hsfc-Form * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Form title
--------------------------------------------------------- */

.contact-us .form-over-bg h2,
.contact-us .form-over-bg .hsfc-Form__Title {
  color: var(--white, #fff);
  font-size: 3.333rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.08;
  margin: 0 0 2rem;
}

/* ---------------------------------------------------------
   Fields and spacing
--------------------------------------------------------- */

.contact-us .form-over-bg .hs-form-field,
.contact-us .form-over-bg [class*="hsfc-Field"] {
  margin-bottom: 20px;
}

.contact-us .form-over-bg fieldset {
  border: 0;
  margin: 0;
  max-width: none !important;
  padding: 0;
  width: 100%;
}

/* Legacy HubSpot two-column rows */
.contact-us .form-over-bg fieldset.form-columns-2 {
  display: flex;
  gap: 10px;
}

.contact-us
.form-over-bg
fieldset.form-columns-2
.hs-form-field {
  float: none !important;
  margin-right: 0 !important;
  width: 50% !important;
}
/* Selected value shown inside the form field */
.contact-us .form-over-bg select,
.contact-us .form-over-bg .hs-input[type="select"],
.contact-us .form-over-bg .hsfc-SelectInput {
  background-color: transparent !important;
  color: var(--white, #fff) !important;
  -webkit-text-fill-color: var(--white, #fff) !important;
}

/* Choices inside the opened native dropdown */
.contact-us .form-over-bg select option {
  background-color: var(--white, #fff) !important;
  color: var(--midnight-950, #000d2b) !important;
  -webkit-text-fill-color: var(--midnight-950, #000d2b) !important;
}

/* Disabled placeholder option */
.contact-us .form-over-bg select option[disabled] {
  color: var(--fog-600, #4f5b67) !important;
}
/* New HubSpot form rows */
.contact-us .form-over-bg .hsfc-Row {
  gap: 10px;
}

.contact-us .form-over-bg .hsfc-Column {
  min-width: 0;
}
.punch-form .hs-form-field .input input, .punch-form .hs-form-field .input select, .punch-form .hs-form-field .input textarea {
      font-size: 0.889rem !important;
  color: var(--white)!important;;
  padding:0 !important;
    background: none !important;
    border-radius: 10px!important;;
    border: 1px solid var(--fog-600, #4F5B67)!important;;
}
/* ---------------------------------------------------------
   Labels
--------------------------------------------------------- */

.contact-us .form-over-bg label,
.contact-us .form-over-bg .hsfc-FieldLabel {
  color: var(--white, #fff) !important;
  display: block;
  font-size: 0.778rem !important;
  font-style: normal;
  font-weight: 300 !important;
  line-height: 1.35;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

.contact-us .form-over-bg label span,
.contact-us .form-over-bg .hsfc-FieldLabel span {
  font-size:1.111rem;
  color: var(--white);
  font-weight:400;
}

/* Required-field marker */
.contact-us .form-over-bg .hs-form-required,
.contact-us .form-over-bg [class*="Required"] {
  color: var(--white, #fff) !important;
}

.locations h4.punch-grid-item-title {
  color:var(--white);
  font-size: 1.222rem;
  font-weight:500;
  line-height:1.1;
}


.locations .punch-text.punch-grid-item-content p {
  color:var(--white);
  font-size: 0.889rem;
  font-weight:300;
  line-height:1.5;
}
.locations .punch-grid-item.column {
border-top: 1px solid var(--electric-500, #1751FF);
}
/* ---------------------------------------------------------
   Text fields, selects and textarea
--------------------------------------------------------- */

.contact-us
.form-over-bg
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.contact-us .form-over-bg select,
.contact-us .form-over-bg textarea,
.contact-us .form-over-bg .hs-input,
.contact-us .form-over-bg .hsfc-TextInput,
.contact-us .form-over-bg .hsfc-SelectInput,
.contact-us .form-over-bg .hsfc-TextareaInput {
    font-size: 0.889rem !important;
  color: var(--white);
    padding: 22px;
    background: none !important;
    border-radius: 10px;
    border: 1px solid var(--fog-600, #4F5B67);
  appearance: none;
  background-color: transparent !important;
  box-shadow: none !important;
  font-weight: 300;
  height: 48px;
  line-height: 1.3;
  margin: 0 !important;
  outline: none;
  padding: 14px !important;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
  width: 100% !important;
}

/* Textareas need their own height. */
.contact-us .form-over-bg textarea,
.contact-us .form-over-bg .hsfc-TextareaInput {
  height: auto;
  min-height: 92px;
  resize: vertical;
      font-size: 0.889rem !important;
  color: var(--white);
    padding: 22px;
    background: none !important;
    border-radius: 10px;
    border: 1px solid var(--fog-600, #4F5B67);
}

/* Placeholder */
.contact-us .form-over-bg input::placeholder,
.contact-us .form-over-bg textarea::placeholder,
.contact-us .form-over-bg .hsfc-TextInput::placeholder,
.contact-us .form-over-bg .hsfc-TextareaInput::placeholder {
  color: var(--fog-600, #4f5b67) !important;
  opacity: 1;
}

/* Select arrow */
.contact-us .form-over-bg select,
.contact-us .form-over-bg .hsfc-SelectInput {
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--white, #fff) 50%
    ),
    linear-gradient(
      135deg,
      var(--white, #fff) 50%,
      transparent 50%
    ) !important;
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
  cursor: pointer;
  padding-right: 42px !important;
}

/* Some HubSpot selects use a wrapper/button. */
.contact-us
.form-over-bg
[class*="hsfc-SelectInput"] {
  color: var(--white, #fff) !important;
}

/* Focus treatment */
.contact-us
.form-over-bg
input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-us .form-over-bg select:focus,
.contact-us .form-over-bg textarea:focus,
.contact-us .form-over-bg .hsfc-TextInput:focus,
.contact-us .form-over-bg .hsfc-SelectInput:focus,
.contact-us .form-over-bg .hsfc-TextareaInput:focus {
  border-color: var(--electric-400, #347dff) !important;
  box-shadow:
    0 0 0 2px rgb(52 125 255 / 18%) !important;
}

/* Autofill */
.contact-us .form-over-bg input:-webkit-autofill,
.contact-us .form-over-bg input:-webkit-autofill:hover,
.contact-us .form-over-bg input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white, #fff);
  box-shadow:
    0 0 0 1000px var(--midnight-950, #000d2b)
    inset !important;
  caret-color: var(--white, #fff);
}

/* ---------------------------------------------------------
   Checkbox and consent fields
--------------------------------------------------------- */

.contact-us .form-over-bg .inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-us .form-over-bg .inputs-list li {
  margin: 0 0 10px;
}

.contact-us .form-over-bg input[type="checkbox"],
.contact-us .form-over-bg input[type="radio"] {
  accent-color: var(--electric-400, #347dff);
  margin: 2px 8px 0 0;
}

.contact-us .form-over-bg .legal-consent-container,
.contact-us .form-over-bg [class*="hsfc-Legal"] {
  color: var(--fog-200, #d9e1e8);
  font-size: 0.667rem;
  font-weight: 300;
  line-height: 1.5;
  margin-top: 10px;
}

.contact-us .form-over-bg .legal-consent-container p,
.contact-us .form-over-bg [class*="hsfc-Legal"] p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---------------------------------------------------------
   Error messages
--------------------------------------------------------- */

.contact-us .form-over-bg .hs-error-msgs,
.contact-us .form-over-bg [class*="Error"] {
  color: #ff8c8c;
  font-size: 0.667rem;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.contact-us
.form-over-bg
input.invalid,
.contact-us
.form-over-bg
textarea.invalid,
.contact-us
.form-over-bg
select.invalid {
  border-color: #ff8c8c !important;
}

/* ---------------------------------------------------------
   Submit button alignment
--------------------------------------------------------- */

.contact-us .form-over-bg .hs_submit .actions,
.contact-us
.form-over-bg
.hsfc-NavigationRow__Buttons,
.contact-us
.form-over-bg
[class*="NavigationRow__Buttons"] {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin: 44px auto 0 !important;
  width: 100% !important;
}

/* Submit button */
.contact-us .form-over-bg button,
.contact-us .form-over-bg input[type="submit"],
.contact-us .form-over-bg .hs-button,
.contact-us .form-over-bg .hsfc-Button {
  align-items: center;
  background: var(--electric, #1751ff) !important;
  border: 0 !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  color: var(--white, #fff) !important;
  cursor: pointer;
  display: inline-flex !important;
  font-family: inherit;
  font-size: 0.667rem !important;
  font-weight: 500 !important;
  justify-content: center;
  letter-spacing: 0.06em;
  line-height: 1;
  min-height: 34px;
  min-width: 145px;
  opacity: 1 !important;
  padding: 11px 30px !important;
  text-decoration: none !important;
  text-transform: uppercase;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
  white-space: nowrap;
}

.contact-us .form-over-bg button:hover,
.contact-us .form-over-bg button:focus-visible,
.contact-us .form-over-bg input[type="submit"]:hover,
.contact-us .form-over-bg input[type="submit"]:focus-visible,
.contact-us .form-over-bg .hs-button:hover,
.contact-us .form-over-bg .hs-button:focus-visible,
.contact-us .form-over-bg .hsfc-Button:hover,
.contact-us .form-over-bg .hsfc-Button:focus-visible {
  background: var(--glacier, #06c8fc) !important;
  color: var(--electric-800, #092f99) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
}
/*
 * Covers either location HubSpot may place the custom class:
 * on the row-fluid or on its row-fluid-wrapper.
 */
.row-fluid.contact-form-row,
.contact-form-row > .row-fluid {
  align-items: flex-start;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Center and constrain the HubSpot column holding the form. */
.row-fluid.contact-form-row > [class*="span"],
.contact-form-row > .row-fluid > [class*="span"] {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 650px !important;
  width: min(100%, 650px) !important;
}

/* Cover HubSpot's additional module wrappers. */
.contact-form-row .dnd-column,
.contact-form-row .dnd-module,
.contact-form-row .widget-span,
.contact-form-row .hs_cos_wrapper,
.contact-form-row .form-over-bg {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 650px !important;
  width: 100% !important;
}
.contact-us .row-fluid:has(.form-over-bg) {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.contact-us
.row-fluid:has(.form-over-bg)
> [class*="span"] {
  float: none !important;
  margin-inline: 0 !important;
  max-width: 650px !important;
  width: min(100%, 650px) !important;
}
/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 650px) {
  .contact-us .form-over-bg {
    max-width: 100%;
  }

  .contact-us .form-over-bg h2,
  .contact-us .form-over-bg .hsfc-Form__Title {
    font-size: clamp(2.25rem, 12vw, 3.333rem);
  }

  .contact-us .form-over-bg fieldset.form-columns-2 {
    display: block;
  }

  .contact-us
  .form-over-bg
  fieldset.form-columns-2
  .hs-form-field {
    width: 100% !important;
  }

  .contact-us .form-over-bg .hsfc-Row {
    flex-direction: column;
  }

  .contact-us .form-over-bg .hsfc-Column {
    width: 100% !important;
  }
}



  /* ── MARKETECTURE ── */

/* ========================================================= 
   BLUECORE — OFFENSIVE SECURITY SERVICE MATRIX STYLES 
========================================================= */ 
.bc-security-matrix { 
  --bc-matrix-bg: #01143a; 
  --bc-matrix-border-glow: #103ba0; 
  /* 🎨 Color Specs directly from Figma */ 
  --bc-color-night-900: #001A4E; 
  --bc-color-electric-500: #1751FF; 
  --bc-matrix-text-light: #ffffff; 
  --bc-matrix-text-muted: rgba(255, 255, 255, 0.7); 
  
  box-sizing: border-box; 
  width: 100%; 
  color: var(--bc-matrix-text-light); 
  padding: 0; 
  border: 1px solid; 
  border-image-source: linear-gradient(121.81deg, #1751FF 24.69%, #000D2B 84.2%); 
  box-shadow: 0px 0px 15px 1px var(--ElectricSky500); 
} 

.bc-security-matrix__container { 
  display: flex; 
  flex-direction: column; 
  gap: .5rem; 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 2rem; 
border-radius: 10px;
border: 1px solid var(--electric, #1751FF);
background: radial-gradient(50% 50% at 50% 50%, #0538AD 57.21%, var(--electric-950, #021747) 99.52%);
box-shadow: 0 0 15px 1px var(--electric, #1751FF);
} 

.bc-security-matrix__block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--midnight-950, #000D2B) 0%, var(--midnight-950, #000D2B) 100%);
  box-shadow: 0 20px 30px -25px var(--glacier, #06C8FC) inset, 0 20px 20px -30px var(--electric, #1751FF) inset, 0 40px 60px -21px rgba(13, 58, 189, 0.50) inset, 0 51px 80px -25px var(--electric-900, #052475) inset, 0 70px 100px -5px rgba(2, 23, 71, 0.50) inset;
  overflow: hidden;
}


/* 🚀 The Top Lens Flare Reflection Overlay */
.bc-security-matrix__block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Keeps the bright flare core slightly away from the far left and right edges */
  height: 60px; /* Limits the flare vertical footprint so it fades quickly at the top */
  pointer-events: none; /* Prevents layout clipping or click-blocking on your links */
  z-index: 1; /* Renders smoothly underneath your text elements */
  
  /* Concentrates pure white right at the top center, spreading out horizontally and fading vertically */
  background: radial-gradient(180% 34px at 50% -5%, rgba(255, 255, 255, 0.35) 0%, rgba(23, 81, 255, 0.15) 45%, rgba(2, 23, 71, 0) 100%);
  
  /* Smoothly mixes with the background colors underneath */
  mix-blend-mode: screen; 
}

/* Ensures your text contents stay cleanly indexed above the flare reflection overlay layer */
.bc-security-matrix__header { 
  position: relative;
  z-index: 2; 
  text-align: center; 
} 

.bc-security-matrix__header { 
  text-align: center; 
} 

.bc-security-matrix__header h3 { 
  margin: 0 0 0.5rem 0; 
  color: var(--glacier-400); 
  font-size: 1.111rem; 
  font-weight: 300; 
  letter-spacing: 0.03em; 
} 

#continuous-offsec p.bc-security-matrix__subtext { 
  color: var(--white); 
  font-size: 0.778rem; 
  line-height: 1.5; 
  font-weight: 300; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 650px; 
} 

#continuous-offsec p.bc-security-matrix__subtext span { 
  margin: 0; 
  color: var(--electric-400); 
  font-size: 0.778rem; 
  line-height: 1.5; 
  font-weight: 300; 
} 

/* Grids config */ 
.bc-security-matrix__grid { 
  display: grid; 
  gap: 1.25rem; 
  width: 100%; 
  box-sizing: border-box; 
} 

.bc-security-matrix__grid--three { 
  grid-template-columns: repeat(3, 1fr); 
} 

.bc-security-matrix__grid--one { 
  grid-template-columns: 1fr; 
  max-width: 640px; 
  margin: 0 auto; 
} 

/* Button Link Components */ 
.bc-security-matrix__btn { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-sizing: border-box; 
  
  /* Layout Metrics */ 
  min-height: 47.15px; 
  padding: 0.5rem 2.75rem 0.75rem; 
border-radius: 8px;
border: 1px solid var(--electric, #1751FF);
background: linear-gradient(0deg, var(--midnight-900, #001A4E) 0%, var(--electric, #1751FF) 100%);
box-shadow: 0 0 10px 2px var(--electric, #1751FF);
  
  /* Link setups */ 
  color: var(--bc-matrix-text-light) !important; 
  text-decoration: none !important; 
  transition: background 0.3s ease, box-shadow 0.3s ease; 
} 

.bc-security-matrix__btn--large { 
  padding: 1.25rem 2.75rem; 
} 

.bc-security-matrix__btn-content { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.25rem; 
  width: 100%; 
} 

/* 🔤 Typography Spec Sheets */ 
.bc-security-matrix__btn span.bc-security-matrix__title { 
  font-family: 'Satoshi', sans-serif; 
  font-weight: 300; 
  font-style: normal; 
  font-size: 1.111rem; 
  line-height: 22px; 
  letter-spacing: 0%; 
  text-align: center; 
} 

.bc-security-matrix__btn span.bc-security-matrix__desc { 
  font-family: 'Satoshi', sans-serif; 
  font-size: 0.88rem; 
  color: var(--white); 
  font-weight: 300; 
  text-align: center; 
} 

/* Vector Inline Chevrons placement styles */ 
.bc-security-matrix__chevron { 
  position: absolute; 
  right: 1.25rem; 
  width: 16px; 
  height: 16px; 
  flex-shrink: 0; 
  color: rgba(255, 255, 255, 0.7); 
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s ease; 
} 

/* Interactive States & Actions */ 
.bc-security-matrix__btn:hover { 
  /* 🚀 Removes the background shift so the static Figma gradient stays perfectly locked */
  background: linear-gradient(0deg, #001A4E 0%, #1751FF 100%); 
  
  /* 🚀 Freezes the breathing pulse on hover and holds the glow at its maximum fully-expanded state */
  animation: none; 
  border-color: rgba(43, 105, 255, 1);
  box-shadow: 0px 0px 24px 5px rgba(23, 81, 255, 0.95);
} 

.bc-security-matrix__btn:hover .bc-security-matrix__chevron { 
  transform: translateX(4px); 
  color: #ffffff; 
} 

/* 🚀 The Breathing Glow Animation Engine */ 
@keyframes breathingGlow { 
  0% { 
    box-shadow: 0px 0px 10px 2px var(--electric-500, rgba(23, 81, 255, 0.6)); 
    border-color: rgba(23, 81, 255, 0.8); 
  } 
  50% { 
    box-shadow: 0px 0px 24px 5px rgba(23, 81, 255, 0.95); 
    border-color: rgba(43, 105, 255, 1); 
  } 
  100% { 
    box-shadow: 0px 0px 10px 2px var(--electric-500, rgba(23, 81, 255, 0.6)); 
    border-color: rgba(23, 81, 255, 0.8); 
  } 
} 

.bc-security-matrix__btn--glow { 
  animation: breathingGlow 4s infinite ease-in-out; 
} 

/* Non-uniform animation delay stagger configs prevent box sync locks */ 
.bc-security-matrix__grid a:nth-child(2) { 
  animation-delay: 0.8s; 
} 

.bc-security-matrix__grid a:nth-child(3) { 
  animation-delay: 1.6s; 
} 

/* Structural Breakpoint rules */ 
@media (max-width: 900px) { 
  .bc-security-matrix__grid--three { 
    grid-template-columns: 1fr; 
  } 
  .bc-security-matrix__container { 
    padding: 1rem; 
    gap: 1.25rem; 
  } 
  .bc-security-matrix__block { 
    padding: 1.25rem; 
  } 
  .bc-security-matrix__btn { 
    padding: 0.75rem 2.5rem; 
  } 
}



  .market-section {
    padding: 100px 80px;
    background: var(--midnight);
  }
  .market-inner { max-width: 1400px; margin: 0 auto; }
  .market-header { text-align: center; margin-bottom: 64px; }
  .market-frame {
    border: 2px solid var(--electric);
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 100%, rgba(5,56,173,.6) 0%, rgba(3,40,122,.4) 40%, rgba(2,23,71,.8) 100%);
    box-shadow: 0 0 30px 5px rgba(23,81,255,.3);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .market-row {
    display: flex;
    gap: 12px;
  }
  .market-pill {
    flex: 1;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
  }
  .market-box {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 18px 24px;
    text-align: center;
  }
  .market-box-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--electric-400);
    margin-bottom: 8px;
  }
  .market-box-sub {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
    line-height: 1.6;
  }
  .market-expertise {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 18px 24px;
    text-align: center;
  }
  .market-expertise-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--electric-400);
    margin-bottom: 6px;
  }
  .market-expertise-subs {
    font-size: 13px;
    color: rgba(255,255,255,.65);
  }
  .market-expertise-subs span { color: var(--electric-400); margin: 0 6px; }

  /* ── TESTIMONIALS ── */
  .testimonials-section {
    padding: 100px 80px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .quote-box {
    border: 2px solid var(--electric);
    border-radius: 12px;
    background: rgba(0,0,0,.7);
    box-shadow: 0 0 5px 2px rgba(52,125,255,.1);
    padding: 56px 56px 44px;
    max-width: 1200px;
    position: relative;
    margin: 0 auto;
  }
  .quote-mark {
    font-size: 80px;
    font-weight: 300;
    color: var(--glacier);
    line-height: .8;
    margin-bottom: 20px;
    display: block;
  }
  .quote-text {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--white);
    max-width: 780px;
    margin-bottom: 40px;
  }
  .quote-attribution { text-align: left; }
  .quote-name { font-size: 15px; font-weight: 500; color: var(--glacier); }
  .quote-role { font-size: 14px; font-weight: 300; font-style: italic; color: rgba(255,255,255,.7); }
  .quote-industry { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }
  .quote-logo-box {
    position: absolute;
    top: 52px;
    right: 56px;
    background: var(--fog-200);
    border-radius: 4px;
    width: 130px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0,0,0,.5);
    letter-spacing: .06em;
  }
  .quote-dots { display: flex; gap: 8px; margin-top: 32px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--electric); opacity: .4; }
  .dot.active { opacity: 1; }

  /* ── RESOURCES ── */
  .resources-section {
    padding: 100px 80px;
    background: var(--midnight);
    position: relative;
  }
  .resources-inner { max-width: 1400px; margin: 0 auto; }
  .resources-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    margin-top: 64px;
  }
  .resource-card {
    border: 1px solid var(--midnight-800);
    border-radius: 10px;
    background: var(--midnight);
    box-shadow: var(--glow-card);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    min-height: 230px;
    transition: border-color .2s;
  }
  .resource-card.featured {
    border-color: var(--electric);
    box-shadow: var(--glow-card), 0 0 8px 1px var(--electric);
  }
  .resource-card:hover { border-color: rgba(23,81,255,.5); }
  .resource-card-inner { display: flex; gap: 24px; height: 100%; }
  .resource-cover {
    width: 130px;
    min-width: 130px;
    background: linear-gradient(135deg, #1246e0, #052475);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .resource-meta { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
  .resource-type {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--white);
  }
  .resource-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--white);
    flex: 1;
  }
  .resource-cta {
    font-size: 10px;
    color: var(--electric-400);
    text-decoration: none;
    font-weight: 400;
  }
  .resource-card.featured .resource-cta { color: var(--glacier); }

  /* ── FINAL CTA ── */
#closing-cta h2 {
    font-size: 2.222rem;
    font-weight: 300;
    margin-bottom: 20px;
}
#closing-cta p.subheader {
    font-size: 0.889rem;
    line-height: 1.4;
    font-weight: 300;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
      margin-bottom: 20px;
}
#closing-cta .cta-closer {
    text-align:center;
  margin:auto 0;
}


#closing-cta .punch-image {
  isolation: isolate;
  overflow: visible !important;
  position: relative;
}

#closing-cta .punch-image::before {
  background: radial-gradient(
    ellipse at center,
    rgba(6, 200, 252, 0.55) 0%,
    rgba(23, 81, 255, 0.4) 35%,
    transparent 72%
  );
  content: "";
  filter: blur(2rem);
  height: 25%;
  left: 5%;
  pointer-events: none;
  position: absolute;
  top: -3%;
  width: 90%;
  z-index: 0;
}

#closing-cta .punch-image picture {
  display: block;
  position: relative;
  z-index: 1;
}

#closing-cta .punch-image img {
  display: block;
  height: auto;
  width: 100%;
}





  .final-cta {
    padding: 100px 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .final-cta-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
  .final-cta h2 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  .final-cta p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,.75);
    margin-bottom: 40px;
  }
  .final-cta .btn-primary {
    height: 52px;
    font-size: 15px;
    padding: 0 40px;
  }
  .final-screenshot {
    margin-top: 60px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(135deg, #021747 0%, #0a2880 60%, #052475 100%);
    border: 1px solid rgba(23,81,255,.35);
    border-bottom: none;
    height: 360px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 -2px 6px 1px rgba(111,174,255,.3), 0 -4px 15px 1px var(--electric);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .final-screenshot::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(23,81,255,.07) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(23,81,255,.07) 120px);
  }
  .final-screenshot-label {
    color: rgba(255,255,255,.15);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    z-index: 1;
  }
  /* ── GLOBAL MODULE SETTINGS ── */
#resources-global h2 {
    font-size: 2.222rem;
    font-weight: 300;
    margin-bottom: -30px;
}

  /* ── FOOTER ── */

/* Color Palette Variables */
.cobalt-global-footer {
  --footer-border: rgba(141, 154, 167, 0.15);
  
  background-color: var(--midnight);
  padding: 5rem 1.5rem 3.5rem;
  color: var(--fog-400);
}

/* Master Wrapper Container spacing limits */
.cobalt-global-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Base structural layout for the top elements section */
.cobalt-global-footer .footer-top-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

/* Branding Column Box dimensions configuration */
.cobalt-global-footer .footer-brand-wrap {
  flex: 0 0 20%;
}

.cobalt-global-footer .footer-brand-wrap img {
  max-width: 150px;
  height: auto;
}
svg.footer-logo {
    filter: invert(100%) brightness(100%) contrast(100%);
}

/* Main Navigation Columns Core Grid alignment setup */
.cobalt-global-footer .footer-links-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

/* Individual list columns and dividers spacing boundaries */
.cobalt-global-footer .footer-nav-col {
  border-left: 1px solid var(--fog-600);
  padding-left: 1.5rem;
  box-sizing: border-box;
}

/* Section Headings Properties (Locked to White color scale) */
.cobalt-global-footer h6.footer-heading {
  color: var(--white) !important;
  font-size: 0.778rem !important;
  font-weight: 400 !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.2 !important;
}

/* Clean default list items formatting styles maps */
.cobalt-global-footer .footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cobalt-global-footer .footer-nav-list li {
  margin-bottom: 0.2rem !important;
  list-style-type: none !important;
}

/* Nav links basic dimensions and color styling rules */
.cobalt-global-footer .footer-link {
  color: var(--fog-400) !important;
  font-size: 0.778rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 200ms ease-in-out;
}

.cobalt-global-footer .footer-link:hover {
  color: var(--white) !important;
}

/* Bottom elements strip arrangement layout */
.cobalt-global-footer .footer-bottom-bar {
  margin-top: 5rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Social link block styling adjustments */
.cobalt-global-footer .footer-socials {
  display: flex;
  gap: 1.0rem;
}

.cobalt-global-footer .footer-socials a {
  color: var(--white) !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: opacity 200ms ease;
}

.cobalt-global-footer .footer-socials a:hover {
  opacity: 0.7;
}

/* Legal text block mapping configurations */
.cobalt-global-footer .footer-legal-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.cobalt-global-footer .copyright,
.cobalt-global-footer .legal-link {
  font-size: 0.778rem !important;
  color: var(--fog-400) !important;
  text-decoration: none !important;
}

.cobalt-global-footer .legal-link:hover {
  color: var(--white) !important;
}

/* Modern Mobile Breakpoint Layout Overrides */
@media (max-width: 991px) {
  .cobalt-global-footer .footer-top-grid {
    flex-direction: column;
    gap: 3rem;
  }
  
  .cobalt-global-footer .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
    width: 100%;
  }

  .cobalt-global-footer .footer-nav-col {
    border-left: none;
    padding-left: 0;
  }

  .cobalt-global-footer .footer-bottom-bar {
    margin-top: 3.5rem;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2rem;
  }

  .cobalt-global-footer .footer-legal-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 479px) {
  .cobalt-global-footer .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
/* =========================================================
   HERO BACKGROUNDS
   ========================================================= */

#services-hero {
  background-color: var(--midnight-950, #000d2b);
  background-image: url("https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  width: 100vw;
}  
#platform-hero {
  background-color: var(--midnight-950, #000d2b);
  background-image: url("https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  width: 100vw;
}  
#about-hero {
    background-color: var(--midnight-950, #000d2b);
    background-image: url("https://www.cobalt.io/hubfs/assets/images/about-hero-bg.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 90vw auto;
    box-sizing: border-box;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw;
}  
#request-a-demo {
    background-color: var(--midnight-950, #000d2b);
    background-image: url(https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw;
    padding-top: 225px !important;
}

#agentic-ptaas-hero {
  background-color: var(--midnight-950, #000d2b);
  background-image: url("https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  width: 100vw;
}  

#autonomous-pentest-hero {
    background-color: var(--midnight-950, #000d2b);
    background-image: url(https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw;
}
#careers-hero {
    background-color: var(--midnight-950, #000d2b);
    background-image: url(https://www.cobalt.io/hubfs/assets/images/careers-hero-2560x1693-b.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw;
    height:50vw;
}
#contact-hero {
    background-color: var(--midnight-950, #000d2b);
    background-image: url(https://www.cobalt.io/hubfs/assets/images/gen-page-hero-bg2.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw;
}

  /* ── DIVIDERS ── */
  .section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(23,81,255,.2) 20%, rgba(23,81,255,.2) 80%, transparent);
  }

#intro h2 {font-size:2.25rem;
          font-weight:300;
}

#services-hero .punch-text.punch-type-text, 
#platform-hero .punch-text.punch-type-text, 
#request-a-demo .punch-text.punch-type-text, 
#agentic-ptaas-hero .punch-text.punch-type-text, 
#autonomous-pentest-hero .punch-text.punch-type-text, 
#careers-hero .punch-text.punch-type-text {
  font-size: 1.111rem !important;
  line-height:1.4;
}

/* =========================================================
   OVERRIDES
   ========================================================= */
.container-fluid .row-fluid-wrapper .dnd-section .dnd-row .row-fluid [class*="span"] {
    padding: 0;
}

.punch-tab-drop-opener {
    display: none;
}
#about-hero h1.punch-heading-tag {
    margin-top: 26px;
}

#about-hero .eyebrow h5.punch-heading-tag {
  margin-bottom:0 !important;
}


#penetration-testing .eyebrow h5 {
 text-align:left !important; 
margin-bottom: 30px !important;
}
.punch-grid-content-wrapper.punch-grid-item-title {
}
div#penetration-testing .tabs-title h2.punch-heading-tag {
    text-align: left;
}
div#offensive-security .tabs-title h2.punch-heading-tag {
    text-align: left;
}
div#offensive-security .tabs-title h2.punch-heading-tag {
    text-align: left;
}

div#our-story h2.punch-heading-tag {
 text-align:left !important;
}
div#cobalt-platform .punch-grid-item .punch-text .3up
{
max-width:90%;  
}
.punch-heading.eyebrow-left.our-story h5 {
    text-align: left !important;
    margin-bottom: 45px !important;
}

/* =========================================================
   MEGAMENU — LIGHT PAGE OVERRIDE
   ========================================================= */

html.bc-light-header-page .bc-mega-header {
  background: var(--white, #fff);
}

/* Top-level navigation */
html.bc-light-header-page .bc-mega-header__top-list button,
html.bc-light-header-page .bc-mega-header__top-list > li > a {
  color: var(--midnight-950, #000d2b);
}

/* Search/account icons and hamburger */
html.bc-light-header-page .bc-mega-header__action,
html.bc-light-header-page .bc-mega-header__mobile-toggle {
  color: var(--midnight-950, #000d2b);
}

/* If these icons are SVGs using currentColor */
html.bc-light-header-page .bc-mega-header__action svg,
html.bc-light-header-page .bc-mega-header__mobile-toggle svg {
  color: inherit;
  stroke: currentColor;
}

/* Prevent the transparent-at-top state from overriding it */
html.bc-light-header-page:not(.header-is-scrolled)
  .bc-mega-header {
  background: var(--white, #fff);
}


.bc-mega-header__logo-dark {
  display: none;
}

html.bc-light-header-page .bc-mega-header__logo-light {
  display: none;
}

html.bc-light-header-page .bc-mega-header__logo-dark {
  display: block;
}

/* =========================================================
   MEGAMENU — SERVICE SUBMENU INTRO
   ========================================================= */

.bc-mega-header__submenu-intro {
  border-bottom: 1px solid var(--fog-600, #4f5b67);
  box-sizing: border-box;
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  width: 100%;
}

.bc-mega-header__submenu-intro p {
  color: var(--white, #fff);
  font-size: 0.778rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.bc-mega-header__links
.bc-mega-header__submenu-intro > a {
  align-items: center;
  color: var(--electric-400, #347dff);
  display: inline-flex;
  font-size: 0.778rem;
  font-weight: 400;
  gap: 0.35em;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: auto;
}

.bc-mega-header__submenu-intro > a::after {
  border-right: 0.12em solid currentColor;
  border-top: 0.12em solid currentColor;
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 0.45em;
  transform: rotate(45deg);
  transition: transform 200ms ease;
  width: 0.45em;
}

.bc-mega-header__submenu-intro > a:hover::after,
.bc-mega-header__submenu-intro > a:focus-visible::after {
  transform: translateX(0.2rem) rotate(45deg);
}

/* Keep the Learn More label and chevron on the same line */
.bc-mega-header__submenu-intro > a {
  align-items: center !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  justify-content: flex-start !important;
  white-space: nowrap;
  width: max-content !important;
}

.bc-mega-header__submenu-intro > a::after {
  display: inline-block !important;
  flex: 0 0 auto;
  margin: 0 !important;
  position: static !important;
  transform: rotate(45deg);
}

/* =========================================================
   RESPONSIVE VISIBILITY UTILITIES
   Breakpoint: 950px
   ========================================================= */

/* Visible on desktop; hidden on mobile */
.mobile-hide {
  display: block;
}

/* Hidden on desktop; visible on mobile */
.desktop-hide {
  display: none;
}

@media (max-width: 950px) {
  .mobile-hide {
    display: none !important;
  }

  .desktop-hide {
    display: block !important;
  }
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
  @media (max-width: 950px) {
    nav { padding: 0 24px; }
    .nav-links { display: none; }
    .hero-inner { flex-direction: column; padding: 80px 24px 0; align-items: flex-start; }
    .hero-content { padding-bottom: 40px; }
    .hero-portrait { width: 100%; max-width: 100%; }
    .nav-inner { padding: 0 24px; }
    .nav-links { display: none; }
    .section { padding: 72px 24px; }
    .three-col { grid-template-columns: 1fr; }
    .cards-row { grid-template-columns: 1fr; }
    .advantage-layout { grid-template-columns: 1fr; }
    .resources-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .final-cta { padding: 72px 24px 0; }
    .footer-inner { padding: 60px 24px 40px; }
    .difference-section { padding: 72px 24px; }
    .market-section { padding: 72px 24px; }
    .testimonials-section { padding: 72px 24px; }
    .resources-section { padding: 72px 24px; }
    .advantage-section { padding: 72px 24px; }
    .market-row { flex-wrap: wrap; }
    .hero { min-height: 725px; }
    .hero-ctas { display:flex; flex-direction:column; align-items:flex-start;  } 
    .hero-portrait-layer { right: -118px; height:150%;top:-80px;width:305%;background-position: 302% 100%; }
    .hero-splines { bottom: 18px !important; height: 74% !important; pointer-events: none; z-index: 2;}
    .hero-splines svg {left: -255px !important;overflow: visible;position: absolute;width:158% !important;}
    .hero-waves-layer svg {    bottom: 83px;    display: block;    height: 280px;    left: 0;    position: absolute;    transform: scaleY(.42);    transform-origin: bottom center;    width: 100%;}
    .hero-wrapper {overflow:hidden;}
  }

/* =========================================================
   HOMEPAGE HERO — MOBILE COPY
   ========================================================= */

@media (max-width: 950px) {
  #homepage .hero-inner {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
    width: 100%;
  }

  #homepage .hero-content {
    box-sizing: border-box;
    left: auto;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    right: auto;
    transform: none !important;
    width: 100%;
  }

  #homepage .hero-content h1 {
    font-size: clamp(3rem, 13vw, 4.5rem);
    line-height: 1.05;
    margin-inline: 0;
    max-width: 100%;
    overflow-wrap: normal;
    white-space: normal;
    width: 100%;
  }

  #homepage .hero-sub {
    box-sizing: border-box;
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    line-height: 1.5;
    margin-inline: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
  }

  #homepage .hero-ctas {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    width: 100%;
  }

  #homepage .hero-ctas a {
    justify-content: center;
    max-width: 100%;
    width: 100%;
  }
      header{padding:16px 24px;flex-wrap:wrap;gap:12px;}
    nav ul{gap:16px;flex-wrap:wrap;font-size:13px;}
    .hero-content h1{font-size:36px;}
    .culture-grid{grid-template-columns:1fr;}
    .quote-grid{grid-template-columns:1fr;}
    .core{grid-template-columns:1fr;padding:60px 24px;}
    .core h2, .core p, .core .eyebrow{text-align:center;}
    .benefit-row{grid-template-columns:1fr;}
    .timeline::before{left:20px;}
    .benefit-row:nth-child(odd) .benefit-text,
    .benefit-row:nth-child(even) .benefit-text{
      grid-column:1;text-align:left;padding-left:60px;padding-right:20px;
    }
    .benefit-row:nth-child(odd) .benefit-empty,
    .benefit-row:nth-child(even) .benefit-empty{display:none;}
    .benefit-row .dot{left:20px;}
}

/* BLUECORE — RAW MEGA HEADER V2 */
.container-fluid.main { margin-top: -90px; padding-top: 90px; }
body:not(.page-has-transparent-hero) main { padding-top: var(--bc-header-h, 90px); }

.bc-mega-header {
  --bc-header-h: 90px;
  --bc-header-container: 1400px;
  --bc-header-panel-min-height: 360px;
  --bc-header-panel-padding-x: 2rem;
  --bc-header-panel-padding-y: 2rem;
  --bc-header-panel-gap: 2.75rem;
  --bc-header-side-width: 230px;
  --bc-header-resource-width: 280px;
  --bc-header-bg: var(--midnight-950, #000d2b);
  --bc-header-panel-bg: var(--black, #000);
  --bc-header-light: var(--white, #fff);
  --bc-header-ink: var(--black, #000);
  --bc-header-electric: var(--electric-400, #347dff);
  --electric: #1751ff;
  color: var(--bc-header-light);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}


.bc-mega-header *, .bc-mega-header *::before, .bc-mega-header *::after { box-sizing: border-box; }
.bc-mega-header__bar { background: transparent; transition: background .25s ease, color .25s ease; }
.bc-mega-header.is-scrolled .bc-mega-header__bar,
.bc-mega-header.is-open .bc-mega-header__bar { background: var(--bc-header-light); color: var(--bc-header-ink); }
.bc-mega-header__inner { align-items: center; display: flex; height: var(--bc-header-h); justify-content: space-between; margin: auto; max-width: var(--bc-header-container); padding-inline: 0rem; }
.bc-mega-header__logo { display: block; flex: 0 0 auto; width: 150px; }
.bc-mega-header__logo-image { display: block; height: auto; width: 100%; }
.bc-mega-header__logo-image--dark { display: none; }
.bc-mega-header.is-scrolled .bc-mega-header__logo-image--light,
.bc-mega-header.is-open .bc-mega-header__logo-image--light { display: none; }
.bc-mega-header.is-scrolled .bc-mega-header__logo-image--dark,
.bc-mega-header.is-open .bc-mega-header__logo-image--dark { display: block; }

.bc-mega-header__top-list { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.bc-mega-header__top-list button { background: none; border: 0; color: inherit; cursor: pointer; font-size: .778rem; font-style: normal; font-weight: 400; line-height: 1.2; padding: 1rem 0; text-align: center; }
.bc-mega-header__top-list button:hover,
.bc-mega-header__top-list button:focus-visible,
.bc-mega-header__top-list button.is-active { color: inherit; font-weight: 400; }
.bc-mega-header__actions { align-items: center; display: flex; gap: 1rem; }
.bc-mega-header__icon { color: inherit; display: grid; height: 28px; place-items: center; width: 28px; }
.bc-mega-header__icon svg { fill: none; height: 22px; stroke: currentColor; stroke-width: 1.8; width: 22px; }
.bc-mega-header .bc-mega-header__demo.btn-primary,
.bc-mega-header .bc-mega-header__demo.btn-primary:visited { align-items: center; background: var(--electric, #1751ff); border: 1px solid var(--electric, #1751ff); border-radius: 100px; color: var(--white, #fff); display: inline-flex; font-size: .667rem; justify-content: center; padding: .65rem 1.1rem; text-decoration: none; }
.bc-mega-header .bc-mega-header__demo.btn-primary:hover { background: var(--glacier, #06c8fc); border-color: var(--glacier, #06c8fc); color: var(--electric-800, #1751ff); opacity: 1; text-decoration: none; }

.bc-mega-header__panels { left: 0; position: absolute; right: 0; top: 100%; }
.bc-mega-header__panel { background: var(--bc-header-panel-bg); color: var(--bc-header-light); display: none; }
.bc-mega-header__panel.is-active { display: block; }
.bc-mega-header__panel-inner { gap: var(--bc-header-panel-gap); margin: auto; max-width: var(--bc-header-container); min-height: var(--bc-header-panel-min-height); padding: var(--bc-header-panel-padding-y) var(--bc-header-panel-padding-x); }
.bc-mega-header__panel-inner--resource { display: grid; grid-template-columns: minmax(0, 1fr) var(--bc-header-resource-width); }
.bc-mega-header__panel-inner--simple { display: block; }
.bc-mega-header__panel-inner--simple .bc-mega-header__links { max-width: 1000px; }
.bc-mega-header__panel-inner--drill { display: grid; grid-template-columns: var(--bc-header-side-width) minmax(0, 1fr); }

.bc-mega-header__side { align-content: start; border-right: 1px solid rgba(255,255,255,.28); display: grid; gap: .3rem; padding-right: 2rem; }
.bc-mega-header__side-link { align-items: center; background: none; border: 0; color: var(--bc-header-light); cursor: pointer; display: flex; font-family: inherit; font-size: .778rem; font-style: normal; font-weight: 500; justify-content: flex-start; line-height: normal; min-height: 2rem; padding: .35rem 0; text-align: left; text-decoration: none; width: 100%; }
.bc-mega-header__side-link::before { content: none; display: none; }
.bc-mega-header__side-link[data-submenu-trigger]::after { align-self: center; border-right: .12em solid currentColor; border-top: .12em solid currentColor; color: var(--white, #fff); content: ""; flex: 0 0 auto; height: .48em; margin-left: .55rem; opacity: 1; transform: rotate(45deg); transition: color .2s ease, transform .2s ease; width: .48em; }
.bc-mega-header__side-link--direct::after { content: none; display: none; }
.bc-mega-header__side-link:hover,
.bc-mega-header__side-link:focus-visible,
.bc-mega-header__side-link.is-active { color: var(--bc-header-electric); font-weight: 500; line-height: normal; outline: none; }
.bc-mega-header__side-link[data-submenu-trigger]:hover::after,
.bc-mega-header__side-link[data-submenu-trigger]:focus-visible::after,
.bc-mega-header__side-link[data-submenu-trigger].is-active::after { color: var(--electric, #1751ff); opacity: 1; transform: translateX(.12rem) rotate(45deg); }

.bc-mega-header__submenus { min-width: 0; }
.bc-mega-header__links { align-content: start; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-mega-header__submenu:not(.is-active),
.bc-mega-header__submenu[hidden] { display: none !important; }
.bc-mega-header__submenu.is-active { display: grid; }
.bc-mega-header__links a { color: var(--bc-header-light); display: flex; flex-direction: column; gap: .35rem; padding: 0; text-decoration: none; }
.bc-mega-header__links strong { align-items: center; color: var(--bc-header-electric); display: inline-flex; font-size: .778rem; font-style: normal; font-weight: 700; gap: .42rem; line-height: normal; width: fit-content; }
.bc-mega-header__links strong::after { border-right: .12em solid currentColor; border-top: .12em solid currentColor; color: var(--electric, #1751ff); content: ""; flex: 0 0 auto; height: .46em; opacity: 0; transform: translateX(-.15rem) rotate(45deg); transition: opacity .2s ease, transform .2s ease; width: .46em; }
.bc-mega-header__links span { color: var(--bc-header-light); font-size: .778rem; font-style: normal; font-weight: 400; line-height: normal; }
.bc-mega-header__links a:hover strong::after,
.bc-mega-header__links a:focus-visible strong::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.bc-mega-header__links a:focus-visible { outline: 1px solid var(--bc-header-electric); outline-offset: .3rem; }

.bc-mega-header__resource { border-left: 1px solid rgba(255,255,255,.28); padding-left: 2.75rem; }
.bc-mega-header__resource img { display: block; object-fit: cover; width: 100%; }
.bc-mega-header__resource h3 { color: var(--bc-header-electric); font-size: .778rem; font-weight: 700; margin: 1rem 0 .5rem; }
.bc-mega-header__resource p { color: var(--bc-header-light); font-size: .778rem; font-weight: 400; line-height: normal; }
.bc-mega-header__resource-btn { align-items: center; background: transparent; border: 1px solid var(--electric, #1751ff); border-radius: 100px; color: var(--white, #fff); cursor: pointer; display: inline-flex; font-size: .667rem; font-weight: 500; justify-content: center; letter-spacing: .06em; line-height: 1; margin: 12px; padding: 14px 40px; text-decoration: none; text-transform: uppercase; transition: border-color 200ms ease, color 200ms ease; white-space: nowrap; }

.bc-mega-header__toggle, .bc-mega-header__mobile { display: none; }

@media (max-width: 950px) {

  #cobalt-difference .difference-splines { position: absolute; right: auto; bottom: -155px;padding-bottom: 10px;left: calc((105vw - 85%) / -2);z-index: 30 !important;width: calc(100vw - clamp(10px, calc(54.6875vw - 800px), 800px));height: clamp(250px, 28vw, 460px);overflow: hidden;transform: translate3d(0, var(--difference-spline-shift-y, -60px), 0);pointer-events: none;}
  #cobalt-difference .difference-splines svg {display: block;overflow: visible;width: 99%;height: 60%;}
  #cobalt-difference .punch-grid-item-inner.column-inner { min-height: 260px;}
  #cobalt-difference .punch-item-grid-wrapper.punch-grid-wrapper { margin-top: 200px;}
  .hero-bg-container {width: min(calc(100% - 40px)); }
  .bc-mega-header { --bc-header-h: 76px;padding:0 !important; }
  .bc-mega-header__inner { padding-inline: 20px; }
  .bc-mega-header__desktop, .bc-mega-header__actions, .bc-mega-header__panels { display: none; }
  .bc-mega-header__toggle { background: none; border: 0; color: inherit; display: grid; gap: 5px; padding: 8px; }
  .bc-mega-header__toggle span { background: currentColor; display: block; height: 2px; transition: transform .2s ease, opacity .2s ease; width: 25px; }
  .bc-mega-header.is-mobile-open .bc-mega-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bc-mega-header.is-mobile-open .bc-mega-header__toggle span:nth-child(2) { opacity: 0; }
  .bc-mega-header.is-mobile-open .bc-mega-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .bc-mega-header__mobile { background: var(--bc-header-bg); color: var(--bc-header-light); display: none; left: 0; max-height: calc(100vh - var(--bc-header-h)); overflow: auto; padding: 1rem 1.5rem 2rem; position: absolute; right: 0; top: 100%; width: 100%; }
  .bc-mega-header__mobile.is-active,
  .bc-mega-header.is-mobile-open .bc-mega-header__mobile { display: block !important; }
  .bc-mega-header__mobile-section { border-bottom: 1px solid rgba(255,255,255,.2); }
  .bc-mega-header__mobile-trigger,
  .bc-mega-header__mobile-subtrigger { align-items: center; background: none; border: 0; color: var(--bc-header-light); display: flex; font: inherit; justify-content: space-between; padding: 1.15rem 0; text-align: left; width: 100%; }
  .bc-mega-header__mobile-trigger { font-weight: 600; }
  .bc-mega-header__mobile-trigger::before,
  .bc-mega-header__mobile-subtrigger::before { content: none !important; display: none !important; }
  .bc-mega-header__mobile-trigger::after,
  .bc-mega-header__mobile-subtrigger::after { border: 0; border-right: 2px solid currentColor; border-top: 2px solid currentColor; color: var(--bc-header-light); content: "" !important; display: block; flex: 0 0 auto; font-size: 0; height: .65rem; margin-left: auto; position: static; transform: rotate(45deg); transition: color .2s ease, transform .2s ease; width: .65rem; }
  .bc-mega-header__mobile-section.is-active > .bc-mega-header__mobile-trigger::after,
  .bc-mega-header__mobile-group.is-active > .bc-mega-header__mobile-subtrigger::after { color: var(--bc-header-electric); content: "" !important; transform: rotate(135deg); }
  .bc-mega-header__mobile-content,
  .bc-mega-header__mobile-subcontent { display: none; padding: 0 0 1.15rem; }
  .bc-mega-header__mobile-section.is-active > .bc-mega-header__mobile-content,
  .bc-mega-header__mobile-group.is-active > .bc-mega-header__mobile-subcontent { display: grid; gap: .85rem; }
  .bc-mega-header__mobile-group { border-top: 1px solid rgba(255,255,255,.12); }
  .bc-mega-header__mobile-subtrigger { color: var(--bc-header-electric); font-size: .85rem; font-weight: 700; }
  .bc-mega-header__mobile-content a,
  .bc-mega-header__mobile-subcontent a { color: var(--bc-header-light); display: block; font-size: .85rem; padding: .2rem 0; text-decoration: none; }
  .bc-mega-header__mobile-content strong,
  .bc-mega-header__mobile-subcontent strong { color: var(--bc-header-electric); display: block; }
  .bc-mega-header__mobile-content small,
  .bc-mega-header__mobile-subcontent small { color: rgba(255,255,255,.78); display: block; font-size: .75rem; margin-top: .2rem; }
  .bc-mega-header__mobile-direct { border-top: 1px solid rgba(255,255,255,.12); font-weight: 600; padding: 1rem 0 !important; }
  .bc-mega-header__mobile-resource { border-top: 1px solid rgba(255,255,255,.18); margin-top: .5rem; padding-top: 1rem; }
  .bc-mega-header__mobile-resource img { display: none; }
  .bc-mega-header__mobile-content a { color: var(--electric-400)!important; font-weight: 500;}
  .hero-content { max-width: 800px; width: auto; }
  .hero-splines { display: none; }
}




/* =========================================================
   BLUECORE — PROGRESSIVE MULTI-SPLINE
   ========================================================= */

.bc-multi-spline {
  /*
   * Positioning controls
   */
  --bc-multi-spline-x: 0px;
  --bc-multi-spline-y: 0px;
  --bc-multi-spline-scale: 1;
  --bc-multi-spline-height: 405px;

  height: var(--bc-multi-spline-height);
  overflow: hidden;
  pointer-events: none;
  position: relative;
  width: 100%;
}

.bc-multi-spline__stage {
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  width: 100%;
}

.bc-multi-spline__stage svg {
  display: block;
  height: 100%;
  max-width: none;
  overflow: visible;
  transform:
    translate3d(
      var(--bc-multi-spline-x),
      var(--bc-multi-spline-y),
      0
    )
    scale(var(--bc-multi-spline-scale));
  transform-origin: left center;
  width: 100%;
}

/* Shared line styling */
.bc-multi-spline .sp-ln {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.bc-multi-spline .sp-l1,
.bc-multi-spline .sp-l4 {
  stroke: var(--glacier, #06c8fc);
}

.bc-multi-spline .sp-l2,
.bc-multi-spline .sp-l3,
.bc-multi-spline .sp-l5 {
  stroke: var(--electric, #1751ff);
}

/*
 * The originals are hidden and retained only so JavaScript
 * can measure their geometry.
 */
.bc-multi-spline
.sp-ln:not(.bc-spline-drawn-path) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * Do not set opacity here. JavaScript controls the opacity
 * attribute of the generated paths.
 */
.bc-multi-spline .bc-spline-drawn-path {
  visibility: visible !important;
}

/*
 * Do not set opacity in CSS. The circle opacity attributes
 * begin at zero and JavaScript updates them.
 */
.bc-multi-spline circle {
  visibility: visible;
}

@media (max-width: 950px) {
  .bc-multi-spline {
    --bc-multi-spline-height: 300px;
  }
  
  #careers-hero {
height:auto;
}
  #careers-hero::after {
    background-image:none;
    top:unset;
}

}

@media (prefers-reduced-motion: reduce) {
  .bc-multi-spline__stage svg {
    transform:
      translate3d(
        var(--bc-multi-spline-x),
        var(--bc-multi-spline-y),
        0
      )
      scale(var(--bc-multi-spline-scale));
  }
}

/* =========================================================
   BLUECORE — GLOBAL TOP SPLINE
   ========================================================= */

.global-top-spline {
  --global-top-spline-x: -20px;
  --global-top-spline-y: 100px;
  --global-top-spline-scale: 1;
  --global-top-spline-height: 204px;

  height: var(--global-top-spline-height);
  left: 50%;
  margin-left: -50vw;
  max-width: none !important;
overflow: visible;
  pointer-events: none;
  position: relative;
  width: 100vw !important;
}

.global-top-spline__stage {
  height: 100%;
  inset: 0;
  overflow: visible;
  position: absolute;
  width: 100%;
}

.global-top-spline__stage svg {
  display: block;
  height: 100%;
  max-width: none;
  overflow: visible;
  transform:
    translate3d(
      var(--global-top-spline-x),
      var(--global-top-spline-y),
      0
    )
    scale(var(--global-top-spline-scale));
  transform-origin: left center;
  width: 100%;
}

/* Shared line styling */
.global-top-spline .sp-ln {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  vector-effect: non-scaling-stroke;
}

/* Glacier lines */
.global-top-spline .sp-l1,
.global-top-spline .sp-l3 {
  stroke: var(--glacier, #06c8fc);
  stroke-width: 1;
}

/* Electric lines */
.global-top-spline .sp-l2,
.global-top-spline .sp-l4 {
  stroke: var(--electric, #1751ff);
  stroke-width: 1.00308;
}

/* Hide the original paths used for geometry calculations. */
.global-top-spline
.sp-ln:not(.bc-spline-drawn-path) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * The generated paths must remain visible.
 * JavaScript controls their opacity.
 */
.global-top-spline .bc-spline-drawn-path {
  visibility: visible !important;
}

/*
 * Do not set opacity: 0 here.
 * JavaScript controls the circle opacity.
 */
.global-top-spline circle {
  visibility: visible;
}

/* Prevent HubSpot wrappers from clipping the full-width spline. */
.container-fluid:has(.global-top-spline),
.row-fluid-wrapper:has(.global-top-spline),
.row-fluid:has(.global-top-spline),
.widget-span:has(.global-top-spline),
.dnd-column:has(.global-top-spline),
.dnd-row:has(.global-top-spline),
.dnd-module:has(.global-top-spline),
.hs_cos_wrapper:has(.global-top-spline) {
  max-width: none !important;
  overflow: visible !important;
}

@media (max-width: 950px) {
  .global-top-spline {
    --global-top-spline-height: 160px;
  }
}


/* Reset the unsuccessful mask treatment. */
.bc-tabs__card-icon {
  background: none !important;
  height: 40px;
  mask: none !important;
  overflow: visible;
  width: 40px;
  -webkit-mask: none !important;
}

.bc-tabs__card-icon img
  display: block;
  height: 100%;
  opacity: 1;
  object-fit: contain;
  width: 25px;
  max-width:100%;
  filter:
    brightness(0)
    saturate(100%)
    invert(46%)
    sepia(98%)
    saturate(3608%)
    hue-rotate(211deg)
    brightness(104%)
    contrast(101%);
}

.use-case-boxes img.punch-grid-item-media
 {
    filter: brightness(0) saturate(100%) invert(46%) sepia(98%) saturate(3608%) hue-rotate(211deg) brightness(104%) contrast(101%)!important;
}