:root {
    --navy-950: #0A1130;
    --navy-900: #101B47;
    --navy-800: #14225D;
    --navy-700: #1D2F7A;
    --navy-glow: #2F49A8;
    --cream: #FAFAFA;
    --cream-dim: rgba(250, 250, 250, 0.88);
    --cream-faint: rgba(250, 250, 250, 0.16);
    --green: #59CD90;
    --green-hover: #74DBA4;
    --sage: #59CD90;
    --ink: #0A1130;
    --radius-pill: 999px;
    --font-display: "Newsreader", Georgia, serif;
    --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  }

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

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--font-ui);
    /* page now resolves to cream below the fold; the hero paints its own navy */
    background: var(--cream);
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  /* ---------- Hero shell ---------- */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 65%);
  }

  /* full-bleed video covering the entire hero */
  .hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--navy-950);
  }
  .hero-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    display: block;
    /* footage is bright and clinical, so pull it toward the brand navy */
    filter: brightness(0.84) saturate(0.8) contrast(1.04);
  }
  /* navy wash tints the footage, then a left-heavy gradient protects the copy */
  .hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
      /* held at ~0.55+ across the copy column for contrast, then falls away
         quickly so the right half of the footage reads clearly */
      linear-gradient(to right,
        rgba(10,17,48,0.88) 0%,
        rgba(10,17,48,0.80) 30%,
        rgba(10,17,48,0.56) 56%,
        rgba(10,17,48,0.12) 78%,
        rgba(10,17,48,0.18) 100%),
      linear-gradient(to top, rgba(10,17,48,0.72) 0%, transparent 32%),
      linear-gradient(to bottom, rgba(10,17,48,0.74) 0%, transparent 24%),
      linear-gradient(rgba(20,34,93,0.14), rgba(20,34,93,0.14));
  }

  /* subtle grain/texture */
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(250,250,250,0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }

  /* ---------- Utility bar ---------- */
  .utility {
    position: relative; z-index: 3;
    padding: 14px 48px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cream-dim);
    border-bottom: 1px solid rgba(250,250,250,0.08);
  }
  .utility a {
    color: inherit; text-decoration: none;
    transition: color 180ms ease;
  }
  .utility a:hover, .utility a:focus-visible { color: var(--cream); }
  /* matches the nav pill: same max-width, plus the pill's own inner padding */
  .utility-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 14px 0 28px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 28px;
  }
  .utility-links { display: flex; align-items: center; gap: 28px; }
  .utility-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* ---------- Nav ---------- */
  .nav-wrap {
    position: relative; z-index: 3;
    padding: 20px 48px 0;
  }
  .nav {
    max-width: 1320px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    padding: 12px 14px 12px 28px;
    border-radius: var(--radius-pill);
    background: rgba(10, 17, 48, 0.45);
    border: 1px solid rgba(250, 250, 250, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .brand {
    display: flex; align-items: center;
    text-decoration: none;
  }
  .brand-logo {
    height: 26px; width: auto; display: block;
    /* navy source logo rendered white */
    filter: brightness(0) invert(1);
  }

  .nav-links {
    display: flex; align-items: center; gap: 4px;
    list-style: none;
  }
  .nav-links a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 600;
    color: var(--cream-dim);
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
    cursor: pointer;
  }
  .nav-links a:hover, .nav-links a:focus-visible {
    color: var(--cream);
    background: rgba(250,250,250,0.08);
  }
  .nav-links svg { opacity: 0.6; }

  .nav-actions { display: flex; align-items: center; gap: 10px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .btn:focus-visible, a:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 2px;
  }
  .btn-ghost {
    color: var(--cream);
    border-color: rgba(250,250,250,0.25);
    background: transparent;
  }
  .btn-ghost:hover { background: rgba(250,250,250,0.1); border-color: rgba(250,250,250,0.45); }
  .btn-primary {
    background: var(--green);
    color: #0A1130;
    box-shadow: 0 8px 24px -8px rgba(89, 205, 144, 0.55);
  }
  .btn-primary:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(89, 205, 144, 0.65);
  }
  .btn-light {
    background: var(--cream);
    color: var(--ink);
  }
  .btn-light:hover { background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5); }
  .btn .arrow { transition: transform 200ms ease; }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ---------- Hero body ---------- */
  .hero-body {
    position: relative; z-index: 2;
    flex: 1;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 72px 48px 72px;
    display: flex;
    align-items: center;
  }

  .copy { max-width: 780px; }

  h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 4.1vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin-bottom: 26px;
    text-shadow: 0 2px 24px rgba(10,17,48,0.5);
  }
  /* keep the first line intact; phones may wrap it */
  .h1-line { white-space: nowrap; }
  @media (max-width: 760px) { .h1-line { white-space: normal; } }

  h1 em {
    font-style: italic;
    color: transparent;
    background: linear-gradient(100deg, #A9EFC7, var(--green));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .lede {
    font-size: 19px;
    line-height: 1.65;
    color: rgba(250, 250, 250, 0.95);
    max-width: 52ch;
    margin-bottom: 38px;
    text-shadow: 0 1px 12px rgba(10,17,48,0.6);
  }

  /* forced break is for wide screens only; phones wrap on their own */
  @media (max-width: 700px) { .lede br { display: none; } }

  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }
  .cta-row .btn { min-height: 54px; padding: 14px 30px; font-size: 16px; }

  /* proof strip */
  .proof {
    display: flex; align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding-top: 32px;
    border-top: 1px solid var(--cream-faint);
  }
  .stat { flex: 0 1 auto; max-width: 190px; }

  .proof-note {
    margin-top: 18px;
    max-width: 60ch;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(250, 250, 250, 0.62);
  }
  .stat .num {
    font-family: var(--font-display);
    font-size: 32px; font-weight: 500;
    color: var(--cream);
    display: block; line-height: 1.1;
  }
  .stat .label {
    font-size: 13px; font-weight: 600;
    color: var(--cream-dim);
    letter-spacing: 0.02em;
  }

  /* ---------- Audience band (transition out of the hero) ---------- */
  .audience {
    position: relative;
    overflow: hidden;
    /* tight to the hero so the cards land just under the Explore cue */
    padding: 30px 48px 34px;
    /* two colours only: hero navy straight through to cream */
    background: linear-gradient(180deg, var(--navy-950) 0%, var(--cream) 100%);
  }
  .audience-inner {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto;
  }
  .audience h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 33px);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--cream);
    margin-bottom: 22px;
  }

  .audience-frame {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(250,250,250,0.10);
    border: 1px solid rgba(250,250,250,0.22);
    box-shadow: 0 24px 60px -30px rgba(10,17,48,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .aud-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background: var(--navy-800);
    transform: translateZ(0);
  }
  .aud-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .aud-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,17,48,0.92) 12%, rgba(10,17,48,0.35) 48%, rgba(10,17,48,0.12) 100%);
  }
  .aud-card span {
    position: absolute; z-index: 2;
    left: 12px; right: 12px; bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(10,17,48,0.62);
    border: 1px solid rgba(250,250,250,0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--cream);
    font-size: 15px; font-weight: 700; line-height: 1.25;
    text-align: center;
  }

  
  @media (max-width: 1000px) {
    .audience { padding: 60px 24px 28px; }
    .audience-frame { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .audience { padding: 48px 20px 24px; }
    .audience-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
    .aud-card span { font-size: 13.5px; padding: 10px; left: 8px; right: 8px; bottom: 8px; }
  }

  /* ---------- Integrations: contained media card on cream ---------- */
  .integrations {
    background: var(--cream);
    padding: 34px 48px 80px;
  }
  .int-media {
    position: relative;
    overflow: hidden;
    max-width: 1320px;
    margin: 0 auto;
    min-height: 470px;
    border-radius: 26px;
    background: var(--navy-950);
    box-shadow: 0 40px 90px -50px rgba(10,17,48,0.65);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 26px;
    padding: 34px 0 26px;
  }
  .int-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .int-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.66) saturate(0.72) contrast(1.03);
  }
  .int-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(to right,
        rgba(10,17,48,0.90) 0%,
        rgba(10,17,48,0.78) 34%,
        rgba(10,17,48,0.42) 62%,
        rgba(10,17,48,0.24) 100%),
      linear-gradient(to bottom, rgba(10,17,48,0.30) 0%, transparent 26%, rgba(10,17,48,0.72) 100%);
  }

  .int-head {
    position: relative; z-index: 1;
    max-width: 660px;
    padding: 0 56px;
  }
  .int-eyebrow {
    display: inline-block;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--green);
    margin-bottom: 14px;
  }
  .int-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--cream);
    margin-bottom: 16px;
    text-shadow: 0 2px 22px rgba(10,17,48,0.55);
  }
  .int-head p {
    font-size: 17px; line-height: 1.6;
    color: rgba(250,250,250,0.94);
    text-shadow: 0 1px 12px rgba(10,17,48,0.6);
  }

  .marquee {
    position: relative; z-index: 1;
    overflow: hidden;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marquee 34s linear infinite;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  .int-card {
    flex: 0 0 auto;
    min-width: 224px;
    min-height: 88px;
    padding: 16px 26px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 9px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 12px 28px -16px rgba(0,0,0,0.5);
    text-align: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .int-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(0,0,0,0.6); }
  .int-logo {
    display: block;
    height: 38px; width: auto;
    max-width: 176px;
    object-fit: contain;
    margin: 0 auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
    .marquee-track [data-clone] { display: none; }
    .int-card:hover { transform: none; }
  }

  @media (max-width: 900px) {
    .integrations { padding: 26px 20px 64px; }
    .int-media { min-height: 440px; border-radius: 20px; padding: 36px 0 24px; }
    .int-head { padding: 0 28px; }
  }
  @media (max-width: 640px) {
    .int-media { min-height: 400px; }
    .int-card { min-width: 180px; min-height: 88px; padding: 16px 20px; }
    .int-logo { height: 34px; max-width: 146px; }
  }

  /* ---------- Mega dropdown ---------- */
  .nav { position: relative; }

  .nav-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 16px;
    border: 0; background: transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 15px; font-weight: 600;
    color: var(--cream-dim);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
  }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"] {
    color: var(--cream);
    background: rgba(250,250,250,0.08);
  }
  .nav-trigger svg { opacity: 0.6; transition: transform 220ms ease; }
  .nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }

  .mega {
    position: absolute;
    top: calc(100% + 12px); left: 0; right: 0;
    z-index: 20;
    background: var(--cream);
    color: var(--navy-950);
    border-radius: 26px;
    box-shadow: 0 40px 80px -30px rgba(10,17,48,0.55);
    padding: 40px 48px 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .mega[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .mega .mega-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700;
    color: var(--navy-800);
    text-decoration: none;
    border-bottom: 2px solid rgba(89,205,144,0.9);
    padding-bottom: 3px;
    transition: color 180ms ease, border-color 180ms ease;
  }
  .mega .mega-all:hover { color: #2C7C55; border-color: #2C7C55; }

  .mega h3 {
    font-family: var(--font-ui);
    font-size: clamp(17px, 1.4vw, 20px); font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--navy-800);
    white-space: nowrap;
  }

  .mega-shot {
    margin-top: 22px;
    margin-bottom: 22px;
    max-width: 340px;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E3E7F0;
    padding: 8px;
  }
  .mega-shot img { display: block; width: 100%; height: auto; }

  .mega--duo { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .sol-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 20px 0;
    text-decoration: none;
  }
  /* the line between the two solutions */
  .sol-card + .sol-card { border-top: 1px solid #DFE4EF; }

  .sol-shot {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E3E7F0;
    padding: 7px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
  .sol-shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
  .sol-card:hover .sol-shot {
    border-color: rgba(89,205,144,0.75);
    box-shadow: 0 14px 28px -16px rgba(10,17,48,0.32);
  }

  .sol-body { display: block; }
  .sol-name {
    display: block;
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy-800);
    margin-bottom: 7px;
  }
  .sol-desc {
    display: block;
    font-size: 14.5px; line-height: 1.55;
    color: #4A5578;
    margin-bottom: 14px;
    max-width: 56ch;
  }
  /* same green rule as "Explore the platform" */
  .sol-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 700;
    color: var(--navy-800);
    border-bottom: 2px solid rgba(89,205,144,0.9);
    padding-bottom: 3px;
    transition: color 180ms ease, border-color 180ms ease;
  }
  .sol-card:hover .sol-link { color: #2C7C55; border-color: #2C7C55; }

  @media (max-width: 1100px) { .sol-card { grid-template-columns: minmax(0, 1fr); } }

  .mega--stack { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mega--stack .mega-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    padding-bottom: 4px;
  }
  .mega--stack h3 { white-space: normal; max-width: none; }
  .mega-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0 40px;
  }
  .mega-cols--single {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    max-width: none;
  }
  .mega-cols--single a:last-child { border-bottom: 0; }
  .mega-cols--single a > span:first-child { max-width: 720px; }

  .mega-cols a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    border-bottom: 1px solid #E3E7F0;
    font-size: 16px; font-weight: 600;
    color: var(--navy-950);
    text-decoration: none;
    transition: background-color 160ms ease, padding-left 160ms ease;
  }
  .row-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 24px;
    flex: 0 0 auto;
    font-size: 13px; font-weight: 700;
    color: var(--navy-800);
    border-bottom: 2px solid rgba(89,205,144,0.9);
    padding-bottom: 2px;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .mega-cols a:hover .row-more { color: #2C7C55; border-color: #2C7C55; }

  .mega-cols a:hover { background: rgba(20,34,93,0.05); padding-left: 20px; }
  .mega-cols:not(.mega-cols--single) a:nth-child(3n) { border-bottom: 0; }
  .mega-cols svg { flex: 0 0 auto; color: #7A85A6; }

  .mega-list { display: flex; flex-direction: column; align-self: start; }
  .mega-list a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    border-bottom: 1px solid #E3E7F0;
    font-size: 16px; font-weight: 600;
    color: var(--navy-950);
    text-decoration: none;
    transition: background-color 160ms ease, padding-left 160ms ease;
  }
  .mega-list a:last-child { border-bottom: 0; }
  .mega-list a:hover { background: rgba(20,34,93,0.05); padding-left: 20px; }
  .mega .sub {
    display: block;
    font-size: 13px; font-weight: 500;
    color: #6B7699;
    margin-top: 2px;
  }
  .mega-list a svg { flex: 0 0 auto; color: #7A85A6; }

  @media (prefers-reduced-motion: reduce) {
    .mega, .nav-trigger svg, .mega-list a { transition: none; }
  }
  @media (max-width: 1100px) { .mega { display: none; } }

  /* ---------- Platform module tabs ---------- */
  .platform {
    background: var(--cream);
    color: var(--navy-950);
    padding: 12px 48px 40px;
  }
  .plat-head { max-width: 980px; margin: 0 auto 34px; text-align: center; }
  .plat-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.6vw, 38px);
    white-space: nowrap;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--navy-800);
    margin-bottom: 14px;
  }
  .plat-head p { font-size: 17px; line-height: 1.6; color: #4A5578; }

  .plat-wrap {
    max-width: 1320px; margin: 0 auto;
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    align-items: stretch;
  }
  .plat-tabs { grid-column: 1; grid-row: 1; }
  .plat-panel { grid-column: 2; grid-row: 1; }

  .plat-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;          /* rail runs the full height of the panel */
    padding: 10px 0;
    background: #FFFFFF;
    border: 1px solid #E3E7F0;
    border-right: 0;
    border-radius: 18px 0 0 18px;
  }
  .plat-tab {
    width: 100%;
    flex: 1 1 0;                  /* tabs share the rail evenly, no dead space */
    min-height: 56px;
    padding: 14px 24px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 15.5px; font-weight: 600;
    color: #5A6485;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .plat-tab:hover { color: var(--navy-800); }
  .plat-tab[aria-selected="true"] {
    background: transparent;
    border-left-color: var(--green);
    color: var(--navy-800);
    font-weight: 700;
  }
  .plat-tab:focus-visible { outline: 3px solid #2C7C55; outline-offset: -3px; }

  .plat-panel { padding: 0; }
  /* caption rides the bottom edge of the shot */
  /* this clip frames its subject low, so show the bottom of the frame */
  #panel-eqrequests video { object-position: 50% 100%; }

  /* longest caption of the six, widened so it lands on three lines, not four */
  #panel-eqbudgeting .plat-text { max-width: 58ch; }

  .plat-more {
    position: absolute; z-index: 2;
    top: 16px; right: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px;
    border-radius: var(--radius-pill);
    background: rgba(10,17,48,0.5);
    border: 1px solid rgba(250,250,250,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cream);
    font-size: 13.5px; font-weight: 700;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
  }
  .plat-more:hover { background: rgba(10,17,48,0.72); border-color: var(--green); }
  .plat-more svg { transition: transform 180ms ease; }
  .plat-more:hover svg { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .plat-more, .plat-more svg { transition: none; } }
  @media (max-width: 640px) { .plat-more { top: 10px; right: 10px; padding: 7px 13px; font-size: 12.5px; } }

  .plat-caption {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 0 48px 42px;
    color: var(--cream);
  }
  .plat-for {
    display: block;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--green);
    margin-bottom: 12px;
  }
  .plat-text {
    display: block;
    max-width: 44ch;
    font-family: var(--font-display);
    font-size: clamp(19px, 1.9vw, 27px);
    font-weight: 400; line-height: 1.38;
    letter-spacing: -0.005em;
    color: var(--cream);
    text-shadow: 0 2px 18px rgba(10,17,48,0.6);
  }
  .plat-shot::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    border-radius: 0 17px 17px 0;
    background:
      linear-gradient(to top,
        rgba(10,17,48,0.94) 0%,
        rgba(10,17,48,0.86) 26%,
        rgba(10,17,48,0.46) 50%,
        rgba(10,17,48,0.10) 72%,
        rgba(10,17,48,0.04) 100%),
      linear-gradient(rgba(20,34,93,0.34), rgba(20,34,93,0.34));
  }
  .plat-shot {
    position: relative;
    /* left edge meets the rail's rule */
    border-radius: 0 18px 18px 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E3E7F0;
    border-left: 0;
    padding: 0;
    box-shadow: 0 30px 60px -40px rgba(10,17,48,0.5);
  }
  .plat-shot video,
  .plat-shot img {
    display: block;
    filter: brightness(0.82) saturate(0.7) contrast(1.04);
    width: 100%;
    aspect-ratio: 16 / 7;
    height: auto;
    object-fit: cover;
    object-position: 50% 0;
    border-radius: 0 17px 17px 0;
  }

  @media (max-width: 760px) { .plat-head h2 { white-space: normal; } }

  @media (max-width: 900px) {
    .platform { padding: 8px 20px 32px; }
    .plat-wrap { grid-template-columns: minmax(0, 1fr); }
    .plat-tabs {
      grid-column: 1; grid-row: 1;
      flex-direction: row;
      overflow-x: auto;
      scrollbar-width: none;
      align-self: start;
      padding: 0;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #DFE4EF;
      border-radius: 0;
    }
    .plat-tabs::-webkit-scrollbar { display: none; }
    .plat-panel { grid-column: 1; grid-row: 2; }
    .plat-tab {
      width: auto; flex: 0 0 auto;
      border-left: 0; border-bottom: 3px solid transparent;
      min-height: 48px;
      font-size: 14px; padding: 12px 16px;
      border-radius: 12px 12px 0 0;
      border-right: 1px solid transparent; border-bottom: 0;
    }
    .plat-tab[aria-selected="true"] { border-bottom-color: var(--green); }
    .plat-shot { border-radius: 0 0 18px 18px; border-left: 1px solid #E3E7F0; border-top: 0; }
    .plat-shot video, .plat-shot img { border-radius: 0 0 17px 17px; }
    .plat-caption { padding: 0 22px 26px; }
    .plat-text { font-size: 17px; max-width: none; }
  }

  /* ---------- Closing assessment CTA ---------- */
  .assess {
    background: var(--cream);
    padding: 0 48px 88px;
  }
  /* contained card, same wrapper treatment as the integrations section */
  .assess-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 84px 48px 88px;
    border-radius: 26px;
    background: #FFFFFF;
    border: 1px solid #E3E7F0;
    box-shadow: 0 30px 70px -46px rgba(10,17,48,0.35);
    color: var(--navy-950);
    text-align: left;
  }
  .assess h2 {
    color: var(--navy-800);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
  }
  .assess p {
    font-size: 17.5px; line-height: 1.65;
    color: #4A5578;
    max-width: 68ch;
    margin: 0 0 32px;
  }
  .assess .btn { min-height: 54px; padding: 14px 30px; font-size: 16px; }

  @media (max-width: 640px) {
    .assess { padding: 0 20px 64px; }
    .assess-inner { padding: 56px 24px 60px; border-radius: 20px; }
    .assess p { font-size: 16px; }
  }

  /* ---------- Footer ---------- */
  .site-foot {
    background: var(--navy-950);
    color: var(--cream);
    padding: 84px 48px 48px;
  }
  .foot-inner { max-width: 1320px; margin: 0 auto; }
  .foot-cols {
    --foot-col-h: 208px;   /* height of the Platform column: heading plus six links */
    /* each block sizes to its own content and space-between spreads the slack
       evenly, so every gutter reads the same regardless of link length */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 44px 40px;
    padding-bottom: 72px;
  }
  .foot-brand { flex: 0 0 230px; width: 230px; }
  /* content-sized, but long link labels still wrap rather than
     stretching the row past its width */
  .foot-col { flex: 0 0 auto; max-width: 190px; }
  .foot-col.foot-contact { max-width: none; }
  /* the product shot sits straight on the navy, no card behind it */
  /* the block spans exactly the Platform column: shot top level with its
     heading, Explore link level with the last link under it */
  .foot-brand {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    height: var(--foot-col-h);
  }
  .foot-shot { margin: 0; flex: 1 1 auto; min-height: 0; max-width: 100%; }
  .foot-shot img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left top; }
  .foot-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 700;
    color: var(--cream);
    text-decoration: none;
    border-bottom: 2px solid rgba(89,205,144,0.9);
    padding-bottom: 3px;
    transition: color 180ms ease, border-color 180ms ease;
  }
  .foot-all:hover { color: var(--green); border-color: var(--green); }
  .foot-all svg { transition: transform 180ms ease; }
  .foot-all:hover svg { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .foot-all, .foot-all svg { transition: none; } }

  .foot-col h3 {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 18px;
  }
  .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  .foot-col a {
    font-size: 14.5px; font-weight: 500;
    color: rgba(250,250,250,0.82);
    text-decoration: none;
    transition: color 160ms ease;
  }
  .foot-col a:hover, .foot-col a:focus-visible { color: var(--cream); }

  .foot-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-mail + .foot-mail { margin-top: -11px; }
  .foot-col a.foot-cta {
    min-height: 46px; padding: 12px 30px;
    color: var(--ink);
    font-size: 15px; font-weight: 700;
  }
  .foot-col a.foot-cta:hover { color: var(--ink); }
  .foot-mail { font-size: 14.5px; font-weight: 600; color: rgba(250,250,250,0.82); text-decoration: none; }
  .foot-mail:hover { color: var(--cream); }
  .foot-socials { display: flex; align-items: center; gap: 10px; }
  .foot-social {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 9px;
    background: rgba(250,250,250,0.1);
    border: 1px solid rgba(250,250,250,0.16);
    color: var(--cream);
    transition: background-color 160ms ease, border-color 160ms ease;
  }
  .foot-social:hover { background: rgba(89,205,144,0.2); border-color: rgba(89,205,144,0.6); }

  .foot-base {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(250,250,250,0.12);
  }
  .foot-logo { height: 78px; width: auto; display: block; filter: brightness(0) invert(1); }
  .foot-legal { text-align: right; }
  .foot-legal p { font-size: 13px; line-height: 1.7; color: rgba(250,250,250,0.62); }
  .foot-legal a { color: rgba(250,250,250,0.82); text-decoration: none; }
  .foot-legal a:hover { color: var(--cream); }

  @media (max-width: 1100px) {
    .foot-cols { justify-content: flex-start; gap: 40px 56px; }
    .foot-brand { height: auto; flex: 0 0 100%; width: auto; }
    .foot-shot img { height: auto; width: 100%; max-width: 300px; }
  }
  @media (max-width: 640px) {
    .site-foot { padding: 64px 20px 40px; }
    .foot-cols { gap: 32px 36px; padding-bottom: 48px; }
    .foot-base { flex-direction: column; align-items: flex-start; }
    .foot-legal { text-align: left; }
    .foot-logo { height: 52px; }
  }

  /* ---------- Book a demo modal ---------- */
  .cal-panel:focus, .cal-panel:focus-visible { outline: none; }
  .cal-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
  .cal-modal[hidden] { display: none; }
  .cal-backdrop { position: absolute; inset: 0; background: rgba(10,17,48,0.68); backdrop-filter: blur(3px); }
  .cal-panel {
    position: relative;
    width: min(1040px, 100%);
    background: transparent;
    box-shadow: none;
  }
  .cal-mount { min-width: 320px; height: min(700px, 88vh); }

  /* scroll hint */
  .scroll-hint {
    position: absolute; z-index: 3;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cream-dim);
    text-decoration: none;
  }
  .scroll-hint svg { animation: nudge 2s ease-in-out infinite; }
  @keyframes nudge { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} }

  @media (prefers-reduced-motion: reduce) {
    .scroll-hint svg { animation: none; }
    .btn, .btn .arrow { transition: none; }
  }

  /* ---------- Responsive ---------- */
  .menu-toggle { display: none; }

  @media (max-width: 1100px) {
    .nav-links { display: none; }
    .menu-toggle {
      display: grid; place-items: center;
      width: 46px; height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(250,250,250,0.25);
      background: transparent; color: var(--cream);
      cursor: pointer;
    }
  }
  @media (max-width: 900px) {
    /* on narrow screens the footage sits behind the copy, so deepen the scrim */
    .hero-bg::after {
      background:
        linear-gradient(to bottom, rgba(10,17,48,0.8) 0%, rgba(10,17,48,0.68) 100%),
        linear-gradient(rgba(20,34,93,0.18), rgba(20,34,93,0.18));
    }
  }
  @media (max-width: 640px) {
    .utility { display: none; }
    .nav-wrap { padding: 16px 20px 0; }
    .nav { padding: 10px 10px 10px 20px; }
    /* the hero's own CTAs carry conversion here, so the nav collapses to the menu */
    .nav-actions .btn { display: none; }
    .hero-body { padding: 56px 20px 88px; }
    h1 { font-size: clamp(40px, 11vw, 52px); }
    .lede { font-size: 17px; }
    .proof { flex-wrap: wrap; gap: 24px; }
    .scroll-hint { display: none; }
  }

  /* ---------- Sticky nav ---------- */
  /* The pill leaves flow once you scroll past it; .nav-spacer holds its place.
     The second selector outweighs .page-head .nav-wrap in platform.css. */
  .nav-wrap.is-stuck,
  .page-head .nav-wrap.is-stuck {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    padding: 10px 48px;
    background: rgba(10, 17, 48, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(250, 250, 250, 0.10);
  }
  .nav-wrap.is-stuck .nav {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  @media (max-width: 1060px) {
    .nav-wrap.is-stuck,
    .page-head .nav-wrap.is-stuck { padding: 10px 20px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-wrap.is-stuck { animation: navDrop 200ms ease both; }
    @keyframes navDrop {
      from { transform: translateY(-100%); }
      to   { transform: translateY(0); }
    }
  }

  /* what an assessment hands back, under its caption */
  .plat-gets {
    display: block;
    margin-top: 14px;
    max-width: 52ch;
    font-family: var(--font-ui);
    font-size: 14.5px; line-height: 1.55;
    color: rgba(250,250,250,0.86);
    text-shadow: 0 1px 10px rgba(10,17,48,0.7);
  }
  .plat-gets b { color: var(--cream); font-weight: 700; }
  @media (max-width: 640px) { .plat-gets { font-size: 13.5px; } }