:root {
      --navy-900: #16233f;
      --navy-800: #1c2c4d;
      --navy-700: #233766;
      --blue-600: #3457a6;
      --blue-500: #4a6fc7;
      --ink: #16233f;
      --muted: #6b7488;
      --cream: #f6f7fb;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--ink);
    }

    h1,
    h2,
    h3,
    .font-display {
      font-family: 'Poppins', sans-serif;
    }

    .btn-primary {
      background: var(--navy-800);
      color: #fff;
      border-radius: 999px;
      padding: .85rem 1.6rem;
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-weight: 600;
      font-size: .95rem;
      transition: background .2s ease;
    }

    .btn-primary:hover {
      background: var(--blue-600);
    }

    .btn-outline {
      border: 1.5px solid var(--navy-800);
      color: var(--navy-800);
      border-radius: 999px;
      padding: .8rem 1.5rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-weight: 600;
      font-size: .95rem;
    }

    .pill {
      background: #ffffff;
      border: 1px solid rgba(22, 35, 63, .08);
      color: var(--navy-900);
      border-radius: 999px;
      padding: .4rem 1rem;
      font-size: .82rem;
      font-weight: 600;
      box-shadow: 0 10px 25px -12px rgba(22, 35, 63, .35);
    }

    .icon-circle {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--navy-800);
      color: #fff;
      flex-shrink: 0;
    }

    .card-shadow {
      box-shadow: 0 20px 45px -20px rgba(22, 35, 63, .25);
    }

    .nav-link {
      color: var(--navy-900);
      transition: color .2s ease;
    }

    .nav-link:hover {
      color: var(--blue-600);
    }

    .nav-link.active {
      color: var(--blue-600);
    }

    .section-eyebrow {
      color: var(--blue-600);
      font-weight: 600;
      letter-spacing: .02em;
      font-size: .85rem;
    }

    /* FAQ accordion */
    details>summary {
      list-style: none;
    }

    details>summary::-webkit-details-marker {
      display: none;
    }

    details .faq-plus {
      transition: transform .2s ease;
    }

    details[open] .faq-plus {
      transform: rotate(45deg);
    }

    /* Testimonial slider */
    .slider-track {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .slider-track::-webkit-scrollbar {
      display: none;
    }

    .slide {
      scroll-snap-align: center;
    }

    /* Services tabs */
    .no-scrollbar {
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .service-tab {
      color: var(--muted);
      border-bottom: 2px solid transparent;
      background: none;
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease;
    }

    .service-tab:hover {
      color: var(--navy-900);
    }

    .service-tab.active {
      color: var(--navy-900);
      border-bottom-color: var(--blue-600);
    }

    /* social icon */
    .social-icon {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      color: #fff;
      transition: background .2s ease;
    }

    .social-icon:hover {
      background: rgba(255, 255, 255, .18);
    }

    /* Partners marquee */
    .partners-track {
      display: flex;
      width: max-content;
      animation: partners-scroll 55s linear infinite;
    }

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

    @keyframes partners-scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .partners-fade {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }

    /* Testimonials marquee */
    .testimonials-track {
      display: flex;
      width: max-content;
      animation: testimonials-scroll 36s linear infinite;
    }

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

    @keyframes testimonials-scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .testimonials-fade {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }

    /* ============ Animations ============ */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes floatY {

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

      50% {
        transform: translateY(-8px);
      }
    }

    @keyframes hubPhotoFloat {

      0%,
      100% {
        transform: translate(-50%, -50%) translateY(0);
      }

      50% {
        transform: translate(-50%, -50%) translateY(-8px);
      }
    }

    @keyframes popIn {
      0% {
        opacity: 0;
        transform: scale(.85);
      }

      70% {
        opacity: 1;
        transform: scale(1.03);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* on-load entrance (hero) */
    .animate-fade-up {
      animation: fadeInUp .8s cubic-bezier(.16, .84, .44, 1) both;
    }

    .animate-fade-in {
      animation: fadeIn 1s ease both;
    }

    .delay-1 {
      animation-delay: .12s;
    }

    .delay-2 {
      animation-delay: .24s;
    }

    .delay-3 {
      animation-delay: .38s;
    }

    .delay-4 {
      animation-delay: .52s;
    }

    .delay-5 {
      animation-delay: .66s;
    }

    /* scroll-triggered reveals (see JS at bottom) */
    .reveal,
    .reveal-scale,
    .reveal-left,
    .reveal-right {
      transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1);
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
    }

    .reveal-scale {
      opacity: 0;
      transform: scale(.9);
    }

    .reveal-left {
      opacity: 0;
      transform: translateX(-40px);
    }

    .reveal-right {
      opacity: 0;
      transform: translateX(40px);
    }

    .reveal.in-view,
    .reveal-scale.in-view,
    .reveal-left.in-view,
    .reveal-right.in-view {
      opacity: 1;
      transform: none;
    }

    /* stagger children of a revealed group */
    .reveal-stagger>* {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s cubic-bezier(.16, .84, .44, 1), transform .6s cubic-bezier(.16, .84, .44, 1);
    }

    .reveal-stagger.in-view>* {
      opacity: 1;
      transform: none;
    }

    .reveal-stagger.in-view>*:nth-child(1) {
      transition-delay: .03s;
    }

    .reveal-stagger.in-view>*:nth-child(2) {
      transition-delay: .09s;
    }

    .reveal-stagger.in-view>*:nth-child(3) {
      transition-delay: .15s;
    }

    .reveal-stagger.in-view>*:nth-child(4) {
      transition-delay: .21s;
    }

    .reveal-stagger.in-view>*:nth-child(5) {
      transition-delay: .27s;
    }

    .reveal-stagger.in-view>*:nth-child(6) {
      transition-delay: .33s;
    }

    .reveal-stagger.in-view>*:nth-child(7) {
      transition-delay: .39s;
    }

    .reveal-stagger.in-view>*:nth-child(8) {
      transition-delay: .45s;
    }

    .reveal-stagger.in-view>*:nth-child(9) {
      transition-delay: .51s;
    }

    .reveal-stagger.in-view>*:nth-child(10) {
      transition-delay: .57s;
    }

    /* hover micro-interactions */
    .card-hover {
      transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease, border-color .35s ease;
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 55px -22px rgba(22, 35, 63, .4);
    }

    .icon-pop {
      transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    }

    .card-hover:hover .icon-pop {
      transform: scale(1.12) rotate(-6deg);
    }

    .btn-primary,
    .btn-outline {
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px -12px rgba(22, 35, 63, .45);
    }

    .btn-outline:hover {
      transform: translateY(-2px);
      background: var(--navy-800);
      color: #fff;
    }

    .btn-primary:active,
    .btn-outline:active {
      transform: scale(.96);
    }

    .social-icon {
      transition: background .25s ease, transform .25s ease;
    }

    .social-icon:hover {
      transform: translateY(-3px) scale(1.1);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background: var(--blue-600);
      transition: width .25s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    .hub-pill {
      transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease;
    }

    .hub-pill:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 18px 32px -14px rgba(22, 35, 63, .35);
    }

    .float-y {
      animation: floatY 5.5s ease-in-out infinite;
    }

    .pill-float {
      animation: fadeInUp .8s cubic-bezier(.16, .84, .44, 1) both, floatY 5.5s ease-in-out infinite 1s;
    }

    .stat-hover {
      transition: transform .3s ease, background .3s ease;
    }

    .stat-hover:hover {
      transform: translateY(-4px);
    }

    details {
      transition: background .3s ease;
    }

    .faq-plus {
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .hub-photo {
      animation: hubPhotoFloat 6s ease-in-out infinite;
    }

    /* opacity-only reveal, safe to combine with a transform-based animation (e.g. hub-photo) */
    .reveal-fade {
      opacity: 0;
      transition: opacity .8s ease;
    }

    .reveal-fade.in-view {
      opacity: 1;
    }

    input,
    textarea {
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    input:focus,
    textarea:focus {
      transform: translateY(-2px);
    }

    .btn-nav {
      background: var(--navy-800);
      color: #fff;
      border-radius: 999px;
      padding: .6rem 1.1rem;
      font-weight: 600;
      font-size: .82rem;
      white-space: nowrap;
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .btn-nav:hover {
      background: var(--blue-600);
      transform: translateY(-2px);
      box-shadow: 0 12px 22px -10px rgba(22, 35, 63, .4);
    }

    .btn-nav:active {
      transform: scale(.96);
    }