:root {
        --deep: #030f4d;
        --navy: #1b1464;
        --navy2: #0a1550;
        --teal: #5dbb64;
        --teal-d: #4da353;
        --gold: #c9a24b;
        --paper: #f4f5fa;
        --line: #e4e6ef;
        --line-d: rgba(255, 255, 255, 0.14);
        --ink: #14151c;
        --muted: #5b6172;
        --white: #fff;
        --display: "Sora", system-ui, sans-serif;
        --body: "Inter", system-ui, sans-serif;
        --maxw: 1240px;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family: var(--body);
        color: var(--ink);
        background: var(--white);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: var(--display);
        margin: 0;
        letter-spacing: -0.02em;
        line-height: 1.08;
      }
      p {
        margin: 0;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img,
      svg {
        display: block;
        max-width: 100%;
      }
      :focus-visible {
        outline: 2px solid var(--teal);
        outline-offset: 3px;
      }
      .wrap {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 40px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-weight: 600;
        font-size: 15px;
        padding: 14px 24px;
        border: 1px solid transparent;
        cursor: pointer;
        transition:
          background 0.2s ease,
          color 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease;
      }
      .btn-primary {
        background: var(--teal);
        color: var(--deep);
      }
      .btn-primary:hover {
        background: var(--gold);
        transform: translateY(-2px);
      }
      .btn-ghost {
        background: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
      }
      .btn-ghost:hover {
        border-color: var(--teal);
        color: var(--teal);
      }
      .btn-dark {
        background: var(--deep);
        color: #fff;
      }
      .btn-dark:hover {
        background: var(--navy);
      }
      .btn-outline {
        background: transparent;
        color: var(--deep);
        border-color: var(--line);
      }
      .btn-outline:hover {
        border-color: var(--deep);
      }

      /* ---------- nav ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: linear-gradient(90deg, var(--deep), var(--navy));
        box-shadow: 0 6px 24px rgba(3, 15, 77, 0.22);
      }
      .nav-in {
        display: flex;
        align-items: center;
        gap: 26px;
        height: 74px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .brand .mark {
        width: 42px;
        height: 42px;
        background: #fff;
        display: grid;
        place-items: center;
      }
      .brand .mark span {
        font-family: var(--display);
        font-weight: 800;
        color: var(--navy);
        font-size: 19px;
      }
      .brand .name b {
        font-family: var(--display);
        font-weight: 800;
        color: #fff;
        font-size: 18px;
        letter-spacing: 0.06em;
        display: block;
        line-height: 1;
      }
      .brand .name small {
        font-family: var(--body);
        color: var(--gold);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      .nav-links {
        display: flex;
        gap: 6px;
        margin-left: 18px;
      }
      .nav-links a {
        color: rgba(255, 255, 255, 0.82);
        font-family: var(--display);
        font-weight: 500;
        font-size: 14.5px;
        padding: 9px 13px;
        transition:
          color 0.18s,
          background 0.18s;
      }
      .nav-links a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }
      .nav-cta {
        margin-left: auto;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.45);
        padding: 11px 22px;
        font-family: var(--display);
        font-weight: 600;
        font-size: 14.5px;
        transition: 0.2s;
      }
      .nav-cta:hover {
        background: #fff;
        color: var(--navy);
      }
      .burger {
        display: none;
        margin-left: auto;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: 0;
        padding: 8px;
        cursor: pointer;
      }
      .burger span {
        width: 24px;
        height: 2px;
        background: #fff;
        display: block;
      }

      /* ---------- hero ---------- */
      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: var(--deep);
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .hero-bg svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .hero-in {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 990px;
        margin: 0 auto;
        padding: 0 20px;
        width: 100%;
      }
      .hero h1 {
        font-size: clamp(38px, 5.4vw, 70px);
        font-weight: 800;
        color: var(--deep);
        line-height: 1.04;
        letter-spacing: -0.03em;
      }
      .hero-lead {
        margin: 22px auto 0;
        font-size: clamp(16px, 1.6vw, 20px);
        color: #243049;
        max-width: 52ch;
        line-height: 1.6;
        text-shadow: 0 1px 12px rgba(247, 241, 220, 0.7);
      }
      .hero-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 38px;
        flex-wrap: wrap;
      }
      .btn-outline-d {
        background: rgba(255, 255, 255, 0.9);
        color: var(--deep);
        border-color: var(--deep);
      }
      .btn-outline-d:hover {
        background: var(--deep);
        color: #fff;
      }

      /* ---------- section shell ---------- */
      .section {
        padding: 104px 0;
      }
      .sec-lead {
        max-width: 640px;
        margin-bottom: 56px;
      }
      .sec-lead h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 700;
        color: var(--deep);
      }
      .sec-lead p {
        margin-top: 18px;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.7;
      }
      .kicker {
        font-family: var(--display);
        font-weight: 600;
        font-size: 13px;
        color: var(--gold);
        margin-bottom: 14px;
      }

      /* ---------- intelligence / dashboard ---------- */
      .intel {
        background: var(--paper);
      }
      .intel-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .panel {
        background: #fff;
        border: 1px solid var(--line);
        padding: 32px 30px 34px;
        display: flex;
        flex-direction: column;
      }
      .panel h3 {
        font-size: 19px;
        font-weight: 600;
        color: var(--deep);
      }
      .panel .sub {
        color: var(--muted);
        font-size: 14px;
        margin-top: 6px;
      }
      .metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        margin-top: 26px;
        background: var(--line);
      }
      .metrics div {
        background: #fff;
        padding: 18px 18px;
      }
      .metrics .v {
        font-family: var(--display);
        font-weight: 700;
        font-size: 28px;
        color: var(--deep);
      }
      .metrics .v em {
        font-style: normal;
        font-size: 14px;
        color: var(--muted);
        font-weight: 500;
        margin-left: 4px;
      }
      .metrics .k {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 4px;
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--display);
        font-weight: 600;
        font-size: 12px;
        padding: 6px 12px;
        background: rgba(93, 187, 100, 0.14);
        color: var(--teal-d);
        margin-top: 24px;
        align-self: flex-start;
      }
      .chip .dot {
        width: 7px;
        height: 7px;
        background: var(--teal);
        border-radius: 50%;
      }
      .spark {
        margin-top: 26px;
      }
      .rows-list {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
      }
      .rows-list .r {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
        border-top: 1px solid var(--line);
        font-size: 15px;
      }
      .rows-list .r:first-child {
        border-top: none;
      }
      .rows-list .r b {
        font-family: var(--display);
        font-weight: 600;
        color: var(--deep);
      }
      .rows-list .r .st {
        font-family: var(--display);
        font-weight: 600;
        font-size: 13px;
        color: var(--teal-d);
      }
      .rows-list .r .st.warn {
        color: var(--gold);
      }

      /* ---------- compare ---------- */
      .compare-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 40px;
        align-items: stretch;
      }
      .cmp-stack {
        display: flex;
        flex-direction: column;
        gap: 22px;
      }
      .cmp-row {
        border: 1px solid var(--line);
        padding: 26px 28px;
      }
      .cmp-row h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--deep);
        margin-bottom: 18px;
      }
      .cmp-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
      .cmp-cell .tag {
        font-family: var(--display);
        font-weight: 600;
        font-size: 12px;
        padding: 5px 10px;
        display: inline-block;
      }
      .cmp-cell.sv .tag {
        background: rgba(93, 187, 100, 0.14);
        color: var(--teal-d);
      }
      .cmp-cell.tr .tag {
        background: #f0efe6;
        color: #8a7a3f;
      }
      .cmp-cell .big {
        font-family: var(--display);
        font-weight: 800;
        font-size: 30px;
        color: var(--deep);
        margin: 12px 0 6px;
      }
      .cmp-cell.tr .big {
        color: #9aa0ab;
      }
      .cmp-cell p {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.55;
      }
      .cmp-media {
        border: 1px solid var(--line);
        overflow: hidden;
        background: var(--navy);
        position: relative;
      }
      .cmp-media svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .cmp-media .cap {
        position: absolute;
        left: 22px;
        bottom: 20px;
        color: #fff;
        font-family: var(--display);
      }
      .cmp-media .cap b {
        font-weight: 700;
        font-size: 18px;
        display: block;
      }
      .cmp-media .cap small {
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
      }

      /* ---------- products ---------- */
      .products {
        background: var(--deep);
        color: #fff;
      }
      .products .sec-lead h2 {
        color: #fff;
      }
      .products .sec-lead p {
        color: rgba(255, 255, 255, 0.72);
      }
      .prod-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }
      .pcard {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        flex-direction: column;
        transition:
          transform 0.3s ease,
          background 0.3s ease;
      }
      .pcard:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.07);
      }
      .pcard .thumb {
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--navy2);
      }
      .pcard .thumb svg {
        width: 100%;
        height: 100%;
      }
      .pcard .body {
        padding: 26px 26px 30px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
      }
      .pcard .tag {
        font-family: var(--display);
        font-weight: 600;
        font-size: 12px;
        color: var(--gold);
      }
      .pcard h3 {
        font-size: 20px;
        font-weight: 600;
      }
      .pcard p {
        color: rgba(255, 255, 255, 0.72);
        font-size: 14.5px;
        line-height: 1.6;
      }
      .pcard .more {
        margin-top: auto;
        font-family: var(--display);
        font-weight: 600;
        font-size: 14px;
        color: var(--teal);
        padding-top: 6px;
      }

      /* ---------- cta band ---------- */
      .cta {
        position: relative;
        color: #fff;
        overflow: hidden;
        background: linear-gradient(
          120deg,
          var(--deep),
          var(--navy) 60%,
          var(--teal-d)
        );
      }
      .cta-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0.5;
      }
      .cta-in {
        position: relative;
        z-index: 1;
        padding: 110px 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .cta-in h2 {
        font-size: clamp(28px, 3.6vw, 46px);
        font-weight: 800;
        max-width: 34ch;
        line-height: 1.18;
      }
      .cta-in p {
        margin-top: 18px;
        color: rgba(255, 255, 255, 0.88);
        max-width: 64ch;
        font-size: 17.5px;
        line-height: 1.65;
      }
      .cta-in .hero-actions {
        justify-content: center;
        margin-top: 34px;
      }

      /* ---------- footer ---------- */
      .foot {
        background: #020a35;
        color: rgba(255, 255, 255, 0.7);
      }
      .foot-bar {
        border-bottom: 1px solid var(--line-d);
      }
      .foot-bar .in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 36px 0;
        flex-wrap: wrap;
      }
      .foot-bar h3 {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
      }
      .foot-bar .meta {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 6px;
      }
      .foot-cols {
        display: grid;
        grid-template-columns: 1.3fr repeat(4, 1fr);
        gap: 30px;
        padding: 60px 0 40px;
      }
      .foot-cols .about b {
        font-family: var(--display);
        font-weight: 800;
        color: #fff;
        font-size: 18px;
        letter-spacing: 0.06em;
      }
      .foot-cols .about p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
        max-width: 34ch;
      }
      .fcol h5 {
        font-family: var(--display);
        font-weight: 600;
        color: #fff;
        font-size: 14px;
        margin-bottom: 16px;
      }
      .fcol a {
        display: block;
        font-size: 14px;
        padding: 6px 0;
        color: rgba(255, 255, 255, 0.66);
        transition: color 0.15s;
      }
      .fcol a:hover {
        color: var(--teal);
      }
      .foot-base {
        border-top: 1px solid var(--line-d);
        padding: 24px 0;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
      }

      /* ---------- extra sections ---------- */

      /* shared photo bg classes */
      .bgimg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .bgph1 {
        background-image: url(/extracted/93c33633b1ff3437.jpg);
      }
      .bgph2 {
        background-image: url(/extracted/7c73b2c12eedb3a3.jpg);
      }
      .bgph3 {
        background-image: url(/extracted/cb4c5c02d0cb419c.jpg);
      }
      .bgph4 {
        background-image: url(/extracted/55d800db5ad68909.jpg);
      }
      .bgph5 {
        background-image: url(/extracted/23053f53d371c832.jpg);
      }
      .bgph6 {
        background-image: url(/extracted/c9b46fa964af8761.jpg);
      }
      .bgph7 {
        background-image: url(/extracted/ec2fed3cb3b3302d.jpg);
      }
      /* benefits */
      .benefits {
        background: var(--paper);
        padding: 80px 0;
      }
      .ben-head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 40px;
      }
      .ben-head h2 {
        font-size: clamp(28px, 3.4vw, 42px);
        font-weight: 700;
        color: var(--deep);
        line-height: 1.2;
        margin: 0;
      }
      .ben-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
      }
      .ben-card {
        flex: 1 1 320px;
        max-width: 380px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 26px 24px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        box-shadow: 0 4px 16px rgba(3, 15, 77, 0.03);
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          border-color 0.25s ease;
      }
      .ben-card:hover {
        transform: translateY(-4px);
        border-color: var(--teal);
        box-shadow: 0 14px 28px rgba(3, 15, 77, 0.08);
      }
      .ben-num {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 700;
        color: var(--teal-d);
        background: rgba(15, 181, 174, 0.12);
        padding: 6px 12px;
        border-radius: 6px;
        flex-shrink: 0;
      }
      .ben-card p {
        color: var(--deep);
        font-size: 15.5px;
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
      }
      /* audiences */
      .audiences {
        background: var(--deep);
        color: #fff;
      }
      .aud-heading {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 48px;
      }
      .aud-heading .pillx.dark {
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--teal);
        margin-bottom: 18px;
      }
      .aud-heading h2 {
        font-size: clamp(28px, 3.6vw, 48px);
        font-weight: 800;
        color: #fff;
      }
      .aud-body {
        display: grid;
        grid-template-columns: 0.85fr 2.4fr;
        gap: 32px;
        align-items: stretch;
      }
      .aud-intro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 26px;
      }
      .aud-intro p {
        color: rgba(255, 255, 255, 0.78);
        font-size: 17px;
        line-height: 1.7;
      }
      .aud-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
      }
      .aud-card {
        position: relative;
        flex: 0 0 210px;
        height: 360px;
        overflow: hidden;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px 20px;
      }
      .aud-ov {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(3, 15, 77, 0.35),
          rgba(3, 15, 77, 0.85)
        );
      }
      .aud-top-row {
        position: absolute;
        top: 18px;
        left: 18px;
        right: 18px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .aud-ic {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--teal);
        display: grid;
        place-items: center;
      }
      .aud-ic svg {
        width: 20px;
        height: 20px;
      }
      .aud-cat {
        font-family: var(--display);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.85);
      }
      .aud-card h3 {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
      }
      /* what sets apart */
      .apart {
        background: var(--paper);
      }
      .apart-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 8px;
      }
      .apart-head h2 {
        margin-top: 14px;
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 700;
        color: var(--deep);
      }
      .btn-outline {
        background: transparent;
        color: var(--deep);
        border-color: var(--deep);
      }
      .btn-outline:hover {
        background: var(--deep);
        color: #fff;
      }
      .apart-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 36px;
      }
      .apart-row {
        background: #ffffff;
        border: 1px solid var(--line);
        border-top: 3px solid transparent;
        padding: 36px 30px;
        display: flex;
        flex-direction: column;
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          border-color 0.25s ease;
      }
      .apart-row:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(3, 15, 77, 0.08);
        border-top-color: var(--teal);
        border-color: rgba(93, 187, 100, 0.4);
      }
      .apart-row-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
      }
      .apart-row-icon {
        width: 48px;
        height: 48px;
        background: rgba(93, 187, 100, 0.12);
        display: grid;
        place-items: center;
        color: var(--teal-d);
      }
      .apart-row-icon svg {
        width: 24px;
        height: 24px;
      }
      .apart-row-num {
        font-family: var(--display);
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
        letter-spacing: 0.08em;
        padding: 4px 10px;
        background: var(--paper);
        border: 1px solid var(--line);
      }
      .ar-body {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .ar-body h3 {
        margin-top: 4px;
        font-size: clamp(20px, 1.8vw, 24px);
        font-weight: 700;
        color: var(--deep);
        line-height: 1.25;
      }
      .ar-body p {
        margin-top: 12px;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.65;
        flex: 1;
      }
      .ar-pill-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 24px;
        padding-top: 18px;
        border-top: 1px dashed var(--line);
      }
      .ar-pill {
        font-family: var(--display);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--navy);
        background: var(--paper);
        padding: 4px 10px;
      }
      @media (max-width: 1000px) {
        .ben-head {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .aud-body {
          grid-template-columns: 1fr;
          gap: 28px;
        }
        .apart-list {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      @media (max-width: 680px) {
        .apart-head {
          flex-direction: column;
          align-items: flex-start;
        }
        .ben-track,
        .aud-track {
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      /* ---------- photos + motion ---------- */

      /* photo media + hero */
      .hero {
        color: #fff;
      }
      .hero-bg {
        z-index: 0;
      }
      .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: kenburns 26s ease-in-out infinite alternate;
      }
      .hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(3, 15, 77, 0.5),
          rgba(3, 15, 77, 0.3) 42%,
          rgba(3, 15, 77, 0.72)
        );
      }
      @keyframes kenburns {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.09);
        }
      }
      .hero-in {
        z-index: 2;
      }
      .hero h1 {
        color: #fff;
      }
      .hero-lead {
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
      }
      .pcard .thumb img,
      .ccard .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .cmp-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .cmp-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 42%,
          rgba(3, 15, 77, 0.72)
        );
        z-index: 0;
      }
      .cmp-media .cap {
        z-index: 1;
      }
      .soil-media .bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .imp-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      /* scroll reveal */
      .reveal-up {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
          transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .reveal-up.in {
        opacity: 1;
        transform: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal-up {
          opacity: 1 !important;
          transform: none !important;
        }
        .hero-bg img {
          animation: none;
        }
      }

      /* ---------- more sections ---------- */

      /* our solution */
      .solution {
        background: #fff;
        padding: 44px 0 48px;
        border-bottom: 1px solid var(--line);
      }
      .solution .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
      }
      .sol-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .sol-header h2 {
        font-family: var(--display);
        font-size: clamp(24px, 2.5vw, 34px);
        font-weight: 700;
        color: var(--deep);
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin: 0;
      }
      .sol-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .sol-content p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.68;
        margin: 0;
        max-width: 90ch;
      }
      .sol-callout {
        background: linear-gradient(135deg, rgba(93, 187, 100, 0.05) 0%, rgba(3, 15, 77, 0.02) 100%);
        border: 1px solid rgba(93, 187, 100, 0.22);
        border-left: 3.5px solid var(--teal);
        border-radius: 4px;
        padding: 16px 20px;
        box-shadow: 0 2px 10px rgba(3, 15, 77, 0.03);
        max-width: 90ch;
      }
      .sol-callout p {
        color: var(--deep);
        font-family: var(--body);
        font-weight: 500;
        font-size: 14.5px;
        line-height: 1.62;
        margin: 0;
      }
      @media (max-width: 860px) {
        .solution {
          padding: 34px 0 38px;
        }
        .sol-header h2 {
          font-size: 24px;
        }
      }
      /* precision farming */
      .pfarm {
        background: var(--paper);
      }
      .pf-lead {
        text-align: center;
        max-width: 620px;
        margin: 0 auto 52px;
      }
      .pf-lead .kicker {
        display: flex;
        justify-content: center;
      }
      .pf-lead h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 700;
        color: var(--deep);
      }
      .pf-lead p {
        margin-top: 16px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.7;
      }
      .pf-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .pf-card {
        background: #fff;
        border: 1px solid var(--line);
        padding: 30px 28px;
        display: flex;
        flex-direction: column;
      }
      .pf-card h3 {
        font-size: 21px;
        font-weight: 600;
        color: var(--deep);
      }
      .pf-sub {
        margin-top: 10px;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.6;
      }
      .pf-inner {
        margin-top: 24px;
        border: 1px solid var(--line);
        padding: 22px 22px 24px;
        background: #fbfcfe;
        flex: 1;
      }
      .pf-inner-h {
        font-family: var(--display);
        font-weight: 600;
        color: var(--deep);
        font-size: 15px;
        margin-bottom: 16px;
      }
      .pf-m {
        padding: 12px 0;
        border-top: 1px solid var(--line);
      }
      .pf-m:first-of-type {
        border-top: none;
        padding-top: 0;
      }
      .pf-m-t {
        display: flex;
        justify-content: space-between;
        font-size: 12.5px;
        color: var(--muted);
      }
      .pf-m-v {
        font-family: var(--display);
        font-weight: 700;
        font-size: 22px;
        color: var(--deep);
        margin-top: 2px;
      }
      .pf-gauge {
        display: flex;
        justify-content: center;
      }
      .pf-gauge svg {
        max-width: 240px;
      }
      .pf-legend {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 12px;
        flex-wrap: wrap;
      }
      .pf-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
      }
      .pf-legend i {
        width: 9px;
        height: 9px;
        display: inline-block;
      }
      .pf-big {
        font-family: var(--display);
        font-weight: 800;
        font-size: 32px;
        color: var(--deep);
        display: flex;
        align-items: baseline;
        gap: 12px;
      }
      .pf-up {
        font-size: 13px;
        font-weight: 600;
        color: var(--teal-d);
      }
      .pf-bars {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
      }
      .pf-bar {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: 12px;
        align-items: center;
        font-size: 13px;
        color: var(--muted);
      }
      .pf-bar .track {
        height: 10px;
        background: var(--line);
        display: block;
      }
      .pf-bar .fill {
        height: 10px;
        background: var(--teal);
        display: block;
      }
      .pf-note {
        margin-top: 18px;
        font-size: 13px;
        color: var(--muted);
        border-top: 1px solid var(--line);
        padding-top: 14px;
      }
      /* proven impact */
      .imp-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 44px;
        align-items: start;
        margin-bottom: 0;
      }
      .imp-head h2 {
        margin-top: 18px;
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 700;
        color: var(--deep);
      }
      .imp-copy p {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.7;
      }
      .imp-copy p + p {
        margin-top: 16px;
      }
      .imp-band {
        position: relative;
        margin-top: 48px;
        padding-bottom: 130px;
      }
      .imp-bg {
        position: absolute;
        left: 0;
        right: 0;
        top: 120px;
        bottom: 0;
        z-index: 0;
        overflow: hidden;
      }
      .imp-bg svg {
        width: 100%;
        height: 100%;
      }
      .imp-stats {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: #fff;
        border: 1px solid var(--line);
      }
      .imp-stats > div {
        padding: 44px 32px 40px;
        border-left: 1px solid var(--line);
      }
      .imp-stats > div:first-child {
        border-left: none;
      }
      .imp-stats .n {
        font-family: var(--display);
        font-weight: 800;
        font-size: clamp(34px, 4vw, 52px);
        color: var(--deep);
        line-height: 1;
      }
      .imp-stats .l {
        margin-top: 14px;
        font-size: 14px;
        color: var(--muted);
      }
      .imp-foot {
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-top: 40px;
      }
      @media (max-width: 1000px) {
        .sol-head,
        .imp-head {
          grid-template-columns: 1fr;
          gap: 22px;
        }
        .sol-grid,
        .pf-grid {
          grid-template-columns: 1fr;
        }
        .imp-stats {
          grid-template-columns: 1fr 1fr;
        }
        .imp-stats > div:nth-child(3) {
          border-left: none;
        }
      }
      @media (max-width: 680px) {
        .imp-stats {
          grid-template-columns: 1fr;
        }
        .imp-stats > div {
          border-left: none;
          border-top: 1px solid var(--line);
        }
        .imp-stats > div:first-child {
          border-top: none;
        }
        .imp-bg {
          display: none;
        }
      }

      /* ---------- new sections ---------- */

      /* soil / overview section */
      .soil {
        background: #fff;
        padding: 44px 0 48px;
        border-bottom: 1px solid var(--line);
      }
      .soil .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
      }
      .soil-overview {
        display: grid;
        grid-template-columns: 1fr 1.08fr;
        gap: 36px 48px;
        align-items: center;
      }
      .soil-overview .kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 14px;
      }
      .soil-overview .kicker::before {
        content: "";
        width: 20px;
        height: 2px;
        background: var(--teal);
        border-radius: 1px;
      }
      .soil-overview h2 {
        font-family: var(--display);
        font-size: clamp(26px, 2.7vw, 36px);
        font-weight: 700;
        color: var(--deep);
        line-height: 1.22;
        letter-spacing: -0.02em;
        margin: 0;
      }
      .soil-overview-text {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .soil-overview-text p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.68;
        margin: 0;
      }
      .soil-quote {
        background: linear-gradient(135deg, rgba(93, 187, 100, 0.05) 0%, rgba(3, 15, 77, 0.02) 100%);
        border: 1px solid rgba(93, 187, 100, 0.22);
        border-left: 3.5px solid var(--teal);
        border-radius: 4px;
        padding: 16px 20px;
        box-shadow: 0 2px 10px rgba(3, 15, 77, 0.03);
      }
      .soil-quote p {
        color: var(--deep);
        font-family: var(--body);
        font-weight: 500;
        font-size: 14.5px;
        line-height: 1.62;
        margin: 0;
      }
      @media (max-width: 860px) {
        .soil {
          padding: 34px 0 38px;
        }
        .soil-overview {
          grid-template-columns: 1fr;
          gap: 22px;
        }
      }
      .soil-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid var(--line);
      }
      .soil-feat-card {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 0;
        padding: 24px 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: border-color 0.2s ease;
      }
      .soil-feat-card:hover {
        border-color: var(--teal);
      }
      .soil-feat-card .f-num {
        font-family: var(--display);
        font-weight: 700;
        font-size: 12px;
        color: var(--teal-d);
        background: rgba(93, 187, 100, 0.14);
        border-radius: 0;
        padding: 3px 8px;
        align-self: flex-start;
      }
      .soil-feat-card h4 {
        font-family: var(--display);
        font-size: 16.5px;
        font-weight: 700;
        color: var(--deep);
        margin: 2px 0 0;
      }
      .soil-feat-card p {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.6;
        margin: 0;
      }
      /* connected systems */
      .conn-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .ccard {
        border: 1px solid var(--line);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        transition: border-color 0.2s ease;
      }
      .ccard:hover {
        border-color: var(--teal);
      }
      .ccard .thumb {
        aspect-ratio: 16/10;
        overflow: hidden;
        border-radius: 0;
      }
      .ccard .thumb svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ccard .body {
        padding: 22px 24px 28px;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .ccard .tag {
        align-self: flex-start;
        font-family: var(--display);
        font-weight: 600;
        font-size: 12px;
        color: var(--teal-d);
        border: 1px solid rgba(93, 187, 100, 0.45);
        border-radius: 0;
        padding: 5px 12px;
      }
      .ccard h3 {
        font-size: 19px;
        font-weight: 600;
        color: var(--deep);
      }
      .ccard p {
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.6;
      }
      /* faq */
      .faq {
        background: var(--paper);
      }
      .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 56px;
        align-items: start;
      }
      .faq-lead h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 700;
        color: var(--deep);
      }
      .faq-lead p {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.7;
        margin-top: 18px;
        max-width: 34ch;
      }
      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .faq-item {
        background: #fff;
        border: 1px solid var(--line);
      }
      .faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;
        padding: 22px 26px;
        font-family: var(--display);
        font-weight: 600;
        font-size: 16.5px;
        color: var(--deep);
      }
      .faq-ico {
        position: relative;
        width: 18px;
        height: 18px;
        flex: none;
      }
      .faq-ico::before,
      .faq-ico::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: var(--teal-d);
        transition:
          transform 0.25s ease,
          opacity 0.25s ease;
      }
      .faq-ico::before {
        width: 16px;
        height: 2px;
        transform: translate(-50%, -50%);
      }
      .faq-ico::after {
        width: 2px;
        height: 16px;
        transform: translate(-50%, -50%);
      }
      .faq-item.open .faq-ico::after {
        transform: translate(-50%, -50%) scaleY(0);
        opacity: 0;
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
      .faq-a p {
        padding: 0 26px 24px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.65;
        max-width: 60ch;
      }
      @media (max-width: 1000px) {
        .soil-overview,
        .faq-grid {
          grid-template-columns: 1fr;
          gap: 28px;
        }
        .soil-features {
          grid-template-columns: 1fr 1fr;
        }
        .conn-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 680px) {
        .soil-features {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 28px;
          padding-top: 20px;
        }
        .conn-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ---------- responsive ---------- */
      @media (max-width: 1000px) {
        .hero-in {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .hero-side {
          align-items: flex-start;
        }
        .intel-grid,
        .compare-grid {
          grid-template-columns: 1fr;
        }
        .prod-grid {
          grid-template-columns: 1fr 1fr;
        }
        .foot-cols {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .foot-cols .about {
          grid-column: 1/-1;
        }
      }
      @media (max-width: 680px) {
        .wrap {
          padding: 0 24px;
        }
        .nav-links {
          display: none;
        }
        .nav-cta {
          display: none;
        }
        .burger {
          display: flex;
        }
        .nav.open .nav-links {
          display: flex;
          position: absolute;
          top: 74px;
          left: 0;
          right: 0;
          flex-direction: column;
          background: var(--navy);
          padding: 10px 20px 20px;
          gap: 2px;
        }
        .section {
          padding: 66px 0;
        }
        .hero-in {
          padding: 56px 0 50px;
        }
        .cta-in {
          padding: 76px 0;
        }
        .metrics,
        .cmp-pair {
          grid-template-columns: 1fr;
        }
        .prod-grid {
          grid-template-columns: 1fr;
        }
        .foot-cols {
          grid-template-columns: 1fr 1fr;
        }
        .hero-metrics {
          gap: 24px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto;
        }
      }
    
/* === canonical header/footer === */
.site-nav,.sf{--black:#1e2158;--ink:#0B1220;--paper:#ffffff;--offwhite:#F7F8FA;--muted:#5B6472;--line:#E6E8EC;--radius:0px;--navy:#1e2158;--navy-2:#030F4D;--teal:#5DBB64;--teal-dark:#5DBB64;--teal2:#0FB5AE;--sun:#F2C94C;--sun2:#E0A92E;--pink:#F2A6C0;--cloud:#CFE3DE;--bird:#5B6472;--ink-soft:#5B6472;--line-grey:#C7CBD1}

    .site-nav nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 32px;
      max-width: 100% !important;
      margin: 0 !important;
      background: rgb(27 43 75 / 45%);
      -webkit-backdrop-filter: blur(5px) saturate(121%);
      backdrop-filter: blur(5px) saturate(121%);
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: background .3s ease, box-shadow .3s ease;
    }

    .logo {
      font-family: 'Inter';
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.03em;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .site-nav .logo {
      position: relative;
      height: 50px;
      width: 150px;
    }

    .site-nav .logo-img {
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: left center;
      transition: opacity .25s ease
    }


    .navlinks {
      display: flex;
      gap: 34px;
      font-size: 18px
    }

    .navlinks a {
      color: rgba(255, 255, 255, .92)
    }

    .navlinks a:hover {
      color: #fff
    }

    .navlinks a.active {
      color: #fff;
      font-weight: 700
    }
    .site-nav .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 44px;
      width: auto
    }

    .nav-badge {
      width: 45px;
      height: 54px;
      border-radius: 0%;
      background: var(--navy, #1B1464);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .02em;
      overflow: hidden
    }

    .nav-badge img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 1px;
      background: #fff
    }
    .site-nav .logo {
      position: relative
    }

    .site-nav .logo:hover .logo-preview {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1)
    }

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

      .site-nav .logo:hover .logo-preview {
        transform: none
      }
}
    .site-nav .logo {
      transition: transform .35s cubic-bezier(.22, 1, .36, 1);
      transform-origin: left center
    }
    @media (prefers-reduced-motion:reduce) {
      .site-nav .logo {
        transition: none
      }
}
    .nav-contact {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 18px;
      border-radius: 40px;
      padding: 11px 24px;
      background: var(--navy, #1B1464);
      color: #fff;
      transition: .2s;
      white-space: nowrap
    }

    .nav-contact:hover {
      background: #030F4D;
      transform: translateY(-1px)
    }
    .nav-burger {
      display: none;
      width: 44px;
      height: 44px;
      border: none;
      background: transparent;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      border-radius: 50%;
      transition: background .18s
    }

    .nav-burger:hover {
      background: var(--offwhite, #f4f5f2)
    }

    .nav-burger span {
      display: block;
      width: 22px;
      height: 2px;
      background: #1a1a1a;
      border-radius: 2px;
      transition: transform .3s, opacity .2s
    }

    body.mnav-open .nav-burger span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    body.mnav-open .nav-burger span:nth-child(2) {
      opacity: 0
    }

    body.mnav-open .nav-burger span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    body.mnav-open .mnav-overlay {
      opacity: 1;
      visibility: visible
    }

    body.mnav-open .mnav-panel {
      transform: translateX(0)
    }

    .mnav-sub a .mega-ic {
      width: 26px;
      height: 26px;
      border-radius: 7px
    }

    .mnav-sub a .mega-ic svg {
      width: 15px;
      height: 15px
    }

    @media (max-width:820px) {
      .nav-burger {
        display: inline-flex
      }

      .navbtns .nav-contact {
        display: none
      }
}

    .navbtns {
      display: flex;
      gap: 12px
    }
    .navbtns {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .role-opt.active {
      background: var(--navy);
      color: #fff
    }

    .st-av.active {
      width: 150px;
      height: 150px;
      opacity: 1;
      filter: none;
      border-color: #c9bff0;
      box-shadow: 0 20px 44px rgba(120, 100, 200, .22);
    }

    .csv-tab.active {
      color: var(--ink)
    }

    .csv-tab.active::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, #3b5bdb, #9b51e0, #d63384);
      border-radius: 2px
    }

    .csv-panel.active {
      display: block
    }

    @media (max-width:980px) {

      .navlinks {
        display: none
      }
}

    @media (max-width:560px) {

      nav .navbtns .btn span {
        display: none
      }
}

    .view.active {
      display: block
    }

    .site-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background: transparent;
      transition: transform .35s cubic-bezier(.4, 0, .2, 1)
    }

    .site-nav.nav-hidden {
      transform: translateY(-100%)
    }

    @media (prefers-reduced-motion:reduce) {
      .site-nav {
        transition: none
      }
}
    .has-mega {
      position: relative;
      display: inline-flex;
      align-items: center
    }

    .mega-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .mega-trigger .caret {
      width: 13px;
      height: 13px;
      transition: transform .25s
    }

    .has-mega:hover .mega-trigger .caret {
      transform: rotate(180deg)
    }
    .mega {
      position: absolute;
      left: 0;
      right: auto;
      top: calc(100% + 14px);
      width: max-content;
      min-width: 230px;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 24px 48px -20px rgba(0, 24, 70, .28);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .2s, transform .2s, visibility .2s;
      z-index: 60;
      overflow: hidden
    }

    .has-mega:hover .mega {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }
    .mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -14px;
      height: 14px
    }

    .mega-inner {
      max-width: none;
      margin: 0;
      padding: 8px;
      display: block
    }
    .mega-company {
      display: block
    }

    .mega-company .mega-h, .mega-h {
      display: none
    }

    .mega-row {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .mega-row .mega-item {
      align-items: center
    }

    .mega-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      transition: .15s;
      text-decoration: none
    }

    .mega-item:hover {
      background: var(--offwhite, #f4f5f2)
    }

    .mega-ic {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      color: #fff;
      box-shadow: none
    }

    .mega-ic svg {
      width: 17px;
      height: 17px
    }

    .mega-ic.i-journey {
      background: linear-gradient(135deg, #7c6cf0, #5b4bc4)
    }

    .mega-ic.i-team {
      background: linear-gradient(135deg, #4f9bff, #1f6feb)
    }

    .mega-ic.i-msg {
      background: linear-gradient(135deg, #34d399, #0a8f89)
    }

    .mega-ic.i-road {
      background: linear-gradient(135deg, #fbbf6b, #e0922a)
    }

    .mega-ic.i-first {
      background: linear-gradient(135deg, #f48fb1, #d23c79)
    }

    .mega-ic.i-offices {
      background: linear-gradient(135deg, #5fd0c9, #0a8f89)
    }

    .mega-ic.i-news {
      background: #1e2158
    }

    .mega-ic.i-life {
      background: #1e2158
    }

    .mega-tx {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      min-width: 0
    }

    .mega-tx b {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #1a1a1a
    }
    .mega-tx i {
      display: none
    }
    .mega-media2, .mega-media-center {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-width: none;
      margin: 0
    }

    .mega-feat {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      text-decoration: none;
      transition: .15s;
      text-align: left
    }

    .mega-feat:hover {
      background: var(--offwhite, #f4f5f2);
      transform: none
    }

    .mega-feat-pic, .mega-feat-tx, .mega-feat-go {
      display: none
    }

    .mega-feat-title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #1a1a1a;
      margin: 0
    }

    .mega-ic.i-journey {
      background: linear-gradient(135deg, #7c6cf0, #5b4bc4)
    }

    .mega-ic.i-team {
      background: linear-gradient(135deg, #4f9bff, #1f6feb)
    }

    .mega-ic.i-msg {
      background: linear-gradient(135deg, #34d399, #0a8f89)
    }

    .mega-ic.i-road {
      background: linear-gradient(135deg, #fbbf6b, #e0922a)
    }

    .mega-ic.i-first {
      background: linear-gradient(135deg, #f48fb1, #d23c79)
    }

    .mega-ic.i-offices {
      background: linear-gradient(135deg, #5fd0c9, #0a8f89)
    }

    .mega-ic.i-news {
      background: #1e2158
    }

    .mega-ic.i-life {
      background: #1e2158
    }

    .mega-tx {
      display: flex;
      flex-direction: column;
      line-height: 1.3;
      min-width: 0
    }

    .mega-tx b {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12.5px;
      color: #072b71
    }

    .mega-tx i {
      font-style: normal;
      font-size: 13px;
      color: var(--muted);
      margin-top: 3px
    }
    .mega-media2 {
      grid-template-columns: none
    }

    .mega-media-center {
      max-width: none;
      margin: 0
    }

    .mega-media-center .mega-feat {
      text-align: left
    }

    .mega-media-center .mega-feat-go {
      justify-content: flex-start
    }

    .mega-feat {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      border-radius: 8px;
      padding: 10px 14px;
      transition: .15s
    }

    .mega-feat:hover {
      transform: none;
      background: var(--offwhite, #f4f5f2)
    }

    .mega-feat-pic {
      display: none
    }

    .mega-feat-pic svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .mega-feat-title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #1a1a1a;
      margin: 0
    }

    .mega-feat-tx {
      display: none
    }

    .mega-feat-go {
      display: none
    }

    @media (max-width:1024px) {
      .mega-inner {
        grid-template-columns: 1fr
      }

      .mega-media2 {
        grid-template-columns: 1fr
      }
}

    @media (max-width:860px) {
      .has-mega .mega {
        display: none
      }
}

    #view-cases .logo {
      font-family: 'Inter';
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.03em
    }

    #view-cases .navlinks {
      display: flex;
      gap: 34px;
      font-size: 13px
    }

    #view-cases .navlinks a {
      color: #3a3a3a
    }

    #view-cases .navlinks a.active, #view-cases .navlinks a:hover {
      color: var(--black);
      font-weight: 600
    }

    #view-cases .navbtns {
      display: flex;
      gap: 12px
    }

    #view-cases .cs-seg-tab.active {
      color: #002671
    }

    #view-cases .cs-seg-tab.active::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 2.5px;
      background: #002671;
      border-radius: 3px
    }

    #view-cases .selectwrap svg.caret {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      stroke: #9a9a9a;
      pointer-events: none
    }

    #view-cases .selwrap .caret {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      stroke: #9a9a9a;
      pointer-events: none
    }

    @media (max-width:860px) {
      #view-cases .navlinks {
        display: none
      }
}

    #view-connections .logo {
      font-family: 'Inter';
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.03em
    }

    #view-connections .navlinks {
      display: flex;
      gap: 30px;
      font-size: 13px
    }

    #view-connections .navlinks a {
      color: #3a3a3a
    }

    #view-connections .navlinks a.active, #view-connections .navlinks a:hover {
      color: var(--black);
      font-weight: 600
    }

    #view-connections .navbtns {
      display: flex;
      gap: 12px
    }

    #view-connections .cn-tab.active {
      background: var(--black);
      color: #fff
    }

    #view-connections .selwrap .caret {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      stroke: #9a9a9a;
      fill: none;
      pointer-events: none
    }

    @media (max-width:900px) {
      #view-connections .navlinks {
        display: none
      }
}

    #view-casestudy .logo {
      font-family: 'Inter';
      font-weight: 800;
      font-size: 22px;
      letter-spacing: -0.03em
    }

    #view-casestudy .navlinks {
      display: flex;
      gap: 30px;
      font-size: 13px
    }

    #view-casestudy .navlinks a {
      color: #3a3a3a
    }

    #view-casestudy .navlinks a.active, #view-casestudy .navlinks a:hover {
      color: var(--black);
      font-weight: 600
    }

    #view-casestudy .navbtns {
      display: flex;
      gap: 12px
    }

    #view-casestudy .toc a.active {
      background: #eef0fb;
      color: var(--navy);
      font-weight: 600
    }

    #view-casestudy .toc a.active .n {
      color: var(--navy)
    }

    #view-casestudy .cstab.active {
      color: var(--ink)
    }

    #view-casestudy .cstab.active::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -1px;
      height: 2px;
      background: var(--ink)
    }

    #view-casestudy .bx-tier.active {
      border-color: var(--navy);
      box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
    }

    #view-casestudy .bx-tier.active .bx-tier-pick {
      background: #265700;
      color: #fff
    }

    #view-casestudy .bx-tier.active .bx-tier-detail {
      display: block;
      animation: bxExpand .22s ease
    }

    #view-casestudy .co-step.active {
      color: var(--navy)
    }

    #view-casestudy .co-step.active .dot {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff
    }

    @media (max-width:900px) {

      #view-casestudy .navlinks {
        display: none
      }
}

    #view-virtualme .vm-toggle-opt.active {
      background: #002671;
      color: #fff
    }

    #view-profile .pf-tab.active {
      background: #002671;
      color: #fff
    }

    #view-profile .pf-tab.active svg {
      stroke: #fff
    }

    #view-profile .pf-panel.active {
      display: block
    }

    #view-createcasestudy .cc-stg.active {
      background: #eae6fb;
      color: #5b4bc4
    }

    #view-createcasestudy .cc-stg.active .cc-stg-ic {
      border-color: #5b4bc4;
      color: #5b4bc4
    }

    #view-virtualme .cc-vm-sections .vm-toggle-opt.active {
      background: #002671;
      color: #fff
    }

    #view-virtualme .ccs-pill.active {
      background: #0d0d0d;
      color: #fff;
      border-color: #0d0d0d
    }

    .afn-card .thumb .logo {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 30px;
      letter-spacing: -.02em
    }

    .sblog-tab.active {
      color: var(--navy);
      border-bottom-color: var(--teal)
    }

    .off-dot.active {
      background: #fff;
      width: 22px;
      border-radius: 5px
    }

    .abt-tab.active {
      background: #fff;
      box-shadow: 0 2px 12px -6px rgba(0, 24, 70, .18)
    }

    .abt-tab.active .abt-tab-tx b {
      color: var(--navy)
    }

    .abt-tab.active .abt-tab-arr {
      color: var(--teal)
    }

    .abt-panel.active {
      display: block
    }

    .abt-tly.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    .abt-tl-slide.active {
      display: block
    }

    .tm-cell.active {
      flex: 3 1 0;
      filter: grayscale(0)
    }

    .tm-cell.active::after {
      opacity: 1
    }

    .tm-cell.active .tm-cell-tag {
      opacity: 1;
      transform: none
    }

    .cl-filter.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy)
    }

    @media (prefers-reduced-motion:reduce) {
      body.home-hero-nav .site-nav nav {
        transition: none;
      }
}

    .hero-menu a.active {
      color: var(--navy);
      font-weight: 700;
      border-bottom: 2px solid var(--teal);
    }

    .hx-menu a.active {
      border-color: var(--navy);
    }
    .sf {
      position: relative;
      background: linear-gradient(160deg, #06211b 0%, #0a332b 60%, #0d3b32 100%);
      padding: 0;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
    }

    .sf-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(50% 60% at 15% 0%, rgba(15, 181, 174, .16), transparent 65%),
        radial-gradient(40% 50% at 100% 100%, rgba(242, 201, 76, .08), transparent 70%);
    }

    .sf-card {
      position: relative;
      width: 100%;
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      background-color: #07161d;
      box-shadow: none;
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
    }
    .sf-media {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background-color: #07161d;
      
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
    }

    .sf-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
      pointer-events: none;
    }

    .sf-tint {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 24, 70, .6) 0%, rgba(0, 24, 70, .3) 45%, rgba(0, 24, 70, .75) 100%);
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .sf-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 24, 70, .3) 0%, rgba(0, 24, 70, .05) 45%, rgba(0, 24, 70, .45) 100%);
      pointer-events: none;
    }

    .sf-card.in {
      opacity: 1;
      transform: translateY(0);
    }

    .sf-top {
      position: relative;
      z-index: 1;
      background: transparent;
      display: flex;
      justify-content: space-between;
      gap: 32px;
      max-width: 1240px;
      margin: 0 auto;
      padding: clamp(42px, 7vw, 96px) clamp(22px, 5vw, 64px) 40px;
    }

    .sf-brand {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 250px;
      flex: 1 1 250px;
    }

    .sf-logo-plate {
      display: inline-flex;
      width: fit-content;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .51);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
      /*border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .3);*/
    }

    .sf-logo {
      height: 108px;
      width: auto;
      display: block;
      object-fit: contain;
    }

    .sf-tag {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .86);
      text-shadow: 0 3px 14px rgba(0, 0, 0, .32);
    }

    .sf-contact {
      margin: 2px 0 0;
      font-size: 13.5px;
      line-height: 1.9;
      color: rgba(255, 255, 255, .86);
    }

    .sf-contact a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, .95);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, .38);
      transition: color .2s, border-color .2s;
    }

    .sf-contact a svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .sf-contact a:hover {
      color: #fff;
      border-color: #fff;
    }

    .sf-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      padding: 10px 18px;
      border-radius: 999px;
      background: #fff;
      color: #10291f;
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      width: fit-content;
      transition: background .2s, transform .2s;
    }

    .sf-cta:hover {
      background: #eff9f4;
      transform: translateY(-2px);
    }

    .sf-cta svg {
      width: 13px;
      height: 13px;
      transition: transform .2s;
    }

    .sf-cta:hover svg {
      transform: translate(2px, -2px);
    }

    .sf-col {
      display: flex;
      flex-direction: column;
      min-width: 140px;
    }

    .sf-col h4 {
      margin: 0 0 16px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .72);
      text-shadow: 0 3px 14px rgba(0, 0, 0, .32);
    }

    .sf-col a {
      position: relative;
      display: block;
      width: fit-content;
      margin-bottom: 11px;
      font-size: 15px;
      color: rgba(255, 255, 255, .9);
      text-decoration: none;
      opacity: .88;
      text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
      transition: opacity .2s, color .2s;
    }

    .sf-col a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: #fff;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }

    .sf-col a:hover {
      opacity: 1;
      color: #fff;
    }

    .sf-col a:hover::after {
      transform: scaleX(1);
    }

    .sf-connect {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .sf-connect-icon {
      width: 0;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      overflow: hidden;
      transform: translateX(-6px) scale(.6);
      transition: opacity .25s ease, transform .25s ease, width .25s ease, margin-right .25s ease;
    }

    .sf-connect-icon svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: #fff;
    }

    .sf-connect--x .sf-connect-icon svg, .sf-connect--linkedin .sf-connect-icon svg, .sf-connect--youtube .sf-connect-icon svg {
      fill: #fff;
    }

    .sf-connect:hover .sf-connect-icon {
      width: 22px;
      margin-right: 9px;
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    .sf-connect--x .sf-connect-icon { background: #000; }
    .sf-connect--instagram .sf-connect-icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
    .sf-connect--linkedin .sf-connect-icon { background: #0a66c2; }
    .sf-connect--youtube .sf-connect-icon { background: #ff0000; }

    .sf-connect--x:hover { color: #fff; }
    .sf-connect--instagram:hover { color: #e1306c; }
    .sf-connect--linkedin:hover { color: #0a66c2; }
    .sf-connect--youtube:hover { color: #ff0000; }

    .sf-bottom {
      position: relative;
      z-index: 1;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      max-width: 1240px;
      margin: clamp(220px, 30vh, 360px) auto 0;
      padding: 24px clamp(22px, 5vw, 64px);
      border-top: 1px solid rgba(255, 255, 255, .22);
    }

    .sf-bottom p {
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, .82);
      text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
    }

    .sf-social {
      display: flex;
      gap: 12px;
    }

    .sf-social a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .18);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      transition: background .2s;
    }

    .sf-social a:hover {
      background: rgba(255, 255, 255, .3);
    }

    .sf-social a[aria-label="Facebook"]:hover {
      color: #1877f2;
    }

    .sf-social a[aria-label="Instagram"]:hover {
      color: #e1306c;
    }

    .sf-social a[aria-label="YouTube"]:hover {
      color: #ff0000;
    }

    .sf-social a[aria-label="Facebook"]:hover {
      color: #1877f2;
    }

    .sf-social a[aria-label="Instagram"]:hover {
      color: #e1306c;
    }

    .sf-social a[aria-label="YouTube"]:hover {
      color: #ff0000;
    }

    .sf-social svg {
      width: 15px;
      height: 15px;
    }

    @media (prefers-reduced-motion:reduce) {
      .sf-card {
        opacity: 1;
        transform: none;
        transition: none;
      }
}

    @media (max-width:760px) {
      .sf-top {
        flex-direction: column;
        padding: 36px 24px 28px;
        gap: 28px;
      }

      .sf-brand {
        max-width: none;
      }

      .sf-bottom {
        flex-direction: column;
        margin-top: 50px;
        padding: 20px 24px;
        text-align: center;
      }
}

    @media (max-width:480px) {
      .sf-media {
        background-position: center top;
      }

      .sf-video {
        object-position: center top;
      }

      .sf-top {
        gap: 22px;
      }
}

    @keyframes bxExpand {
      from {
        opacity: 0;
        transform: translateY(-4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }
.sf-card{opacity:1 !important;transform:none !important}