.elementor-8 .elementor-element.elementor-element-2826c34{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-7cb2b6c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-530c71f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-bd115cb{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-30d2bc0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-0734315{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-5201001{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d0014f7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d96e32c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-1475165{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-fe8cd22{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-2826c34 */:root {
        --navy: #0f2740;
        --navy-1: #16324f;
        --navy-2: #1e3e60;
        --navy-3: #24425f;
        --steel: #5a6b7d;
        --ink: #151b22;
        --slate: #4c5661;
        --mist: #c4d0dd;
        --line: #e3e7ec;
        --line-2: #d3dae1;
        --paper: #f5f7f9;
        --paper-2: #edf1f5;
        --white: #ffffff;
        --red: #d81e34;
        --red-deep: #b5152a;
        --gold: #b78a2e;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Inter", sans-serif;
        color: var(--ink);
        background: var(--white);
        line-height: 1.6;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Archivo", sans-serif;
        line-height: 1.06;
        letter-spacing: -0.014em;
      }
      .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .eyebrow {
        font-family: "IBM Plex Mono", monospace;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--red);
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      section {
        padding: 88px 0;
      }
      .btn {
        display: inline-block;
        font-family: "Archivo", sans-serif;
        font-weight: 700;
        font-size: 14px;
        padding: 14px 28px;
        border-radius: 5px;
        transition: all 0.2s !important;
        letter-spacing: 0.01em;
        cursor: pointer;
        border: none;
      }
      .btn-red {
        background: var(--red);
        color: var(--white) !important;
      }
      .btn-red:hover {
        background: var(--red-deep);
      }
      .btn-outline {
        border: 1.5px solid var(--line-2) !important;
        color: var(--ink) !important;
      }
      .btn-outline:hover {
        border-color: var(--navy) !important;
      }
      .btn-ghost-light {
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        color: var(--white) !important;
      }
      .btn-ghost-light:hover {
        border-color: var(--white) !important;
      }

      /* HERO */
      .hero {
        background: var(--paper);
        color: var(--ink);
        padding: 76px 0 0;
        border-bottom: 1px solid var(--line);
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.02fr 0.98fr;
        gap: 52px;
        align-items: center;
        padding-bottom: 56px;
      }
      .hero .eyebrow {
        margin-bottom: 18px;
        display: block;
      }
      .hero h1 {
        font-size: clamp(40px, 4.7vw, 60px);
        font-weight: 800;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--red);
      }
      .hero p.lead {
        font-size: 17.5px;
        color: var(--slate);
        max-width: 560px;
        margin: 24px 0 32px;
      }
      .hero p.lead b {
        color: var(--ink);
        font-weight: 600;
      }
      .hero-ctas {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: center;
      }

      /* HERO PRODUCT DEMO (interactive) */
      .ui {
        background: var(--navy);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(15, 39, 64, 0.24);
        font-size: 12px;
        color: var(--mist);
      }
      .ui-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--navy-2);
      }
      .ui-bar .doc {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.06em;
      }
      .ui-tabs {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .ui-tab {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        padding: 4px 10px;
        border-radius: 4px;
        color: var(--mist);
        border: 1px solid var(--navy-3);
        cursor: pointer;
        transition: all 0.2s;
        background: none;
      }
      .ui-tab.on {
        background: var(--red);
        color: #fff;
        border-color: var(--red);
      }
      .ui-replay {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: var(--mist);
        border: none;
        background: none;
        cursor: pointer;
        padding: 4px 6px;
      }
      .ui-replay:hover {
        color: #fff;
      }
      .ui-panels {
        position: relative;
        min-height: 252px;
      }
      .ui-panel {
        display: none;
      }
      .ui-panel.show {
        display: block;
      }
      .ui-doc {
        padding: 16px 18px;
        font-size: 12px;
        line-height: 1.75;
        color: #b9c6d4;
      }
      .ui-doc .shall {
        transition:
          background 0.35s,
          color 0.35s;
        border-radius: 3px;
        padding: 1px 3px;
      }
      .ui-doc .shall.hl {
        background: rgba(216, 30, 52, 0.24);
        color: #fff;
      }
      .ui-doc .clause {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: var(--mist);
        display: block;
        margin: 10px 0 2px;
        letter-spacing: 0.08em;
      }
      .ui-row {
        display: grid;
        grid-template-columns: 64px 1fr 78px;
        gap: 12px;
        padding: 11px 16px;
        border-bottom: 1px solid var(--navy-2);
        align-items: center;
        opacity: 1;
        transition:
          opacity 0.4s ease,
          transform 0.4s ease;
      }
      .ui-row.hidden-row {
        opacity: 0;
        transform: translateY(8px);
      }
      .ui-row .rid {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10.5px;
        color: var(--mist);
      }
      .ui-row .stmt {
        color: #d6dee7;
        line-height: 1.4;
        font-size: 12px;
      }
      .ui-row .stmt b {
        color: #fff;
      }
      .chip {
        font-family: "IBM Plex Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.08em;
        padding: 4px 0;
        border-radius: 4px;
        text-align: center;
        font-weight: 600;
      }
      .chip.traced {
        background: rgba(216, 30, 52, 0.18);
        color: #f08599;
      }
      .chip.verified {
        background: rgba(30, 62, 96, 0.9);
        color: #9fc0de;
      }
      .chip.review {
        background: var(--navy-2);
        color: var(--mist);
      }
      .ui-foot {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.06em;
        border-top: 1px solid var(--navy-2);
      }
      .ui-foot b {
        color: #f08599;
      }

      /* TRUST BAR — directly under hero */
      .trustbar {
        background: var(--paper-2);
        border-top: 1px solid var(--line);
      }
      .trustbar-in {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 32px;
        align-items: center;
        justify-content: center;
        padding: 20px 32px;
        max-width: 1180px;
        margin: 0 auto;
      }
      .tb {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12.5px;
        color: var(--navy-1);
        font-weight: 600;
      }
      .tb svg {
        width: 16px;
        height: 16px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
      }

      .sec-head {
        max-width: 760px;
        margin-bottom: 48px;
      }
      .sec-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .sec-head .eyebrow {
        margin-bottom: 15px;
        display: block;
      }
      .sec-head h2 {
        font-size: clamp(28px, 3.3vw, 42px);
        font-weight: 800;
      }
      .sec-head p {
        color: var(--slate);
        font-size: 16.5px;
        margin-top: 15px;
      }

      /* USE CASES */
      .uc-bg {
        background: var(--white);
        border-bottom: 1px solid var(--line);
      }
      .uc-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .uc {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 26px 24px;
        background: var(--white);
        display: flex;
        flex-direction: column;
        transition:
          border-color 0.2s,
          transform 0.2s,
          box-shadow 0.2s;
      }
      .uc:hover {
        border-color: var(--red);
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(15, 39, 64, 0.1);
      }
      .uc .pillar {
        font-family: "IBM Plex Mono", monospace;
        font-size: 9.5px;
        letter-spacing: 0.18em;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 100px;
        align-self: flex-start;
      }
      .uc.ubid .pillar {
        color: var(--red);
        background: rgba(216, 30, 52, 0.08);
      }
      .uc.ubuild .pillar {
        color: var(--gold);
        background: rgba(183, 138, 46, 0.1);
      }
      .uc.ucomp .pillar {
        color: var(--navy);
        background: var(--paper-2);
      }
      .uc h3 {
        font-size: 19px;
        font-weight: 800;
        margin: 14px 0 8px;
        line-height: 1.2;
      }
      .uc p {
        font-size: 13.5px;
        color: var(--slate);
        flex: 1;
        margin: 0 0 16px;
      }
      .uc .who {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        color: var(--steel);
        border-top: 1px solid var(--line);
        padding-top: 12px;
      }
      .uc .who b {
        color: var(--ink);
        font-weight: 600;
      }
      @media (max-width: 960px) {
        .uc-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 600px) {
        .uc-grid {
          grid-template-columns: 1fr;
        }
      }

      /* SECURITY & SOVEREIGNTY — elevated near top */
      .sov-bg {
        background: var(--navy);
        color: var(--white);
      }
      .sov-bg .sec-head h2 {
        color: #fff;
      }
      .sov-bg .sec-head p {
        color: var(--mist);
      }
      .sov-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .sov {
        background: var(--navy-1);
        border: 1px solid var(--navy-3);
        border-radius: 10px;
        padding: 24px 22px;
      }
      .sov .mono {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: #f08599;
        letter-spacing: 0.18em;
        font-weight: 600;
      }
      .sov b {
        font-size: 15.5px;
        font-weight: 700;
        display: block;
        margin: 10px 0 5px;
        color: #fff;
      }
      .sov p {
        font-size: 12.5px;
        color: var(--mist);
        line-height: 1.55;
      }
      /* data-residency diagram */
      .resid {
        margin-top: 28px;
        background: var(--navy-1);
        border: 1px solid var(--navy-3);
        border-radius: 12px;
        padding: 28px 30px;
      }
      .resid .rd-title {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10.5px;
        letter-spacing: 0.16em;
        color: var(--mist);
        margin-bottom: 20px;
      }
      .resid-flow {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 14px;
        align-items: center;
      }
      .rnode {
        border: 1px solid var(--navy-3);
        border-radius: 10px;
        padding: 16px 18px;
        text-align: center;
        background: var(--navy);
      }
      .rnode b {

        font-size: 13.5px;
        color: #fff;
        display: block;
        margin-bottom: 3px;
      }
      .rnode span {
        font-size: 11px;
        color: var(--mist);
      }
      .rnode.ca {
        border-color: var(--red);
      }
      .rarrow {
        color: var(--red);
        font-size: 18px;
        font-weight: 700;
        text-align: center;
      }
      .resid .rd-note {
        margin-top: 16px;
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        color: var(--gold);
        text-align: center;
      }

      /* LIFECYCLE — animated */
      .life-bg {
        background: var(--white);
        border-bottom: 1px solid var(--line);
      }
      .life {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
      }
      .life-diagram {
        position: relative;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
      }
      .life-diagram svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .ring-dash {
        animation: spin 80s linear infinite;
        transform-origin: 230px 230px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .arc {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
        transition: stroke-dashoffset 3.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .arc.red {
        stroke: var(--red);
        stroke-dasharray: 356;
        stroke-dashoffset: 356;
      }
      .arc.gold {
        stroke: var(--gold);
        stroke-dasharray: 712;
        stroke-dashoffset: 712;
      }
      .life.played .arc.red {
        stroke-dashoffset: 0;
      }
      .lnode {
        fill: #fff;
        stroke: var(--line-2);
        stroke-width: 3;
        transition:
          stroke 0.3s,
          r 0.3s;
        cursor: pointer;
      }
      .lnode.on-red {
        stroke: var(--red);
      }
      .lnode.on-gold {
        stroke: var(--gold);
      }
      .lnode.active {
        stroke-width: 5;
      }
      .lnum {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        font-weight: 600;
        fill: var(--steel);
        pointer-events: none;
        transition: fill 0.3s;
      }
      .lnum.on {
        fill: var(--ink);
      }
      /* stage panel */
      .life-stages {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .lst {
        border: 1px solid var(--line);
        border-left: 3px solid var(--line-2);
        border-radius: 9px;
        padding: 13px 18px;
        cursor: pointer;
        transition: all 0.25s;
        opacity: 0.55;
      }
      .lst .ph {
        font-family: "IBM Plex Mono", monospace;
        font-size: 9.5px;
        letter-spacing: 0.16em;
        font-weight: 600;
        color: var(--steel);
      }
      .lst h3 {
        font-size: 14.5px;
        font-weight: 700;
        margin: 3px 0 2px;
      }
      .lst p {
        font-size: 12px;
        color: var(--slate);
        line-height: 1.5;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s;
      }
      .lst.lit {
        opacity: 1;
      }
      .lst.lit.bid {
        border-left-color: var(--red);
      }
      .lst.lit.build {
        border-left-color: var(--gold);
      }
      .lst.lit.bid .ph {
        color: var(--red);
      }
      .lst.lit.build .ph {
        color: var(--gold);
      }
      .lst.active {
        opacity: 1;
        background: var(--paper);
      }
      .lst.active p {
        max-height: 60px;
      }
      @media (prefers-reduced-motion: reduce) {
        .ring-dash {
          animation: none;
        }
        .arc {
          transition: none;
        }
      }
      @media (max-width: 960px) {
        .life {
          grid-template-columns: 1fr;
          gap: 32px;
        }
      }

      .insight-bg {
        background: var(--white);
      }
      .cmp {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
      }
      .cmp-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .cmp-head div {
        padding: 14px 22px;
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.16em;
        font-weight: 600;
      }
      .cmp-head .t {
        background: var(--paper-2);
        color: var(--steel);
      }
      .cmp-head .w {
        background: var(--navy);
        color: #fff;
      }
      .cmp-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid var(--line);
      }
      .cmp-row div {
        padding: 16px 22px;
        font-size: 14px;
      }
      .cmp-row .t {
        color: var(--slate);
        background: var(--paper);
      }
      .cmp-row .w {
        color: var(--ink);
      }
      .cmp-row .w b {
        color: var(--red);
      }

      /* PIPELINE */
      .pipe-bg {
        background: var(--paper);
      }
      .pipe {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
      }
      .pstep {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 22px 18px;
        background: var(--white);
        display: flex;
        flex-direction: column;
      }
      .pstep .n {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: var(--red);
        letter-spacing: 0.16em;
        font-weight: 600;
      }
      .pstep h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 10px 0 6px;
        line-height: 1.25;
      }
      .pstep p {
        font-size: 12px;
        color: var(--slate);
        line-height: 1.5;
        flex: 1;
      }
      .pstep .tag {
        margin-top: 14px;
        font-family: "IBM Plex Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.1em;
        font-weight: 600;
        color: var(--navy-1);
        background: var(--paper-2);
        padding: 4px 8px;
        border-radius: 4px;
        align-self: flex-start;
      }
      .pipe-note {
        margin-top: 24px;
        font-size: 14px;
        color: var(--slate);
        max-width: 860px;
      }
      .pipe-note b {
        color: var(--ink);
      }

      /* TWO FIGHTS */
      .tracks-bg {
        background: var(--white);
      }
      .tracks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .track {
        border-radius: 14px;
        padding: 36px 34px;
      }
      .track.bid {
        background: var(--paper);
        border: 1px solid var(--line);
        border-top: 3px solid var(--red);
      }
      .track.build {
        background: var(--navy);
        color: var(--white);
        border-top: 3px solid var(--gold);
      }
      .track .label {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .track.bid .label {
        color: var(--red);
      }
      .track.build .label {
        color: var(--gold);
      }
      .track h3 {
        font-size: 23px;
        font-weight: 800;
        margin-bottom: 8px;
      }
      .track > p {
        font-size: 14.5px;
        margin-bottom: 22px;
      }
      .track.bid > p {
        color: var(--slate);
      }
      .track.build > p {
        color: var(--mist);
      }
      .track ul {
        list-style: none;
      }
      .track li {
        padding: 11px 0;
        font-size: 13.5px;
        display: flex;
        gap: 11px;
        align-items: baseline;
        border-top: 1px solid;
      }
      .track.bid li {
        border-color: var(--line);
        color: var(--slate);
      }
      .track.build li {
        border-color: var(--navy-3);
        color: var(--mist);
      }
      .track li b {
        font-weight: 600;
      }
      .track.bid li b {
        color: var(--ink);
      }
      .track.build li b {
        color: #fff;
      }
      .track li .mk {
        color: var(--red);
        font-weight: 800;
        flex-shrink: 0;
      }
      .track .outcome {
        margin-top: 22px;
        padding: 14px 18px;
        border-radius: 8px;
        font-size: 13.5px;
      }
      .track.bid .outcome {
        background: var(--white);
        border: 1px solid var(--line);
        color: var(--ink);
      }
      .track.build .outcome {
        background: var(--navy-1);
        color: #fff;
      }
      .bridge {
        margin-top: 26px;
        text-align: center;
        font-family: "IBM Plex Mono", monospace;
        font-size: 12.5px;
        color: var(--slate);
        letter-spacing: 0.06em;
      }
      .bridge b {
        color: var(--red);
      }

      /* DOMAINS */
      .dom-bg {
        background: var(--paper);
      }
      .dom-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .dom {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        transition:
          border-color 0.2s,
          transform 0.2s,
          box-shadow 0.2s;
        background: var(--white);
        display: block;
      }
      .dom:hover {
        border-color: var(--red);
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(15, 39, 64, 0.1);
      }
      .dom .photo {
        height: 140px;
        background: linear-gradient(135deg, var(--navy-1), var(--navy-2));
        position: relative;
        overflow: hidden;
      }
      .img-ph {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.5);
        font-family: "IBM Plex Mono", monospace;
        font-size: 9.5px;
        letter-spacing: 0.12em;
        text-align: center;
        padding: 12px;
      }
      .img-ph svg {
        width: 26px;
        height: 26px;
        stroke: rgba(255, 255, 255, 0.4);
        fill: none;
        stroke-width: 1.5;
      }
      .img-ph .dim {
        color: var(--gold);
      }
      .dom .body {
        padding: 18px 20px;
      }
      .dom .code {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: var(--red);
        letter-spacing: 0.18em;
        font-weight: 600;
      }
      .dom h3 {
        font-size: 18px;
        font-weight: 700;
        margin: 8px 0 6px;
      }
      .dom p {
        font-size: 12.5px;
        color: var(--slate);
        margin-bottom: 12px;
      }
      .dom .go {
        font-weight: 700;
        font-size: 13px;
        color: var(--red);
        display: inline-flex;
        gap: 6px;
        transition: gap 0.2s;
      }
      .dom:hover .go {
        gap: 11px;
      }

      /* WHY NOW */
      .why-bg {
        background: var(--white);
      }
      .why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .why {
        border: 1px solid var(--line);
        border-left: 3px solid var(--red);
        border-radius: 10px;
        padding: 26px 24px;
        background: var(--paper);
      }
      .why .n {
        font-weight: 800;
        font-size: 22px;
        color: var(--red);
      }
      .why h3 {
        font-size: 17px;
        font-weight: 700;
        margin: 10px 0 6px;
        line-height: 1.3;
      }
      .why p {
        font-size: 13.5px;
        color: var(--slate);
      }

      /* RESOURCES */
      .res-bg {
        background: var(--paper-2);
      }
      .res-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .res {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 26px 24px;
        display: flex;
        flex-direction: column;
      }
      .res .mono {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        color: var(--red);
        letter-spacing: 0.2em;
        font-weight: 600;
      }
      .res h3 {
        font-size: 16.5px;
        font-weight: 700;
        margin: 12px 0 8px;
        line-height: 1.3;
      }
      .res p {
        font-size: 13px;
        color: var(--slate);
        flex: 1;
      }
      .res a {
        margin-top: 16px;
        font-weight: 700;
        font-size: 13px;
        color: var(--red);
      }

      /* FINAL CTA */
      .final {
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
        color: var(--white);
        padding: 84px 0;
        border-top: 3px solid var(--red);
      }
      .final h2 {
        font-size: clamp(28px, 3.6vw, 46px);
        font-weight: 800;
        max-width: 800px;
      }
      .final p {
        font-size: 17px;
        margin: 18px 0 34px;
        color: var(--mist);
        max-width: 620px;
      }
      .ctas {
        display: flex;
        gap: 13px;
        flex-wrap: wrap;
      }
      .final .btn-white {
        background: #fff;
        color: var(--navy);
      }
      .final .btn-white:hover {
        background: #eef2f5;
      }



      @media (max-width: 960px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 38px;
        }
        .sov-grid,
        .why-grid,
        .res-grid {
          grid-template-columns: 1fr 1fr;
        }
        .pipe {
          grid-template-columns: repeat(3, 1fr);
        }
        .tracks {
          grid-template-columns: 1fr;
        }
        .dom-grid {
          grid-template-columns: 1fr 1fr;
        }
        .cmp-head,
        .cmp-row {
          grid-template-columns: 1fr;
        }
        .cmp-head .t {
          display: none;
        }
        .resid-flow {
          grid-template-columns: 1fr;
        }
        .rarrow {
          transform: rotate(90deg);
        }
        .foot-grid {
          grid-template-columns: 1fr 1fr;
        }
        .nav-links a:not(.nav-cta) {
          display: none;
        }
      }
      @media (max-width: 560px) {
        .sov-grid,
        .why-grid,
        .res-grid,
        .dom-grid,
        .pipe {
          grid-template-columns: 1fr;
        }
        .foot-grid {
          grid-template-columns: 1fr;
        }
      }/* End custom CSS */