/* ─── DESIGN TOKENS ─────────────────────────────────────── */
    :root {
      --color-accent: #8ED21F;
      --color-accent-hover: #76B817;
      --color-primary-dark: #061E36;
      --color-text-on-dark: #FFFFFF;
      --green-electric: #8ED21F;
      --green-main: #8ED21F;
      --cp: #061E36;
      --cpd: #061E36;
      --acc: #8ED21F;
      --mint: #f0fae0;
      --mntl: #F6F9FC;
      --bg: #F6F9FC;
      --card: #ffffff;
      --text: #061E36;
      --muted: #3a5068;
      --bdr: #DCE7EF;
      --g-deep: #061E36;
      --g-dark: #061E36;
      --shad: 0 10px 30px rgba(6, 30, 54, 0.09);
      --r: 22px;
    }

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

    body {
      font-family: 'Inter', Arial, sans-serif;
      background: #F6F9FC;
      color: var(--text);
      overflow-x: hidden
    }

    a {
      text-decoration: none;
      color: inherit
    }

    img {
      display: block;
      max-width: 100%
    }

    /* ─── SCROLL REVEAL ─────────────────────────── */
    .rv {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1)
    }

    .rvl {
      opacity: 0;
      transform: translateX(-44px);
      transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1)
    }

    .rvr {
      opacity: 0;
      transform: translateX(44px);
      transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1)
    }

    .rv.on,
    .rvl.on,
    .rvr.on {
      opacity: 1;
      transform: none
    }

    .sg>* {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s ease, transform .55s ease
    }

    .sg.on>*:nth-child(1) {
      opacity: 1;
      transform: none;
      transition-delay: .04s
    }

    .sg.on>*:nth-child(2) {
      opacity: 1;
      transform: none;
      transition-delay: .12s
    }

    .sg.on>*:nth-child(3) {
      opacity: 1;
      transform: none;
      transition-delay: .20s
    }

    .sg.on>*:nth-child(4) {
      opacity: 1;
      transform: none;
      transition-delay: .28s
    }

    .sg.on>*:nth-child(5) {
      opacity: 1;
      transform: none;
      transition-delay: .36s
    }

    .sg.on>*:nth-child(6) {
      opacity: 1;
      transform: none;
      transition-delay: .44s
    }

    /* ─── LAYOUT ─────────────────────────────────── */
    .wrap {
      width: min(100% - 40px, 1180px);
      margin-inline: auto
    }

    .sec {
      padding-block: clamp(72px, 9vw, 108px)
    }

    .sec-soft {
      background: var(--bg)
    }

    .sec-mint {
      background: linear-gradient(180deg, var(--mntl) 0%, #fff 100%)
    }

    .sec-dark {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%)
    }

    /* ─── EYEBROW ────────────────────────────────── */
    .eb {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--mint);
      color: var(--cp);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      padding: 5px 15px;
      border-radius: 999px;
      border: 1px solid rgba(6, 30, 54, .18);
      margin-bottom: 18px
    }

    .eb-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acc);
      animation: blink 2s infinite
    }

    .eb-dark {
      background: rgba(255, 255, 255, .2);
      border-color: rgba(142, 210, 31, .28);
      color: #ffffff
    }

    .eb-dark .eb-dot {
      background: #8ED21F
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .25
      }
    }

    /* ─── SEC HEADING ────────────────────────────── */
    .sh {
      text-align: center;
      margin-bottom: clamp(40px, 5.5vw, 64px)
    }

    .sh-left {
      text-align: left
    }

    .st {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 4.2vw, 50px);
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.01em;
      margin-bottom: 14px;
      line-height: 1.2;
    }

    .st em {
      font-style: normal;
      color: var(--cp)
    }

    .st-light {
      color: #fff
    }

    .st-light em {
      color: #8ed21f
    }

    .si {
      font-size: clamp(15px, 1.5vw, 17px);
      color: var(--muted);
      max-width: 680px;
      margin-inline: auto;
      line-height: 1.75
    }

    .si-light {
      color: rgba(255, 255, 255, .58)
    }

    /* ─── BUTTONS ────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      font-family: 'Inter', sans-serif;
      transition: transform .22s ease, box-shadow .22s ease;
      cursor: pointer;
      border: none;
      white-space: nowrap
    }

    /* PRIMARY btn = green bg + navy text */
    .btn-g {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      box-shadow: 0 8px 24px rgba(142, 210, 31, .32)
    }

    .btn-g:hover {
      background: var(--color-accent-hover);
      color: var(--color-primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(142, 210, 31, .38)
    }

    /* OUTLINE btn on light */
    .btn-o {
      background: transparent;
      color: var(--color-accent);
      border: 1.5px solid var(--color-accent);
      box-shadow: none
    }

    .btn-o:hover {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      transform: translateY(-2px)
    }

    /* WHITE btn (used on dark bg hero) = green bg + navy text */
    .btn-w {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(142, 210, 31, .32)
    }

    .btn-w:hover {
      background: var(--color-accent-hover);
      color: var(--color-primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(142, 210, 31, .4)
    }

    /* GHOST btn on dark bg */
    .btn-gh {
      background: transparent;
      color: rgba(255, 255, 255, .92);
      border: 1.5px solid rgba(255, 255, 255, .36);
      backdrop-filter: blur(6px)
    }

    .btn-gh:hover {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      border-color: var(--color-accent);
      transform: translateY(-2px)
    }

    /* ════════════════════════════════════════════
       §1  HERO
    ════════════════════════════════════════════ */
    .hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--g-deep) 0%, var(--g-dark) 55%, #061E36 100%);
      padding: 10px 0 clamp(90px, 11vw, 128px)
    }

    .h-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .h-orb-1 {
      width: 720px;
      height: 720px;
      top: -290px;
      right: -170px;
      background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 65%)
    }

    .h-orb-2 {
      width: 460px;
      height: 460px;
      bottom: -180px;
      left: -90px;
      background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 65%)
    }

    .h-orb-3 {
      width: 180px;
      height: 180px;
      top: 50%;
      left: 42%;
      background: radial-gradient(circle, rgba(142, 210, 31, .05) 0%, transparent 65%)
    }

    /* Floating dots */
    .fdot {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, .25);
      animation: fdrift 8s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes fdrift {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-18px) scale(1.08)
      }
    }

    .fdot-a {
      width: 14px;
      height: 14px;
      top: 22%;
      left: 8%;
      animation-delay: 0s
    }

    .fdot-b {
      width: 8px;
      height: 8px;
      top: 60%;
      left: 14%;
      animation-delay: -2s
    }

    .fdot-c {
      width: 10px;
      height: 10px;
      top: 35%;
      right: 10%;
      animation-delay: -4s
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(48px, 7vw, 100px);
      align-items: center;
      position: relative;
      z-index: 2
    }

    @media(max-width:920px) {
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-copy,
      .hero-btns,
      .hero-trust {
        text-align: center;
        justify-content: center
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .2);
      border: 1px solid rgba(255, 255, 255, .4);
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      margin-bottom: 26px
    }

    .hero-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      animation: blink 2s infinite
    }

    .hero-h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 20px
    }

    .hero-h1 em {
      font-style: normal;
      color: var(--color-accent)
    }

    .hero-hl {
      font-size: clamp(14px, 1.5vw, 16px);
      color: #ffffff;
      font-weight: 600;
      line-height: 1.65;
      margin-bottom: 14px;
      max-width: 520px
    }

    @media(max-width:920px) {

      .hero-hl,
      .hero-body {
        margin-inline: auto
      }
    }

    .hero-body {
      font-size: clamp(14px, 1.4vw, 15.5px);
      color: rgba(255, 255, 255, .9);
      line-height: 1.8;
      margin-bottom: 36px;
      max-width: 500px
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 22px
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, .8);
      font-weight: 500
    }

    /* Hero stat bar */
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: clamp(40px, 6vw, 64px)
    }

    @media(max-width:760px) {
      .hero-stats {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .hstat {
      background: rgba(142, 210, 31, .06);
      border: 1px solid rgba(142, 210, 31, .18);
      border-radius: 16px;
      padding: 24px 20px;
      text-align: left;
      transition: transform .3s ease, background .3s ease, border-color .3s ease
    }

    .hstat:hover {
      transform: translateY(-6px);
      background: rgba(142, 210, 31, .12);
      border-color: rgba(142, 210, 31, .4)
    }

    .hstat-icon {
      font-size: 24px;
      margin-bottom: 14px;
      line-height: 1
    }

    .hstat-label {
      font-size: 11px;
      font-weight: 800;
      color: rgba(255, 255, 255, .45);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 4px;
      font-family: 'Inter', sans-serif
    }

    .hstat-val {
      font-size: 17px;
      font-weight: 800;
      color: var(--green-electric, #8ED21F);
      font-family: 'Inter', sans-serif
    }

    /* Dashboard card */
    .dash-card {
      background: rgba(255, 255, 255, .06);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 22px;
      padding: 28px;
      box-shadow: 0 50px 100px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
      animation: floatY 7s ease-in-out infinite
    }

    @keyframes floatY {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-14px)
      }
    }

    .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .dash-dots {
      display: flex;
      gap: 7px
    }

    .dash-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .dash-lbl {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .dash-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .dash-row:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .dash-left {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .dash-name {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff
    }

    .dash-bar {
      width: 110px;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
      overflow: hidden
    }

    .dash-fill {
      height: 100%;
      border-radius: 999px;
      background: #fff
    }

    .dash-val {
      font-size: 11.5px;
      font-weight: 800;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .25);
      color: #fff;
      padding: 2px 9px;
      border-radius: 7px;
      white-space: nowrap;
      flex-shrink: 0 !important;
      min-width: max-content !important;
      width: auto !important;
    }

    /* ════════════════════════════════════════════
       §2  HOW IT WORKS
    ════════════════════════════════════════════ */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    @media(max-width:960px) {
      .steps-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:520px) {
      .steps-grid {
        grid-template-columns: 1fr
      }
    }

    .step-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px) clamp(20px, 2.5vw, 28px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .step-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none
    }

    .step-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(142, 210, 31, .18), 0 8px 24px rgba(6, 30, 54, .08);
      border-color: var(--color-accent)
    }

    .step-card:hover::after {
      opacity: 1
    }

    .step-num {
      font-family: 'Inter', sans-serif;
      font-size: 48px;
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(6, 30, 54, .22);
      line-height: 1;
      margin-bottom: 16px;
      transition: -webkit-text-stroke-color .3s ease
    }

    .step-card:hover .step-num {
      -webkit-text-stroke-color: rgba(6, 30, 54, .55)
    }

    .step-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, #f0fae0, #d8f5a2);
      border: 1px solid rgba(142, 210, 31, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 16px;
      transition: transform .3s ease
    }

    .step-card:hover .step-icon {
      transform: scale(1.1) rotate(-5deg)
    }

    .step-card h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px
    }

    .step-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.68;
      margin-bottom: 16px
    }

    .step-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: #8ED21F;
      background: #EAF8F1;
      padding: 10px 20px;
      border-radius: 999px;
      text-decoration: none;
      transition: all 0.3s ease;
      margin-top: 8px;
    }

    .step-link:hover {
      background: #8ED21F;
      color: #ffffff;
      gap: 10px;
      box-shadow: 0 4px 12px rgba(142, 210, 31, 0.2);
    }

    .steps-note {
      margin-top: 40px;
      text-align: center;
      background: linear-gradient(135deg, var(--mint), #eef9f4);
      border: 1px solid rgba(6, 30, 54, .14);
      border-radius: 14px;
      padding: 16px 28px;
      font-size: 14px;
      color: var(--cp);
      font-weight: 600
    }

    .steps-note strong {
      font-weight: 800
    }

    /* ════════════════════════════════════════════
       §3  SERVICES
    ════════════════════════════════════════════ */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    @media(max-width:900px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:560px) {
      .svc-grid {
        grid-template-columns: 1fr
      }
    }

    .svc-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: clamp(24px, 3.5vw, 34px);
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .svc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(142, 210, 31, .06), transparent 55%);
      opacity: 0;
      transition: opacity .3s ease
    }

    .svc-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(142, 210, 31, .18), 0 8px 24px rgba(6, 30, 54, .08);
      border-color: var(--color-accent)
    }

    .svc-card:hover::before {
      opacity: 1
    }

    .svc-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: linear-gradient(135deg, #f0fae0, #d8f5a2);
      border: 1px solid rgba(142, 210, 31, .28);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 18px;
      transition: transform .3s ease
    }

    .svc-card:hover .svc-icon {
      transform: scale(1.1) rotate(-6deg)
    }

    .svc-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px
    }

    .svc-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px
    }

    .svc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f0fae0;
      color: var(--color-primary-dark);
      border: 1px solid rgba(142, 210, 31, .35);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px
    }

    .svc-cta {
      text-align: center;
      margin-top: 44px
    }

    /* ════════════════════════════════════════════
       §4  BUILT FOR TECH PROS
    ════════════════════════════════════════════ */
    .roles-section {
      background: var(--bg)
    }

    .filter-tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 32px
    }

    .ftab {
      padding: 8px 20px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 700;
      border: 1.5px solid rgba(142, 210, 31, .3);
      background: #fff;
      color: var(--color-primary-dark);
      cursor: pointer;
      transition: all .2s ease
    }

    .ftab:hover,
    .ftab.active {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      border-color: var(--color-accent)
    }

    .roles-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-bottom: 28px
    }

    .rpill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid rgba(142, 210, 31, .25);
      border-radius: 999px;
      padding: 9px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-primary-dark);
      box-shadow: 0 3px 10px rgba(6, 30, 54, .05);
      transition: all .25s ease;
      cursor: default
    }

    .rpill:hover {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(142, 210, 31, .25)
    }

    .rpill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--acc);
      flex-shrink: 0
    }

    .roles-note {
      text-align: center;
      font-size: 14px;
      color: var(--muted);
      max-width: 560px;
      margin-inline: auto;
      line-height: 1.7
    }

    /* ════════════════════════════════════════════
       §5  TRUST & COMPANIES
    ════════════════════════════════════════════ */
    .trust-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start
    }

    @media(max-width:860px) {
      .trust-layout {
        grid-template-columns: 1fr
      }
    }

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

    @media(max-width:500px) {
      .trust-grid {
        grid-template-columns: 1fr
      }
    }

    .trust-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 5px 18px rgba(6, 30, 54, .05);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
    }

    .trust-card:hover {
      transform: translateY(-5px);
      border-color: var(--color-accent);
      box-shadow: 0 18px 48px rgba(142, 210, 31, .18)
    }

    .tc-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, #f0fae0, #d8f5a2);
      border: 1px solid rgba(142, 210, 31, .28);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px
    }

    .trust-card h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .trust-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.68;
      margin: 0
    }

    .priv-note {
      margin-top: 24px;
      padding: 18px 22px;
      background: #fff8e6;
      border: 1px solid rgba(200, 150, 0, .22);
      border-radius: 14px;
      display: flex;
      gap: 12px;
      align-items: flex-start
    }

    .priv-ico {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 2px
    }

    .priv-note p {
      font-size: 13px;
      color: #6b5500;
      line-height: 1.68;
      margin: 0
    }

    .priv-note strong {
      color: #4a3a00
    }

    /* Company side */
    .co-head {
      font-family: 'Inter', sans-serif;
      font-size: clamp(22px, 2.8vw, 32px);
      font-weight: 900;
      color: var(--text);
      margin-bottom: 12px;
      line-height: 1.2
    }

    .co-head em {
      font-style: normal;
      color: var(--cp)
    }

    .co-sub {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 24px
    }

    .co-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px
    }

    .copill {
      display: inline-block;
      background: #f0fae0;
      border: 1px solid rgba(142, 210, 31, .28);
      border-radius: 999px;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 700;
      color: var(--color-primary-dark);
      box-shadow: 0 3px 8px rgba(6, 30, 54, .05);
      transition: all .22s ease;
      cursor: default
    }

    .copill:hover {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-primary-dark);
      transform: translateY(-2px)
    }

    .co-disc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.65;
      font-style: normal;
    }

    /* ════════════════════════════════════════════
       §6  RESOURCES + FINAL CTA
    ════════════════════════════════════════════ */
    .res-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-bottom: clamp(60px, 8vw, 88px)
    }

    @media(max-width:860px) {
      .res-grid {
        grid-template-columns: 1fr
      }
    }

    .res-card {
      background: var(--card);
      border: 1px solid rgba(6, 30, 54, .08);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: 0 6px 22px rgba(6, 30, 54, .05);
      display: flex;
      flex-direction: column;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
    }

    .res-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 26px 60px rgba(142, 210, 31, .18);
      border-color: var(--color-accent)
    }

    .res-top {
      background: linear-gradient(135deg, #f0fae0, #d8f5a2);
      padding: 32px 28px;
      min-height: 120px;
      display: flex;
      align-items: flex-end
    }

    .res-cat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(6, 30, 54, .85);
      color: #fff;
      border: 1px solid rgba(142, 210, 31, .3);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 999px
    }

    .res-body {
      padding: 24px 28px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .res-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.35
    }

    .res-card p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.68;
      flex: 1
    }

    .res-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      color: var(--color-accent);
      margin-top: 4px;
      transition: gap .2s ease, color .2s ease
    }

    .res-card:hover .res-link {
      gap: 9px;
      color: var(--color-accent-hover)
    }

    /* CTA box */
    .cta-box {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      border-radius: 32px;
      padding: clamp(60px, 9vw, 92px) clamp(28px, 5vw, 80px);
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(8, 26, 48, .28)
    }

    .cta-box::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at 78% 22%, rgba(142, 210, 31, .18), transparent 52%), radial-gradient(ellipse at 22% 82%, rgba(6, 30, 54, .14), transparent 50%)
    }

    .cta-box>* {
      position: relative;
      z-index: 1
    }

    .cta-h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 4.5vw, 52px);
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 16px
    }

    .cta-h2 em {
      font-style: normal;
      color: var(--color-accent)
    }

    .cta-sub {
      font-size: clamp(15px, 1.5vw, 17px);
      color: rgba(255, 255, 255, .9);
      max-width: 620px;
      margin: 0 auto 36px;
      line-height: 1.72
    }

    .cta-btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap
    }

    .cta-links {
      display: flex;
      gap: 22px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 28px
    }

    .cta-link {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, .42);
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: color .2s, text-decoration-color .2s
    }

    .cta-link:hover {
      color: rgba(255, 255, 255, .8);
      text-decoration-color: rgba(255, 255, 255, .4)
    }

    .cta-disc {
      margin-top: 28px;
      font-size: 11.5px;
      color: rgba(255, 255, 255, .75);
      max-width: 560px;
      margin-inline: auto;
      line-height: 1.6
    }

    @media(max-width:600px) {
      .cta-btns {
        flex-direction: column;
        align-items: center
      }

      .cta-btns .btn {
        width: 100%;
        justify-content: center
      }
    }

    /* N) NEW SPLIT CTA FORM */
    .cta-contact-box {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      border-radius: 32px;
      padding: clamp(16px, 2vw, 24px);
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(8, 26, 48, .28);
    }

    .cta-contact-box::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at 78% 22%, rgba(142, 210, 31, .18), transparent 52%), radial-gradient(ellipse at 22% 82%, rgba(6, 30, 54, .14), transparent 50%);
    }

    .cta-contact-card {
      background: #FFFFFF;
      border-radius: 28px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      position: relative;
      z-index: 1;
      /* removed overflow: hidden so blobs can stick out */
      box-shadow: 0 22px 54px rgba(6, 30, 54, 0.15);
      max-width: 900px;
      margin: 0 auto;
    }

    .cta-blob {
      position: absolute;
      background: #FFFFFF;
      border-radius: 999px;
      z-index: -1;
      pointer-events: none;
    }

    .cta-blob-1 {
      top: 15%;
      left: -40px;
      width: 140px;
      height: 50px;
    }

    .cta-blob-2 {
      top: 45%;
      left: -20px;
      width: 80px;
      height: 30px;
    }

    .cta-blob-3 {
      bottom: 10%;
      left: -60px;
      width: 160px;
      height: 80px;
    }

    .cta-blob-4 {
      top: 20%;
      right: -50px;
      width: 120px;
      height: 40px;
    }

    .cta-blob-5 {
      bottom: 5%;
      right: -80px;
      width: 220px;
      height: 90px;
    }

    @media(max-width:960px) {
      .cta-blob {
        display: none;
      }

      .cta-contact-card {
        grid-template-columns: 1fr;
      }
    }

    .cta-form-col {
      padding: clamp(16px, 3vw, 24px);
    }

    .cta-info-col {
      background: #FFFFFF;
      padding: clamp(16px, 3vw, 24px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .cta-form-head {
      margin-bottom: 12px;
    }

    .cta-form-h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(22px, 3vw, 26px);
      font-weight: 800;
      color: #061E36;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }

    .cta-form-h2 em {
      font-style: normal;
      color: #8ED21F;
    }

    .cta-form-sub {
      font-size: 12px;
      color: #8C9BB3;
      line-height: 1.4;
      max-width: 95%;
    }

    .cta-f-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 8px;
    }

    @media(max-width:500px) {
      .cta-f-grid {
        grid-template-columns: 1fr;
      }
    }

    .cta-f-span-1 {
      grid-column: span 1;
    }

    .cta-f-span-2 {
      grid-column: span 2;
    }

    .cta-f-full {
      grid-column: 1 / -1;
    }

    .cta-f-grp {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cta-f-lbl {
      font-size: 11px;
      font-weight: 600;
      color: #8C9BB3;
      padding-left: 10px;
    }

    .cta-f-inp,
    .cta-f-sel,
    .cta-f-txt {
      border: none;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 12px;
      font-family: 'Inter', sans-serif;
      color: #0A2342;
      background: #F4F7FB;
      transition: all 0.2s;
    }

    .cta-f-inp::placeholder,
    .cta-f-sel::placeholder,
    .cta-f-txt::placeholder {
      color: #B0BEC5;
    }

    .cta-f-inp:focus,
    .cta-f-sel:focus,
    .cta-f-txt:focus {
      background: #E8F0FE;
      outline: none;
      box-shadow: inset 0 0 0 1.5px #8ED21F;
    }

    .cta-f-txt {
      resize: vertical;
      min-height: 85px;
      border-radius: 18px;
    }

    .cta-f-sel {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9BB3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }

    .cta-check-grp {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding-left: 6px;
      margin-top: 4px;
    }

    .cta-check-lbl {
      font-size: 11px;
      color: #8C9BB3;
      line-height: 1.4;
    }

    .cta-illustration {
      position: relative;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .cta-info-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .cta-info-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cta-info-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: #EAF8F1;
      color: #8ED21F;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .cta-info-text h4 {
      display: none;
    }

    .cta-info-text p {
      font-size: 12.5px;
      color: #52677A;
      line-height: 1.4;
      margin: 0;
    }

    .cta-info-social {
      display: flex;
      gap: 12px;
      margin-top: 36px;
    }

    .cta-soc-link {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #0A2342;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      transition: background 0.2s, transform 0.2s;
    }

    .cta-soc-link:hover {
      background: #8ED21F;
      color: #0A2342;
      transform: translateY(-3px);
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 28px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      font-family: 'Inter', sans-serif;
      transition: transform .22s ease, box-shadow .22s ease;
      cursor: pointer;
      border: none;
      white-space: nowrap;
    }

    .cta-btn-g {
      background: linear-gradient(135deg, #8ED21F, #061E36);
      color: #fff;
      box-shadow: 0 10px 28px rgba(6, 30, 54, .28);
    }

    .cta-btn-g:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(6, 30, 54, .36);
      color: #fff;
    }

    /* M) Testimonials Slider Section */
    .testimonial-slider {
      display: flex;
      overflow: hidden;
      position: relative;
      width: 100%;
      padding: 20px 0;
    }

    .testimonial-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: scroll 80s linear infinite;
    }

    .testimonial-track:hover {
      animation-play-state: paused;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(calc(-50% - 12px));
      }
    }

    .testi-card {
      width: 350px;
      flex-shrink: 0;
      background: #FFFFFF;
      border: 1px solid var(--bdr);
      border-radius: 20px;
      padding: clamp(28px, 3.5vw, 38px);
      position: relative;
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(6, 30, 54, 0.08);
      transition: all 0.25s ease;
    }

    .testi-card:hover {
      border-color: rgba(142, 210, 31, 0.35);
      box-shadow: 0 22px 50px rgba(6, 30, 54, 0.12);
      transform: translateY(-2px);
    }

    .testi-mark {
      font-family: 'Playfair Display', serif;
      font-size: 72px;
      color: #EAF8F1;
      position: absolute;
      top: 8px;
      left: 22px;
      line-height: 1;
      z-index: 0;
      opacity: .7;
      pointer-events: none;
    }

    .testi-quote {
      font-size: clamp(15px, 1.5vw, 16.5px);
      color: var(--text);
      line-height: 1.75;
      font-style: italic;
      font-weight: 600;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
      padding-top: 30px;
    }

    .testi-author {
      border-top: 1px solid var(--bdr);
      padding-top: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .testi-name {
      font-weight: 800;
      color: var(--text);
      font-size: 15px;
      margin-bottom: 2px;
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #EAF8F1;
      color: var(--green-main);
      border: 1px solid rgba(142, 210, 31, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
    }

    .testi-role {
      font-weight: 800;
      color: var(--muted);
      font-size: 14px;
    }

    /* M) Testimonials Slider Section */
    .testimonial-slider {
      display: flex;
      overflow: hidden;
      position: relative;
      width: 100%;
      padding: 20px 0;
    }

    .testimonial-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: scroll 80s linear infinite;
    }

    .testimonial-track:hover {
      animation-play-state: paused;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(calc(-50% - 12px));
      }
    }

    .testi-card {
      width: 350px;
      flex-shrink: 0;
      background: #FFFFFF;
      border: 1px solid var(--bdr);
      border-radius: 20px;
      padding: clamp(28px, 3.5vw, 38px);
      position: relative;
      overflow: hidden;
      box-shadow: 0 16px 38px rgba(6, 30, 54, 0.08);
      transition: all 0.25s ease;
    }

    .testi-card:hover {
      border-color: rgba(142, 210, 31, 0.35);
      box-shadow: 0 22px 50px rgba(6, 30, 54, 0.12);
      transform: translateY(-2px);
    }

    .testi-mark {
      font-family: 'Playfair Display', serif;
      font-size: 72px;
      color: #EAF8F1;
      position: absolute;
      top: 8px;
      left: 22px;
      line-height: 1;
      z-index: 0;
      opacity: .7;
      pointer-events: none;
    }

    .testi-quote {
      font-size: clamp(15px, 1.5vw, 16.5px);
      color: var(--text);
      line-height: 1.75;
      font-style: italic;
      font-weight: 600;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
      padding-top: 30px;
    }

    .testi-author {
      border-top: 1px solid var(--bdr);
      padding-top: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .testi-name {
      font-weight: 800;
      color: var(--text);
      font-size: 15px;
      margin-bottom: 2px;
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #EAF8F1;
      color: var(--green-main);
      border: 1px solid rgba(142, 210, 31, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
    }

    .testi-role {
      font-weight: 800;
      color: var(--muted);
      font-size: 14px;
    }

    /* ═══════════════════════════════════════════════════════
       §6.5  NEW SPLIT CTA FORM
    ═══════════════════════════════════════════════════════ */
    .cta-contact-box {
      background: linear-gradient(135deg, #061E36 0%, #061E36 55%, #061E36 100%);
      border-radius: 32px;
      padding: clamp(32px, 5vw, 60px);
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(8, 26, 48, .28);
    }

    .cta-contact-box::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at 78% 22%, rgba(142, 210, 31, .18), transparent 52%), radial-gradient(ellipse at 22% 82%, rgba(6, 30, 54, .14), transparent 50%);
    }

    .cta-contact-card {
      background: #FFFFFF;
      border-radius: 24px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      position: relative;
      z-index: 1;
      overflow: hidden;
      box-shadow: 0 22px 54px rgba(6, 30, 54, 0.15);
    }

    @media(max-width:960px) {
      .cta-contact-card {
        grid-template-columns: 1fr;
      }
    }

    .cta-form-col {
      padding: clamp(32px, 5vw, 48px);
    }

    .cta-info-col {
      background: #F6F9FC;
      padding: clamp(32px, 5vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-left: 1px solid #DCE7EF;
      position: relative;
    }

    @media(max-width:960px) {
      .cta-info-col {
        border-left: none;
        border-top: 1px solid #DCE7EF;
      }
    }

    .cta-form-head {
      margin-bottom: 32px;
    }

    .cta-form-h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(28px, 3.5vw, 38px);
      font-weight: 900;
      color: #0A2342;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
    }

    .cta-form-h2 em {
      font-style: normal;
      color: #8ED21F;
    }

    .cta-form-sub {
      font-size: 15px;
      color: #52677A;
      line-height: 1.6;
      max-width: 90%;
    }

    .cta-f-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media(max-width:600px) {
      .cta-f-grid {
        grid-template-columns: 1fr;
      }
    }

    .cta-f-full {
      grid-column: 1 / -1;
    }

    .cta-f-grp {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }

    .cta-f-lbl {
      font-size: 13.5px;
      font-weight: 700;
      color: #0A2342;
    }

    .cta-f-inp,
    .cta-f-sel,
    .cta-f-txt {
      border: 1.5px solid #DCE7EF;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      color: #0A2342;
      background: #FFFFFF;
      transition: all 0.2s;
    }

    .cta-f-inp:focus,
    .cta-f-sel:focus,
    .cta-f-txt:focus {
      border-color: #8ED21F;
      box-shadow: 0 0 0 3px rgba(142, 210, 31, 0.12);
      outline: none;
    }

    .cta-f-txt {
      resize: vertical;
      min-height: 110px;
    }

    .cta-f-sel {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }

    .cta-check-grp {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 24px;
    }

    .cta-check-lbl {
      font-size: 12.5px;
      color: #52677A;
      line-height: 1.5;
    }

    .cta-illustration {
      position: relative;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
    }

    .cta-info-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .cta-info-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .cta-info-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: #EAF8F1;
      color: #8ED21F;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      border: 1px solid rgba(142, 210, 31, 0.15);
    }

    .cta-info-text h4 {
      font-size: 14.5px;
      font-weight: 700;
      color: #0A2342;
      margin-bottom: 4px;
    }

    .cta-info-text p {
      font-size: 13.5px;
      color: #52677A;
      line-height: 1.55;
    }

    .cta-info-social {
      display: flex;
      gap: 12px;
      margin-top: 36px;
    }

    .cta-soc-link {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #0A2342;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      transition: background 0.2s, transform 0.2s;
    }

    .cta-soc-link:hover {
      background: var(--color-accent);
      color: var(--color-primary-dark);
      transform: translateY(-3px);
    }

    /* ══════════════════════════════════════════════════════
     INDEX PAGE BRAND THEME OVERRIDES — Navy + Green
  ══════════════════════════════════════════════════════ */

    /* Hero badge: green dot pulse */
    .hero-badge {
      background: rgba(142, 210, 31, .14);
      border: 1px solid rgba(142, 210, 31, .4);
      color: #ffffff;
    }

    .hero-badge-dot {
      background: var(--color-accent);
      box-shadow: 0 0 6px rgba(142, 210, 31, .7);
    }

    /* Hero orbs — subtle green glow */
    .h-orb-1 {
      background: radial-gradient(circle, rgba(142, 210, 31, .08) 0%, transparent 65%)
    }

    .h-orb-2 {
      background: radial-gradient(circle, rgba(142, 210, 31, .05) 0%, transparent 65%)
    }

    .h-orb-3 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(142, 210, 31, .12) 0%, transparent 65%)
    }

    /* Hero grid mesh pattern overlay */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(142, 210, 31, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 210, 31, .04) 1px, transparent 1px);
      background-size: 40px 40px;
      z-index: 1
    }

    /* Marquee banner */
    .marquee-wrapper {
      background: var(--color-primary-dark) !important;
      border-top: 1px solid rgba(142, 210, 31, .18) !important;
      border-bottom: 1px solid rgba(142, 210, 31, .18) !important;
    }

    .marquee-item {
      color: rgba(255, 255, 255, .82);
    }

    /* How it works section: light bg */
    .sec-soft {
      background: #F8FBF4 !important;
    }

    .steps-note {
      background: linear-gradient(135deg, #f0fae0, #eefad4);
      border-color: rgba(142, 210, 31, .3);
      color: var(--color-primary-dark);
    }

    /* Step link pills */
    .step-link {
      color: var(--color-primary-dark) !important;
      background: var(--color-accent) !important;
    }

    .step-link:hover {
      background: var(--color-accent-hover) !important;
      color: var(--color-primary-dark) !important;
    }

    /* Stat cards (dark strip) */
    .hstat-label {
      color: rgba(255, 255, 255, .55);
    }

    .hstat-val {
      color: var(--color-accent);
    }

    /* sec-mint / trust section */
    .sec-mint {
      background: linear-gradient(180deg, #F8FBF4 0%, #ffffff 100%) !important;
    }

    /* FAQ tabs */
    .uj-faq-tab {
      border: 1.5px solid rgba(142, 210, 31, .28) !important;
      color: var(--color-primary-dark) !important;
      background: #fff !important;
    }

    .uj-faq-tab:hover,
    .uj-faq-tab.active {
      background: var(--color-accent) !important;
      color: var(--color-primary-dark) !important;
      border-color: var(--color-accent) !important;
    }

    /* FAQ items */
    .uj-faq-item {
      background: #fff;
      border: 1px solid rgba(6, 30, 54, .08);
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(6, 30, 54, .05);
      overflow: hidden;
      transition: border-color .25s ease, box-shadow .25s ease;
    }

    .uj-faq-item:hover,
    .uj-faq-item.active {
      border-color: var(--color-accent) !important;
      box-shadow: 0 6px 24px rgba(142, 210, 31, .15) !important;
    }

    .uj-faq-item.active {
      background: #fafff3;
    }

    .uj-faq-question {
      color: var(--color-primary-dark) !important;
      font-weight: 700;
    }

    .faq-icon {
      color: var(--color-accent) !important;
    }

    /* FAQ thin CTA banner */
    .uj-faq-thin-cta {
      background: var(--color-primary-dark) !important;
      border-radius: 14px;
      border: 1px solid rgba(142, 210, 31, .22);
      box-shadow: 0 8px 32px rgba(6, 30, 54, .18);
    }

    .uj-faq-thin-cta-text h4 {
      color: #fff !important;
    }

    .uj-faq-thin-cta-text p {
      color: var(--color-accent) !important;
    }

    .uj-faq-thin-cta .btn-primary,
    .uj-faq-thin-cta a.btn {
      background: var(--color-accent) !important;
      color: var(--color-primary-dark) !important;
      border: none !important;
    }

    /* Testimonials section */
    .testi-mark {
      color: #f0fae0 !important;
    }

    .testi-avatar {
      background: #f0fae0 !important;
      color: var(--color-accent) !important;
      border: 1px solid rgba(142, 210, 31, .2) !important;
    }

    .testi-name {
      color: var(--color-primary-dark) !important;
    }

    /* Resources section */
    .sec-light {
      background: #F8FBF4 !important;
    }

    /* CTA box heading em */
    .cta-h2 em {
      color: var(--color-accent) !important;
    }

    /* Bottom CTA buttons */
    .cta-box .btn-w {
      background: var(--color-accent) !important;
      color: var(--color-primary-dark) !important;
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(142, 210, 31, .35) !important;
    }

    .cta-box .btn-w:hover {
      background: var(--color-accent-hover) !important;
      color: var(--color-primary-dark) !important;
    }

    .cta-box .btn-gh {
      border-color: rgba(255, 255, 255, .4) !important;
      color: rgba(255, 255, 255, .9) !important;
    }

    .cta-box .btn-gh:hover {
      background: rgba(255, 255, 255, .12) !important;
      color: #fff !important;
    }

    /* === RESPONSIVE FIXES === */
    @media (max-width: 768px) {
      .steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
      }

      .svc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
      }

      .trust-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      .res-grid {
        grid-template-columns: 1fr !important;
      }

      .filter-tabs {
        gap: 6px !important;
      }

      .ftab {
        font-size: 12px !important;
        padding: 6px 14px !important;
      }

      .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .cta-btns {
        flex-direction: column !important;
        align-items: center !important;
      }

      .cta-btns .btn {
        width: 100% !important;
        justify-content: center !important;
      }

      .trust-layout {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 480px) {
      .steps-grid {
        grid-template-columns: 1fr !important;
      }

      .svc-grid {
        grid-template-columns: 1fr !important;
      }

      .trust-grid {
        grid-template-columns: 1fr !important;
      }

      .hero-h1 {
        font-size: clamp(26px, 7vw, 36px) !important;
      }

      .hero-btns {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .hero-btns .btn {
        justify-content: center !important;
      }

      .roles-pills {
        gap: 8px !important;
      }

      .rpill {
        padding: 7px 14px !important;
        font-size: 13px !important;
      }

      .co-pills {
        gap: 6px !important;
      }

      .copill {
        padding: 5px 12px !important;
        font-size: 12px !important;
      }

      .testi-card {
        width: 280px !important;
      }
    }

    /* Ensure green-electric var works everywhere */
    [style*="color:var(--green-electric)"],
    [style*="color: var(--green-electric)"] {
      color: #8ED21F !important;
    }