@font-face {
          font-family: 'Manrope';
          src: url('fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
          font-weight: 100 900;
          font-display: swap;
        }

        @font-face {
          font-family: 'IBM Plex Serif';
          src: url('fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
        }

        @font-face {
          font-family: 'IBM Plex Serif';
          src: url('fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.ttf') format('truetype');
          font-weight: 500;
          font-style: normal;
          font-display: swap;
        }

        @font-face {
          font-family: 'IBM Plex Serif';
          src: url('fonts/IBM_Plex_Serif/IBMPlexSerif-Light.ttf') format('truetype');
          font-weight: 300;
          font-style: normal;
          font-display: swap;
        }

        :root {
          --bg-soft-blue: #EEF7FF;
          --main-blue: #2F8BF4;
          --accent-blue: #0057FF;
          --deep-navy: #17182A;
          --glass-fill: rgba(255, 255, 255, 0.58);
          --glass-border: rgba(255, 255, 255, 0.65);
          --cta-globe-scale: 1;
          --cta-globe-shift-x: 50%;
          --cta-globe-shift-y: 120px;
          --cta-globe-canvas-opacity: 0.78;
          --cta-globe-canvas-brightness: 1.59;
          --cta-globe-canvas-contrast: 1.5;
          --cta-globe-canvas-saturate: 0.42;
          --cta-globe-aura-opacity: 0.2;

          --color-primary-50: #eef8ff;
          --color-primary-100: #d9eeff;
          --color-primary-200: #bce3ff;
          --color-primary-300: #8ed2ff;
          --color-primary-400: #59b9ff;
          --color-primary-500: #339bfe;
          --color-primary-600: #2581f4;
          --color-primary-700: #1565e0;
          --color-primary-800: #1851b5;
          --color-primary-900: #19478f;
          --color-primary-950: #142c57;
          --qpayroll-app-canvas: #f6f7f9;
          --qpayroll-border: #dfe4ea;
          --qpayroll-muted: #f1f3f6;
          --qpayroll-card-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.04);
          --qpayroll-control-shadow: 0 1px 2px rgb(15 23 42 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.75);
          --qpayroll-shell-shadow: 0 18px 60px rgb(15 23 42 / 0.16);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: 'IBM Plex Serif', serif;
        }

        h1 span,
        h2 span,
        h3 span,
        h4 span,
        h5 span,
        h6 span,
        .text-gradient {
          font-family: 'Manrope', sans-serif;
        }

        body {
          font-family: 'Manrope', sans-serif;
          background-color: #000000;
          color: var(--deep-navy);
          overflow-x: hidden;
          overflow-y: hidden;
          min-height: 100vh;
        }

        body.scroll-ready {
          overflow-y: auto;
        }

        .glass-card {
          background: var(--glass-fill);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid var(--glass-border);
          border-radius: 24px;
        }

        .bg-layer {
          position: fixed;
          inset: 0;
          z-index: -4;
          pointer-events: none;
          transition: opacity 2.4s ease-in-out;
        }

        .bg-black {
          background: #000000;
          z-index: -5;
        }

        .bg-dawn {
          background: linear-gradient(180deg, #0A1128 0%, #16204A 55%, #223E77 100%);
          opacity: 0;
        }

        .bg-sunrise {
          background:
            radial-gradient(130% 120% at 50% 0%, #5DA3EA 0%, #9EC7F1 36%, #D8EAFB 72%, #FFFFFF 100%);
          opacity: 0;
        }

        .bg-vignette {
          position: fixed;
          inset: 0;
          z-index: -3;
          pointer-events: none;
          opacity: 0;
          transition: opacity 2.8s ease-in-out;
          background: radial-gradient(circle at center, transparent 42%, rgba(10, 17, 40, 0.15) 120%);
        }

        body.state-dawn .bg-dawn {
          opacity: 1;
        }

        body.state-sunrise .bg-dawn {
          opacity: 0;
        }

        body.state-sunrise .bg-sunrise,
        body.state-sunrise .bg-vignette {
          opacity: 1;
        }

        .text-gradient {
          background: linear-gradient(90deg, #2F8BF4 0%, #005DE8 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .pill-button {
          border-radius: 999px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .screen {
          opacity: 0;
          visibility: hidden;
          position: absolute;
          inset: 0;
        }

        .screen.active {
          opacity: 1;
          visibility: visible;
          position: relative;
        }

        .app-title {
          opacity: 0;
          position: absolute;
        }

        .anim-hide {
          opacity: 0;
          visibility: hidden;
        }

        .anim-zero {
          opacity: 0;
        }

        .app-window-shadow {
          box-shadow: var(--qpayroll-shell-shadow), 0 0 0 1px rgba(15, 23, 42, 0.04);
        }

        .app-scroll::-webkit-scrollbar {
          width: 4px;
          height: 4px;
          display: block;
        }

        .app-scroll::-webkit-scrollbar-track {
          background: transparent;
        }

        .app-scroll::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 4px;
        }

        .step-item {
          transition: opacity 0.3s ease;
        }

        .step-item.active {
          opacity: 1;
        }

        .step-item.inactive {
          opacity: 0.4;
        }

        /* Only shift the text horizontally when active, not the tracker */
        .step-item.active h3,
        .step-item.active p {
          transform: translateX(10px);
        }

        .step-item h3,
        .step-item p {
          transition: transform 0.3s ease;
        }

        .ui-table th,
        .ui-table td {
          border-bottom: 1px solid #edf0f4;
        }

        .ui-table tr:last-child td {
          border-bottom: none;
        }



        .dashed-dropzone {
          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23CBD5E1' stroke-width='1.5' stroke-dasharray='7%2c 7' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
          border-radius: 10px;
        }

        #how-it-works .qpayroll-surface {
          border: 1px solid var(--qpayroll-border);
          background: #ffffff;
          box-shadow: var(--qpayroll-card-shadow);
        }

        #how-it-works .qpayroll-control {
          border: 1px solid var(--qpayroll-border);
          background: #ffffff;
          box-shadow: var(--qpayroll-control-shadow);
        }

        #how-it-works .qpayroll-status {
          border: 1px solid var(--qpayroll-border);
          border-radius: 0.5rem;
          box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
        }

        #how-it-works input[type="checkbox"] {
          accent-color: var(--color-primary-600);
        }

        #how-it-works .screen-1 h2,
        #how-it-works .screen-2 h1,
        #how-it-works .screen-2 h3,
        #how-it-works .screen-3 h1,
        #how-it-works .screen-3 h2,
        #how-it-works .screen-3 h3 {
          font-family: 'Manrope', sans-serif;
        }

        .how-mobile {
          position: relative;
          height: 235svh;
          background:
            radial-gradient(circle at 50% 0%, rgba(191, 219, 254, 0.42), transparent 34rem),
            linear-gradient(180deg, #f8fbff 0%, #f6f7f9 100%);
        }

        @media (max-width: 767px) {
          #how-it-works {
            overflow: visible;
          }
        }

        .how-mobile-sticky {
          position: sticky;
          top: 0;
          min-height: 740px;
          min-height: 100svh;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          padding: 2.75rem 1.25rem 2.25rem;
          overflow: hidden;
        }

        .how-mobile-panel {
          min-height: 740px;
          min-height: 100svh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 4.75rem 1.25rem 3rem;
        }

        .how-mobile-panel .how-mobile-kicker,
        .how-mobile-panel h2,
        .how-mobile-panel .how-mobile-progress,
        .how-mobile-panel .how-mini-app,
        .how-mobile-panel .how-mobile-copy {
          opacity: 0;
          transform: translateY(1.2rem);
          transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .how-mobile-panel.is-visible .how-mobile-kicker,
        .how-mobile-panel.is-visible h2,
        .how-mobile-panel.is-visible .how-mobile-progress,
        .how-mobile-panel.is-visible .how-mini-app,
        .how-mobile-panel.is-visible .how-mobile-copy {
          opacity: 1;
          transform: translateY(0);
        }

        .how-mobile-panel.is-visible h2 {
          transition-delay: 80ms;
        }

        .how-mobile-panel.is-visible .how-mobile-progress {
          transition-delay: 140ms;
        }

        .how-mobile-panel.is-visible .how-mini-app {
          transition-delay: 180ms;
        }

        .how-mobile-panel.is-visible .how-mobile-copy {
          transition-delay: 280ms;
        }

        .how-mobile-kicker {
          margin-bottom: 0.75rem;
          color: #64748b;
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }

        .how-mobile h2 {
          margin: 0 0 1.2rem;
          color: #0f172a;
          font-family: 'IBM Plex Serif', serif;
          font-size: clamp(2.15rem, 11vw, 2.95rem);
          font-weight: 400;
          line-height: 1.02;
          letter-spacing: 0;
        }

        .how-mobile h2 span {
          color: var(--color-primary-600);
          font-family: 'Manrope', sans-serif;
          font-weight: 700;
        }

        .how-mobile-step {
          display: grid;
          grid-template-columns: 1.25rem minmax(0, 1fr);
          gap: 1rem;
          align-items: center;
        }

        .how-mobile-stage,
        .how-mobile-copy-stack {
          position: relative;
          grid-column: 2;
        }

        .how-mobile-stage {
          min-height: 18.5rem;
        }

        .how-mobile-scene {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          opacity: 0;
          transform: translateY(0.9rem) scale(0.985);
          pointer-events: none;
          transition: opacity 360ms ease, transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .how-mobile-scene.is-active {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
        }

        .how-mobile-copy-stack {
          min-height: 9.6rem;
          padding-top: 1rem;
        }

        .how-mobile-copy-stack .how-mobile-copy {
          position: absolute;
          inset: 1rem 0 auto;
          grid-column: auto;
          padding-top: 0;
          opacity: 0;
          transform: translateY(0.75rem);
          transition: opacity 300ms ease, transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .how-mobile-copy-stack .how-mobile-copy.is-active {
          opacity: 1;
          transform: translateY(0);
        }

        .how-mobile-progress {
          align-self: stretch;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
        }

        .how-mobile-progress span {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 999px;
          background: #dbe4ef;
        }

        .how-mobile-progress span.is-active {
          height: 4.5rem;
          background: var(--color-primary-600);
        }

        .how-mobile-progress span.is-done {
          background: #93c5fd;
        }

        .how-mini-app {
          width: min(100%, 20.5rem);
          margin: 0 auto;
          overflow: hidden;
          border: 1px solid rgba(203, 213, 225, 0.78);
          border-radius: 1.25rem;
          background: #ffffff;
          box-shadow: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.1);
        }

        .how-mobile-scene.is-active .how-mini-app {
          animation: howMiniRise 460ms ease both;
        }

        .how-mini-topbar {
          display: grid;
          grid-template-columns: repeat(3, 0.45rem) 1fr;
          align-items: center;
          gap: 0.32rem;
          height: 2.2rem;
          padding: 0 0.9rem;
          border-bottom: 1px solid #e2e8f0;
          background: #ffffff;
        }

        .how-mini-topbar span {
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 999px;
          background: #dbe4ef;
        }

        .how-mini-topbar strong {
          justify-self: center;
          padding-right: 1.35rem;
          color: #475569;
          font-size: 0.66rem;
          font-weight: 700;
        }

        .how-mini-body {
          min-height: 16rem;
          padding: 0;
          background: #f6f7f9;
        }

        .how-mobile-visual {
          min-height: 16rem;
        }

        .fade-in {
          opacity: 1 !important;
          visibility: visible !important;
        }

        .fade-out {
          opacity: 0 !important;
          visibility: hidden !important;
        }

        .slide-up {
          transform: translateY(0) !important;
          opacity: 1 !important;
        }

        .slide-down {
          transform: translateY(10px) !important;
          opacity: 0 !important;
        }

        .transition-all-slow {
          transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fill-bar {
          height: 100%;
          width: 0%;
          border-radius: 2px;
          background-color: #cbd5e1;
          transition: width 0.4s ease-out;
        }

        .progress-fill {
          width: 0%;
          transition: width 1.5s ease-in-out;
        }

        .spinner {
          width: 12px;
          height: 12px;
          border: 2px solid rgb(255 255 255 / 0.3);
          border-top-color: #ffffff;
          border-radius: 999px;
          animation: howMobileSpin 1s linear infinite;
        }

        @keyframes howMobileSpin {
          to {
            transform: rotate(360deg);
          }
        }

        .how-mini-profile,
        .how-mini-review,
        .how-mini-final {
          height: 100%;
          min-height: 13.95rem;
          border: 1px solid #e2e8f0;
          border-radius: 1rem;
          background: #ffffff;
          box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.06);
        }

        .how-mini-profile {
          padding: 0.9rem;
        }

        .how-mini-row {
          display: flex;
          justify-content: space-between;
          gap: 1rem;
          padding: 0.65rem 0;
          border-bottom: 1px solid #f1f5f9;
          color: #0f172a;
        }

        .how-mini-row small,
        .how-mini-summary small,
        .how-mini-metrics small {
          color: #64748b;
          font-size: 0.62rem;
          font-weight: 600;
        }

        .how-mini-row b {
          font-size: 0.72rem;
        }

        .how-mini-upload {
          display: flex;
          align-items: center;
          gap: 0.7rem;
          margin-top: 0.9rem;
          padding: 0.7rem;
          border: 1px solid #bfdbfe;
          border-radius: 0.85rem;
          background: #eff6ff;
        }

        .how-mobile-panel.is-visible .how-mini-row,
        .how-mobile-panel.is-visible .how-mini-upload {
          animation: howMiniRise 560ms ease both;
        }

        .how-mobile-panel.is-visible .how-mini-row:nth-child(1) {
          animation-delay: 260ms;
        }

        .how-mobile-panel.is-visible .how-mini-row:nth-child(2) {
          animation-delay: 380ms;
        }

        .how-mobile-panel.is-visible .how-mini-row:nth-child(3) {
          animation-delay: 500ms;
        }

        .how-mobile-panel.is-visible .how-mini-upload {
          animation-delay: 660ms;
        }

        .how-mini-upload div {
          display: grid;
          place-items: center;
          width: 2.2rem;
          height: 2.2rem;
          border-radius: 0.7rem;
          background: #ffffff;
          color: var(--color-primary-600);
        }

        .how-mini-upload svg {
          width: 1rem;
          height: 1rem;
        }

        .how-mini-upload p {
          min-width: 0;
          margin: 0;
        }

        .how-mini-upload b,
        .how-mini-upload span {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .how-mini-upload b {
          color: #0f172a;
          font-size: 0.75rem;
        }

        .how-mini-upload span {
          color: #64748b;
          font-size: 0.65rem;
        }

        .how-mini-review {
          padding: 0.8rem;
        }

        .how-mini-summary {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.45rem;
          margin-bottom: 0.75rem;
        }

        .how-mini-summary p {
          margin: 0;
          padding: 0.55rem 0.45rem;
          border: 1px solid #e2e8f0;
          border-radius: 0.7rem;
          background: #f8fafc;
        }

        .how-mini-summary b {
          display: block;
          margin-top: 0.2rem;
          color: #0f172a;
          font-size: 0.64rem;
        }

        .how-mini-check {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.8rem;
          margin-top: 0.45rem;
          padding: 0.65rem 0.7rem;
          border-radius: 0.75rem;
          color: #334155;
          font-size: 0.72rem;
        }

        .how-mini-check span {
          border-radius: 999px;
          padding: 0.18rem 0.45rem;
          font-size: 0.6rem;
          font-weight: 800;
        }

        .how-mini-check.is-ok {
          background: #f8fafc;
        }

        .how-mini-check.is-ok span {
          background: #dcfce7;
          color: #15803d;
        }

        .how-mini-check.is-fixed {
          background: #fffbeb;
        }

        .how-mini-check.is-fixed span {
          background: #dbeafe;
          color: var(--color-primary-700);
        }

        .how-mini-ready {
          margin-top: 0.7rem;
          border-radius: 0.75rem;
          background: var(--color-primary-600);
          padding: 0.7rem;
          color: #ffffff;
          font-size: 0.72rem;
          font-weight: 800;
          text-align: center;
        }

        .how-mobile-panel.is-visible .how-mini-summary p,
        .how-mobile-panel.is-visible .how-mini-check,
        .how-mobile-panel.is-visible .how-mini-ready {
          animation: howMiniRise 520ms ease both;
        }

        .how-mobile-panel.is-visible .how-mini-summary p:nth-child(1) {
          animation-delay: 240ms;
        }

        .how-mobile-panel.is-visible .how-mini-summary p:nth-child(2) {
          animation-delay: 340ms;
        }

        .how-mobile-panel.is-visible .how-mini-summary p:nth-child(3) {
          animation-delay: 440ms;
        }

        .how-mobile-panel.is-visible .how-mini-check:nth-of-type(1) {
          animation-delay: 560ms;
        }

        .how-mobile-panel.is-visible .how-mini-check:nth-of-type(2) {
          animation-delay: 680ms;
        }

        .how-mobile-panel.is-visible .how-mini-check:nth-of-type(3) {
          animation-delay: 800ms;
        }

        .how-mobile-panel.is-visible .how-mini-ready {
          animation: howMiniPulse 650ms ease both;
          animation-delay: 940ms;
        }

        .how-mini-final {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 1rem;
          text-align: center;
        }

        .how-mini-success {
          display: grid;
          place-items: center;
          width: 3.1rem;
          height: 3.1rem;
          margin-bottom: 0.65rem;
          border: 1px solid #bbf7d0;
          border-radius: 999px;
          background: #f0fdf4;
          color: #16a34a;
        }

        .how-mini-success svg {
          width: 1.45rem;
          height: 1.45rem;
        }

        .how-mini-final h3 {
          margin: 0 0 0.3rem;
          color: #0f172a;
          font-size: 1rem;
          font-weight: 800;
        }

        .how-mini-final p {
          max-width: 13rem;
          margin: 0 0 0.8rem;
          color: #64748b;
          font-size: 0.68rem;
          line-height: 1.45;
        }

        .how-mini-metrics,
        .how-mini-actions {
          display: grid;
          width: 100%;
          gap: 0.5rem;
        }

        .how-mini-metrics {
          grid-template-columns: repeat(2, 1fr);
          margin-bottom: 0.55rem;
        }

        .how-mini-metrics span,
        .how-mini-actions span {
          border: 1px solid #e2e8f0;
          border-radius: 0.72rem;
          background: #f8fafc;
          padding: 0.55rem;
          font-size: 0.66rem;
          font-weight: 800;
          color: #0f172a;
        }

        .how-mini-metrics small {
          display: block;
          margin-bottom: 0.18rem;
        }

        .how-mini-actions {
          grid-template-columns: repeat(3, 1fr);
        }

        .how-mobile-panel.is-visible .how-mini-success,
        .how-mobile-panel.is-visible .how-mini-final h3,
        .how-mobile-panel.is-visible .how-mini-final p,
        .how-mobile-panel.is-visible .how-mini-metrics span,
        .how-mobile-panel.is-visible .how-mini-actions span {
          animation: howMiniRise 520ms ease both;
        }

        .how-mobile-panel.is-visible .how-mini-success {
          animation: howMiniPop 640ms cubic-bezier(0.2, 0.9, 0.2, 1.25) both;
          animation-delay: 240ms;
        }

        .how-mobile-panel.is-visible .how-mini-final h3 {
          animation-delay: 380ms;
        }

        .how-mobile-panel.is-visible .how-mini-final p {
          animation-delay: 480ms;
        }

        .how-mobile-panel.is-visible .how-mini-metrics span:nth-child(1) {
          animation-delay: 620ms;
        }

        .how-mobile-panel.is-visible .how-mini-metrics span:nth-child(2) {
          animation-delay: 720ms;
        }

        .how-mobile-panel.is-visible .how-mini-actions span:nth-child(1) {
          animation-delay: 860ms;
        }

        .how-mobile-panel.is-visible .how-mini-actions span:nth-child(2) {
          animation-delay: 960ms;
        }

        .how-mobile-panel.is-visible .how-mini-actions span:nth-child(3) {
          animation-delay: 1060ms;
        }

        @keyframes howMiniRise {
          from {
            opacity: 0;
            transform: translateY(0.85rem) scale(0.98);
          }

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

        @keyframes howMiniPop {
          from {
            opacity: 0;
            transform: scale(0.68);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        @keyframes howMiniPulse {
          0% {
            opacity: 0;
            transform: translateY(0.85rem) scale(0.98);
          }

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

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

        .how-mobile-copy {
          grid-column: 2;
          padding-top: 1rem;
        }

        .how-mobile-copy span {
          display: inline-flex;
          margin-bottom: 0.4rem;
          color: var(--color-primary-600);
          font-size: 0.72rem;
          font-weight: 800;
        }

        .how-mobile-copy h3 {
          margin: 0 0 0.45rem;
          color: #0f172a;
          font-family: 'IBM Plex Serif', serif;
          font-size: 1.45rem;
          font-weight: 600;
          line-height: 1.12;
        }

        .how-mobile-copy p {
          margin: 0;
          color: #64748b;
          font-size: 0.88rem;
          line-height: 1.55;
        }

        @media (max-height: 740px) and (max-width: 767px) {
          .how-mobile-sticky {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
          }

          .how-mobile-panel {
            padding-top: 3.75rem;
            padding-bottom: 2.25rem;
          }

          .how-mobile h2 {
            margin-bottom: 0.8rem;
            font-size: clamp(1.8rem, 9.4vw, 2.35rem);
          }

          .how-mobile-stage {
            min-height: 19.25rem;
          }

          .how-mini-app {
            width: min(100%, 17.35rem);
          }

          .how-mini-body {
            min-height: 12rem;
            padding: 0.65rem;
          }

          .how-mini-profile,
          .how-mini-review,
          .how-mini-final {
            min-height: 10.7rem;
          }

          .how-mini-summary {
            gap: 0.35rem;
            margin-bottom: 0.5rem;
          }

          .how-mini-summary p {
            padding: 0.45rem 0.35rem;
          }

          .how-mini-check {
            margin-top: 0.35rem;
            padding: 0.5rem 0.55rem;
          }

          .how-mini-ready {
            margin-top: 0.5rem;
            padding: 0.58rem;
          }

          .how-mobile-copy {
            padding-top: 0.75rem;
          }

          .how-mobile-copy h3 {
            font-size: 1.25rem;
          }

          .how-mobile-copy p {
            font-size: 0.8rem;
            line-height: 1.45;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .how-mobile-panel .how-mobile-kicker,
          .how-mobile-panel h2,
          .how-mobile-panel .how-mobile-progress,
          .how-mobile-panel .how-mini-app,
          .how-mobile-panel .how-mobile-copy {
            opacity: 1;
            transform: none;
            transition: none;
          }

          .how-mobile-panel.is-visible .how-mini-row,
          .how-mobile-panel.is-visible .how-mini-upload,
          .how-mobile-panel.is-visible .how-mini-summary p,
          .how-mobile-panel.is-visible .how-mini-check,
          .how-mobile-panel.is-visible .how-mini-ready,
          .how-mobile-panel.is-visible .how-mini-success,
          .how-mobile-panel.is-visible .how-mini-final h3,
          .how-mobile-panel.is-visible .how-mini-final p,
          .how-mobile-panel.is-visible .how-mini-metrics span,
          .how-mobile-panel.is-visible .how-mini-actions span {
            animation: none;
          }
        }

        /* Hide scrollbar */
        ::-webkit-scrollbar {
          display: none;
        }

        .loader {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 120;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
        }

        body.loader-complete .loader {
          opacity: 0;
          transform: translate(-50%, -58%) scale(0.95);
          filter: blur(10px);
          pointer-events: none;
        }

        .floating-ui {
          box-shadow: 0 20px 40px rgba(0, 87, 255, 0.08);
        }

        .mockup-container {
          perspective: 1000px;
        }

        .hero-shell {
          position: relative;
          min-height: 100vh;
          overflow: hidden;
        }

        .hero-shell::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at 50% 18%, rgba(80, 160, 255, 0.18), transparent 34%);
          opacity: 0;
          transition: opacity 2s ease;
          pointer-events: none;
        }

        body.state-sunrise .hero-shell::before {
          opacity: 1;
        }

        .hero-shell::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -1px;
          height: 260px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.82) 76%, #ffffff 100%);
          pointer-events: none;
          z-index: 3;
          opacity: 0;
          transition: opacity 1.8s ease;
        }

        body.state-sunrise .hero-shell::after {
          opacity: 1;
        }

        .center-loader-mark {
          box-shadow: 0 12px 36px rgba(0, 87, 255, 0.22);
        }

        .anim-nav,
        .anim-hero {
          opacity: 0;
          filter: blur(10px);
          transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.3s ease;
        }

        .anim-nav {
          transform: translateY(-20px);
        }

        .anim-hero {
          transform: translateY(36px);
        }

        #main-header {
          color: rgba(255, 255, 255, 0.88);
          will-change: transform, opacity;
          transform: translate3d(0, 0, 0);
          backface-visibility: hidden;
        }

        #header-shell {
          color: inherit;
          padding-top: 1rem;
          transition:
            padding-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            padding-bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            color 0.18s ease;
        }

        #main-header .nav-link,
        #main-header #header-demo-btn {
          color: inherit;
        }

        #main-header .nav-link:hover,
        #main-header #header-demo-btn:hover {
          color: #ffffff;
        }

        #main-header.scrolled {
          color: #6b7280;
        }

        #main-header.scrolled .nav-link:hover,
        #main-header.scrolled #header-demo-btn:hover {
          color: #17182A;
        }

        #header-shell.scrolled {
          padding-top: 0.625rem;
          padding-bottom: 0.625rem;
        }

        body.hero-reveal .anim-nav,
        body.hero-reveal .anim-hero {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }

        .delay-1 {
          transition-delay: 0.12s;
        }

        .delay-2 {
          transition-delay: 0.28s;
        }

        .delay-3 {
          transition-delay: 0.46s;
        }

        .delay-4 {
          transition-delay: 0.68s;
        }

        .delay-5 {
          transition-delay: 0.9s;
        }

        .atmospheric-clouds {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -70px;
          height: 760px;
          pointer-events: none;
          overflow: hidden;
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
          -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
          z-index: 2;
        }

        .cloud-blob {
          position: absolute;
          border-radius: 999px;
          background: radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.18) 44%, rgba(255, 255, 255, 0) 74%);
          filter: blur(52px);
          opacity: 0;
          transition: opacity 2.4s ease;
        }

        body.state-sunrise .cloud-blob {
          opacity: 1;
        }

        .cloud-1 {
          width: 860px;
          height: 600px;
          left: -180px;
          bottom: -120px;
        }

        .cloud-2 {
          width: 1020px;
          height: 720px;
          right: -240px;
          bottom: -180px;
        }

        .cloud-3 {
          width: 700px;
          height: 460px;
          left: 16%;
          bottom: 30px;
        }

        .cloud-4 {
          width: 980px;
          height: 520px;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          filter: blur(38px);
        }

        body.state-sunrise .cloud-3 {
          opacity: 0.86;
        }

        body.state-sunrise .cloud-4 {
          opacity: 0.92;
        }

        .hero-dashboard-wrap {
          position: relative;
          z-index: 2;
        }

        body.state-sunrise .hero-title {
          color: #FFFFFF;
        }

        .scroll-story-track {
          position: relative;
          width: 100%;
          min-height: 500vh;
          background: linear-gradient(180deg, #ffffff 0%, #f8fbff 52%, #eef7ff 100%);
          overflow: clip;
        }

        .scroll-story-pinned {
          position: relative;
          width: 100%;
          height: 100vh;
          overflow: hidden;
        }

        .scroll-scene-text {
          will-change: transform, opacity, filter;
        }

        .no-select {
          -webkit-user-select: none;
          user-select: none;
        }

        .scroll-visual-layer {
          z-index: 10;
        }

        .scroll-text-layer {
          z-index: 20;
          pointer-events: none;
        }

        @media (max-width: 767px) {
          .scroll-story-track {
            min-height: 380vh;
          }

          .s1-group {
            bottom: 3.75rem;
            height: 42%;
            max-width: 24rem;
          }

          .s1-connector-map {
            display: block !important;
            top: 2.55rem;
            height: 8.25rem;
            max-width: 22rem;
          }

          .s1-dept-row {
            display: block !important;
            top: 5.85rem;
            max-width: 22rem;
          }

          .s1-dept-row .s1-dept {
            padding: 0.3rem 0.55rem;
            font-size: 0.5rem;
          }

          .s1-workforce-cluster {
            top: 10.25rem;
            bottom: auto;
            gap: 0.45rem;
            transform: scale(0.88);
            transform-origin: top center;
          }

          .s2-group {
            margin-top: 5.5rem;
          }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
          .s1-group {
            bottom: 7rem;
            height: 43%;
            max-width: 36rem;
          }

          .s1-connector-map {
            height: 10.75rem;
            max-width: 34rem;
          }

          .s1-dept-row {
            top: 5.25rem;
            max-width: 34rem;
          }

          .s1-workforce-cluster {
            top: 10.75rem;
            bottom: auto;
          }
        }

        .story-coin-token {
          position: absolute;
          width: 34px;
          height: 34px;
          border-radius: 999px;
          opacity: 0;
          will-change: transform, opacity;

          --coin-gold-1: #fff7b2;
          --coin-gold-2: #fde047;
          --coin-gold-3: #f59e0b;
          --coin-gold-4: #b45309;
          --coin-shadow: rgba(120, 53, 15, 0.45);

          background:
            radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
            radial-gradient(circle at 36% 30%, var(--coin-gold-1) 0%, var(--coin-gold-2) 30%, var(--coin-gold-3) 68%, var(--coin-gold-4) 100%);

          box-shadow:
            inset 0 2px 2px rgba(255, 255, 255, 0.65),
            inset 0 -4px 2px rgba(120, 53, 15, 0.38),
            inset 0 0 0 2px rgba(180, 83, 9, 0.45),
            inset 0 0 0 5px rgba(255, 237, 115, 0.28),
            0 12px 24px rgba(245, 158, 11, 0.24),
            0 4px 8px rgba(120, 53, 15, 0.22);

          overflow: hidden;
        }

        /* Ridged outer edge */
        .story-coin-token::before {
          content: "";
          position: absolute;
          inset: 2px;
          border-radius: inherit;

          background:
            repeating-conic-gradient(from 4deg,
              rgba(255, 248, 180, 0.9) 0deg 7deg,
              rgba(180, 83, 9, 0.45) 7deg 12deg);

          -webkit-mask:
            radial-gradient(circle, transparent 0 65%, #000 66% 100%);
          mask:
            radial-gradient(circle, transparent 0 65%, #000 66% 100%);

          opacity: 0.95;
        }

        /* Embossed center mark */
        .story-coin-token::after {
          content: "✦";
          position: absolute;
          inset: 8px;
          display: grid;
          place-items: center;
          border-radius: 999px;

          font-size: 13px;
          font-weight: 900;
          line-height: 1;
          color: #92400e;

          background:
            radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.5), transparent 42%),
            linear-gradient(145deg, #facc15, #d97706);

          box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.65),
            inset 0 -2px 1px rgba(120, 53, 15, 0.35),
            0 1px 0 rgba(255, 255, 255, 0.35);

          text-shadow:
            0 1px 0 rgba(255, 246, 180, 0.75),
            0 -1px 0 rgba(120, 53, 15, 0.4);
        }

        .story-coin-token .coin-glint {
          position: absolute;
          inset: -40%;
          background: linear-gradient(115deg,
              transparent 35%,
              rgba(255, 255, 255, 0.45) 48%,
              transparent 60%);
          transform: translateX(-65%) rotate(10deg);
          animation: coin-glint 1.8s ease-in-out infinite;
          pointer-events: none;
        }

        @keyframes coin-glint {

          0%,
          55% {
            transform: translateX(-65%) rotate(10deg);
            opacity: 0;
          }

          70% {
            opacity: 1;
          }

          100% {
            transform: translateX(65%) rotate(10deg);
            opacity: 0;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .scroll-story-track {
            height: auto !important;
          }

          .scroll-story-pinned {
            position: relative !important;
            height: auto !important;
            padding: 4rem 0;
          }

          .scroll-scene-text {
            position: relative !important;
            inset: auto !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            margin-bottom: 2rem;
          }

          .scroll-visual-layer {
            display: none !important;
          }
        }

        .promise-grid {
          display: grid;
          grid-template-columns: 1fr;
        }

        .promise-card {
          padding: 2.25rem;
          transition: background-color 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .promise-card:hover {
          background-color: rgba(239, 246, 255, 0.42);
        }

        .promise-visual {
          justify-content: center;
          width: fit-content;
          max-width: 100%;
          border-radius: 0.75rem;
          overflow: hidden;
        }

        .promise-illustration {
          width: 100%;
          max-width: 200px;
          aspect-ratio: 1 / 1;
          object-fit: contain;
          display: block;
          mix-blend-mode: multiply;
          pointer-events: none;
          opacity: 0.95;
          transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .promise-card:hover .promise-illustration {
          transform: scale(1.08);
        }

        .promise-card+.promise-card {
          border-top: 1px solid #E5EDF7;
        }

        @media (min-width: 768px) {
          .promise-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .promise-card {
            padding: 2.75rem;
          }

          .promise-illustration {
            max-width: 240px;
          }

          .promise-card:nth-child(odd) {
            border-right: 1px solid #E5EDF7;
          }

          .promise-card:nth-child(-n + 2) {
            border-top: none;
          }
        }

        @media (min-width: 1024px) {
          .promise-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .promise-card {
            min-height: 100%;
          }

          .promise-card:nth-child(odd) {
            border-right: none;
          }

          .promise-card:nth-child(3n + 1),
          .promise-card:nth-child(3n + 2) {
            border-right: 1px solid #E5EDF7;
          }

          .promise-card:nth-child(-n + 3) {
            border-top: none;
          }

          .audience-panel {
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
          }
        }

        .audience-shell {
          background: linear-gradient(135deg, #EEF7FF 0%, #DCEEFF 100%);
          border: 1px solid rgba(191, 219, 254, 0.75);
          border-radius: 32px;
          padding: 2rem;
        }

        .audience-tabs {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          background: rgba(255, 255, 255, 0.56);
          border-radius: 18px;
          padding: 0.4rem;
        }

        .aud-tab {
          flex: 1 1 140px;
          border: none;
          background: transparent;
          color: #7C8494;
          border-radius: 14px;
          padding: 0.9rem 1.15rem;
          font-size: 0.95rem;
          font-weight: 600;
          transition: all 0.25s ease;
        }

        .aud-tab.active {
          background: #FFFFFF;
          color: #17182A;
          box-shadow: 0 10px 26px rgba(23, 24, 42, 0.08);
        }

        @media (max-width: 767px) {
          #audience {
            padding-top: 5rem;
            padding-bottom: 5rem;
          }

          #audience .max-w-7xl {
            padding-left: 1rem;
            padding-right: 1rem;
          }

          #audience .text-center {
            margin-bottom: 2.5rem;
          }

          .audience-shell {
            border-radius: 28px;
            padding: 1.15rem;
          }
        }

        .audience-mobile-slider-wrap {
          margin: 0;
        }

        .audience-mobile-slider {
          display: flex;
          gap: 1.25rem;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          padding: 0;
          scroll-padding-inline: 0;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .audience-mobile-slider::-webkit-scrollbar {
          display: none;
        }

        .audience-mobile-slide {
          flex: 0 0 100%;
          scroll-snap-align: center;
          display: flex;
          flex-direction: column;
          gap: 1.25rem;
          min-width: 0;
        }

        .audience-mobile-copy {
          display: grid;
          gap: 0.9rem;
        }

        .audience-mobile-kicker {
          width: fit-content;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.7);
          color: var(--color-primary-600);
          padding: 0.36rem 0.68rem;
          font-size: 0.64rem;
          font-weight: 800;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }

        .audience-mobile-slide h3 {
          max-width: 14ch;
          font-size: 2rem;
          line-height: 1.08;
          letter-spacing: 0;
          color: #17182A;
        }

        .audience-mobile-slide p {
          max-width: 29rem;
          font-size: 0.98rem;
          line-height: 1.55;
          color: #6B7280;
        }

        .audience-mobile-features {
          display: grid;
          gap: 0.55rem;
          margin-top: 0.15rem;
        }

        .audience-mobile-features span {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          color: #17182A;
          font-size: 0.9rem;
          font-weight: 600;
          line-height: 1.35;
        }

        .audience-mobile-features span::before {
          content: "";
          width: 1.15rem;
          height: 1.15rem;
          flex: 0 0 1.15rem;
          border-radius: 999px;
          background-color: #eafaf2;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4 6.6 11.3 12.7 4.7' stroke='%2334c387' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 0.72rem 0.72rem;
          border: 1px solid rgba(52, 195, 135, 0.36);
        }

        .audience-mobile-slide img {
          order: -1;
          width: 100%;
          height: auto;
          aspect-ratio: 3 / 2;
          object-fit: cover;
          border-radius: 26px;
          background: rgba(255, 255, 255, 0.78);
          box-shadow: 0 16px 36px rgba(47, 139, 244, 0.11), inset 0 0 0 1px rgba(191, 219, 254, 0.48);
        }

        .audience-mobile-cta {
          align-self: center;
          min-width: min(100%, 15rem);
          border: none;
          background: var(--color-primary-600);
          color: #ffffff;
          padding: 0.9rem 1.5rem;
          font-size: 0.95rem;
          font-weight: 700;
          text-align: center;
          box-shadow: 0 12px 26px rgba(47, 139, 244, 0.18);
          margin-top: 0.4rem;
        }

        .audience-mobile-dots {
          display: flex;
          justify-content: center;
          gap: 0.45rem;
          padding-top: 1rem;
        }

        .audience-mobile-dots button {
          width: 0.48rem;
          height: 0.48rem;
          border: none;
          border-radius: 999px;
          background: rgba(47, 139, 244, 0.24);
          transition: width 0.22s ease, background-color 0.22s ease;
        }

        .audience-mobile-dots button.active {
          width: 1.5rem;
          background: var(--color-primary-600);
        }

        @media (max-width: 390px) {
          .audience-mobile-slide h3 {
            font-size: 1.82rem;
          }

          .audience-mobile-slide p {
            font-size: 0.94rem;
          }

          .audience-mobile-features span {
            font-size: 0.86rem;
          }
        }

        .audience-panel {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2rem;
          align-items: center;
        }

        .audience-panel.audience-desktop-panel {
          display: none;
        }

        @media (min-width: 768px) {
          .audience-panel.audience-desktop-panel {
            display: grid;
          }
        }

        .aud-feature {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          color: #17182A;
          font-size: 0.95rem;
          font-weight: 500;
        }

        .aud-feature::before {
          content: "";
          width: 18px;
          height: 18px;
          flex-shrink: 0;
          border-radius: 999px;
          border: 1.5px solid #38B27A;
          background-color: rgba(56, 178, 122, 0.12);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpolyline points='3,8 7,12 13,5' stroke='%2338B27A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 12px 12px;
        }

        .aud-illustration-container {
          background: #FFFFFF;
          border: 1px solid rgba(226, 232, 240, 0.9);
          border-radius: 32px;
          overflow: hidden;
          box-shadow: 0 18px 48px rgba(23, 24, 42, 0.08);
          aspect-ratio: 1 / 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .aud-illustration {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .compliance-hero {
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #EEF7FF 0%, rgba(217, 236, 255, 0.68) 100%);
          border: 1px solid rgba(191, 219, 254, 0.7);
          border-radius: 32px;
          padding: 2.75rem 1.75rem;
          text-align: center;
        }

        .compliance-hero::before {
          content: "";
          position: absolute;
          top: -70px;
          right: -70px;
          width: 260px;
          height: 260px;
          border-radius: 999px;
          background: radial-gradient(circle, rgba(0, 87, 255, 0.08), transparent 70%);
          pointer-events: none;
        }

        .compliance-status {
          display: inline-flex;
          align-items: center;
          gap: 0.6rem;
          padding: 0.7rem 1.1rem;
          border-radius: 999px;
          background: rgba(56, 178, 122, 0.1);
          border: 1px solid rgba(56, 178, 122, 0.22);
          color: #38B27A;
          font-size: 0.9rem;
          font-weight: 600;
          margin-bottom: 1.25rem;
        }

        .compliance-status::before {
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 999px;
          background: currentColor;
        }

        .trust-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }

.feature-card {
    position: relative;
    isolation: isolate;
    background: rgb(245 248 251);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 16px 42px rgba(15, 23, 42, 0.055);
    transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

            .feature-card::after {
                position: absolute;
                bottom: -1px;
                left: 0px;
                right: 0px;
                top: 0px;
                z-index: 5;
                background-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.94) 10%, rgba(255, 255, 255, 0.62) 24%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 58%);
                content: "";
            }


                .feature-card:hover {
                    transform: translateY(-4px);
                    border-color: rgba(99, 102, 241, 0.24);
                    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05), 0 22px 54px rgba(15, 23, 42, 0.095);
                }

                .feature-card::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    border-radius: 1rem;
                    background: radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.14), transparent 28%), radial-gradient(circle at 100% 24%, rgba(16, 185, 129, 0.13), transparent 22%);
                    opacity: 0;
                    transition: opacity 280ms ease;
                }

                .feature-card:hover::before {
                    opacity: 1;
                }

.feature-copy {
    z-index: 10;
    position:relative
}

.visual-stage {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.8)), radial-gradient(circle at center, white 0, transparent 55%);
}

                .glass-panel {
                    border: 1px solid rgba(226, 232, 240, 0.95);
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
                    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85);
                }

                .soft-line {
                    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.34), transparent);
                }

                .status-rail {
                    position: absolute;
                    left: 1.25rem;
                    right: 1.25rem;
                    bottom: 0.9rem;
                    z-index: 40;
                    display: flex;
                    justify-content: center;
                    pointer-events: none;
                }

                .status-pill {
                    max-width: 100%;
                    white-space: nowrap;
                    backdrop-filter: blur(10px);
                }

                .has-status-rail {
                    padding-bottom: 4.25rem;
                }

                .lift-for-status {
                    transform: translateY(-0.45rem);
                }

                @keyframes c1Progress {
                    0%, 12% {
                        width: 8%;
                        background: #f59e0b;
                    }

                    44% {
                        width: 56%;
                        background: #f59e0b;
                    }

                    76%, 100% {
                        width: 100%;
                        background: #10b981;
                    }
                }

                @keyframes c1Check {
                    0%, 32% {
                        opacity: 0.28;
                        transform: translateX(-3px);
                        color: #94a3b8;
                    }

                    42%, 100% {
                        opacity: 1;
                        transform: translateX(0);
                        color: #059669;
                    }
                }

                @keyframes c1Status {
                    0%, 72% {
                        background: #fffbeb;
                        color: #b45309;
                        border-color: #fde68a;
                    }

                    73%, 100% {
                        background: #ecfdf5;
                        color: #059669;
                        border-color: #a7f3d0;
                    }
                }

                @keyframes c1StatusText {
                    0%, 72% {
                        content: "Checking statutory rules";
                    }

                    73%, 100% {
                        content: "Validated and run ready";
                    }
                }

                @keyframes c1Sweep {
                    0%, 16% {
                        transform: translateX(-125%);
                        opacity: 0;
                    }

                    24%, 58% {
                        opacity: 1;
                    }

                    78%, 100% {
                        transform: translateX(135%);
                        opacity: 0;
                    }
                }

                .c1-progress {
                    animation: c1Progress 5.4s cubic-bezier(.65, 0, .35, 1) infinite;
                }

                .c1-check-1 {
                    animation: c1Check 5.4s ease infinite;
                    animation-delay: .25s;
                }

                .c1-check-2 {
                    animation: c1Check 5.4s ease infinite;
                    animation-delay: .7s;
                }

                .c1-check-3 {
                    animation: c1Check 5.4s ease infinite;
                    animation-delay: 1.15s;
                }

                .c1-check-4 {
                    animation: c1Check 5.4s ease infinite;
                    animation-delay: 1.6s;
                }

                .c1-status {
                    animation: c1Status 5.4s steps(1) infinite;
                }

                    .c1-status::before {
                        content: "Checking statutory rules";
                        animation: c1StatusText 5.4s steps(1) infinite;
                    }

                .c1-sweep {
                    animation: c1Sweep 5.4s ease infinite;
                }

                @keyframes c2Timeline {
                    0%, 16% {
                        height: 0;
                        opacity: 0;
                    }

                    25%, 78% {
                        height: 100%;
                        opacity: 1;
                    }

                    96%, 100% {
                        height: 100%;
                        opacity: 0;
                    }
                }

                @keyframes c2Item {
                    0%, 18% {
                        opacity: 0;
                        transform: translateX(12px) scale(.98);
                    }

                    28%, 82% {
                        opacity: 1;
                        transform: translateX(0) scale(1);
                    }

                    95%, 100% {
                        opacity: 0;
                        transform: translateX(-8px) scale(.98);
                    }
                }

                @keyframes c2Value {
                    0%, 30% {
                        background: #f8fafc;
                        color: #64748b;
                    }

                    38%, 78% {
                        background: #eef2ff;
                        color: #4338ca;
                        box-shadow: 0 0 0 3px rgba(99, 102, 241, .09);
                    }

                    95%, 100% {
                        background: #f8fafc;
                        color: #64748b;
                    }
                }

                @keyframes c2Cursor {
                    0%, 22% {
                        opacity: 0;
                        transform: translate(12px, -8px);
                    }

                    32%, 54% {
                        opacity: 1;
                        transform: translate(0, 0);
                    }

                    65%, 100% {
                        opacity: 0;
                        transform: translate(-6px, 4px);
                    }
                }

                .c2-line {
                    animation: c2Timeline 6.6s ease-in-out infinite;
                    transform-origin: top;
                }

                .c2-item-1 {
                    animation: c2Item 6.6s ease infinite;
                    animation-delay: .35s;
                }

                .c2-item-2 {
                    animation: c2Item 6.6s ease infinite;
                    animation-delay: 1.25s;
                }

                .c2-item-3 {
                    animation: c2Item 6.6s ease infinite;
                    animation-delay: 2.15s;
                }

                .c2-item-4 {
                    animation: c2Item 6.6s ease infinite;
                    animation-delay: 3.05s;
                }

                .c2-value {
                    animation: c2Value 6.6s ease infinite;
                }

                .c2-cursor {
                    animation: c2Cursor 6.6s ease infinite;
                }

                @keyframes c3Archive {
                    0%, 18% {
                        transform: scale(1) translateX(0) translateY(0) rotate(0);
                        opacity: 1;
                        z-index: 20;
                    }

                    42%, 74% {
                        transform: scale(.72) translateX(var(--c3-archive-x, 94px)) translateY(8px) rotate(2deg);
                        opacity: .92;
                        z-index: 8;
                    }

                    88%, 100% {
                        transform: scale(.72) translateX(var(--c3-archive-x, 94px)) translateY(8px) rotate(2deg);
                        opacity: 0;
                        z-index: 8;
                    }
                }

                @keyframes c3Generate {
                    0%, 38% {
                        opacity: 0;
                        transform: scale(.9) translateY(6px);
                    }

                    52%, 90% {
                        opacity: 1;
                        transform: scale(1) translateY(0);
                    }

                    100% {
                        opacity: 0;
                        transform: scale(.98) translateY(0);
                    }
                }

                @keyframes c3Lock {
                    0%, 30% {
                        opacity: 0;
                        transform: scale(.5) rotate(-12deg);
                    }

                    42%, 74% {
                        opacity: 1;
                        transform: scale(1) rotate(0);
                        color: #059669;
                    }

                    88%, 100% {
                        opacity: 0;
                        transform: scale(.72);
                    }
                }

                @keyframes c3Stamp {
                    0%, 36% {
                        opacity: 0;
                        transform: translateY(-8px) scale(1.15) rotate(-8deg);
                    }

                    46%, 74% {
                        opacity: 1;
                        transform: translateY(0) scale(1) rotate(-8deg);
                    }

                    88%, 100% {
                        opacity: 0;
                    }
                }

                .c3-active-doc {
                    animation: c3Archive 5.8s cubic-bezier(.65, 0, .35, 1) infinite;
                    transform-origin: center;
                }

                .c3-new-doc {
                    animation: c3Generate 5.8s ease infinite;
                }

                .c3-lock {
                    animation: c3Lock 5.8s cubic-bezier(.2, .9, .2, 1.25) infinite;
                }

                .c3-stamp {
                    animation: c3Stamp 5.8s ease infinite;
                }

                @keyframes c4Scan {
                    0%, 10% {
                        top: -34%;
                        opacity: 0;
                    }

                    20%, 64% {
                        opacity: 1;
                    }

                    76%, 100% {
                        top: 105%;
                        opacity: 0;
                    }
                }

                @keyframes c4Gate {
                    0%, 22% {
                        color: #94a3b8;
                        background: #f8fafc;
                        transform: scale(1);
                    }

                    38%, 76% {
                        color: #059669;
                        background: #ecfdf5;
                        transform: scale(1.04);
                    }

                    96%, 100% {
                        color: #94a3b8;
                        background: #f8fafc;
                        transform: scale(1);
                    }
                }

                @keyframes c4Shield {
                    0%, 56% {
                        stroke: #cbd5e1;
                        filter: drop-shadow(0 0 0 transparent);
                    }

                    64%, 88% {
                        stroke: #10b981;
                        filter: drop-shadow(0 0 5px rgba(16, 185, 129, .55));
                    }

                    100% {
                        stroke: #cbd5e1;
                        filter: drop-shadow(0 0 0 transparent);
                    }
                }

                @keyframes c4StatusText {
                    0%, 56% {
                        content: "Update tested away from live payroll";
                        color: #475569;
                    }

                    57%, 100% {
                        content: "Live calculations stay protected";
                        color: #059669;
                    }
                }

                .c4-scanner {
                    animation: c4Scan 4.6s linear infinite;
                }

                .c4-gate-1 {
                    animation: c4Gate 4.6s ease infinite;
                    animation-delay: .35s;
                }

                .c4-gate-2 {
                    animation: c4Gate 4.6s ease infinite;
                    animation-delay: .75s;
                }

                .c4-gate-3 {
                    animation: c4Gate 4.6s ease infinite;
                    animation-delay: 1.15s;
                }

                .c4-shield {
                    animation: c4Shield 4.6s ease infinite;
                }

                .c4-status::after {
                    content: "Update tested away from live payroll";
                    animation: c4StatusText 4.6s steps(1) infinite;
                }

                @keyframes c5Flow {
                    0% {
                        transform: translateX(0) scale(.8);
                        opacity: 0;
                    }

                    18% {
                        opacity: 1;
                    }

                    72% {
                        opacity: 1;
                    }

                    100% {
                        transform: translateX(var(--c5-flow-x, 72px)) scale(1);
                        opacity: 0;
                    }
                }

                @keyframes c5Folder {
                    0%, 70% {
                        transform: scale(1);
                        color: #94a3b8;
                    }

                    80%, 92% {
                        transform: scale(1.06);
                        color: #0d9488;
                    }

                    100% {
                        transform: scale(1);
                        color: #94a3b8;
                    }
                }

                @keyframes c5LocalGlow {
                    0%, 62% {
                        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
                    }

                    74%, 92% {
                        box-shadow: 0 0 0 5px rgba(13, 148, 136, .10);
                    }

                    100% {
                        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
                    }
                }

                .c5-dot-1 {
                    animation: c5Flow 2.4s linear infinite;
                }

                .c5-dot-2 {
                    animation: c5Flow 2.4s linear infinite;
                    animation-delay: .72s;
                }

                .c5-dot-3 {
                    animation: c5Flow 2.4s linear infinite;
                    animation-delay: 1.44s;
                }

                .c5-folder {
                    animation: c5Folder 2.4s ease-in-out infinite;
                    transform-origin: center;
                }

                .c5-glow {
                    animation: c5LocalGlow 2.4s ease-in-out infinite;
                }

                .reports-scroll-wrapper {
                    position: relative;
                    height: 600vh;
                    width: 100%;
                }

                .reports-pinned {
                    position: absolute;
                    inset: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 5;
                    overflow: hidden;
                }

                .reports-center-line {
                    position: absolute;
                    left: 50%;
                    top: 0;
                    width: 1px;
                    height: 100%;
                    background: rgba(15, 23, 42, 0.06);
                    z-index: 1;
                }

                .reports-plus {
                    position: absolute;
                    left: 50%;
                    top: 14%;
                    transform: translate(-50%, -50%);
                    color: #2F8BF4;
                    font-weight: 300;
                    z-index: 2;
                    font-size: 1.5rem;
                }

                .reports-track-container {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: min(92vw, 1320px);
                    height: 100vh;
                    pointer-events: none;
                    z-index: 10;
                    isolation: isolate;
                }

                .report-doc-card {
                    width: clamp(280px, 29vw, 380px);
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    opacity: 0;
                    top: 100%;
                    pointer-events: auto;
                    color: #eaf3ff;
                    overflow: hidden;
                    border-radius: 28px;
                    clip-path: none;
                    padding-top: 0;
                    background: linear-gradient(145deg, rgba(12, 30, 68, 0.94), rgba(25, 71, 143, 0.82)), radial-gradient(circle at 18% 0%, rgba(72, 132, 214, 0.42), transparent 36%), radial-gradient(circle at 100% 12%, rgba(25, 71, 143, 0.58), transparent 38%), radial-gradient(circle at 50% 100%, rgba(7, 20, 52, 0.74), transparent 46%);
                    border: 1px solid rgba(170, 205, 255, 0.28);
                    box-shadow: 0 28px 80px rgba(2, 8, 23, 0.34), 0 16px 42px rgba(25, 71, 143, 0.28), inset 0 1px 0 rgba(210, 230, 255, 0.28), inset 0 -1px 0 rgba(72, 132, 214, 0.26);
                    backdrop-filter: blur(24px) saturate(155%);
                    -webkit-backdrop-filter: blur(24px) saturate(155%);
                    will-change: transform, opacity;
                }

                    .report-doc-card::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        border-radius: inherit;
                        pointer-events: none;
                        z-index: 1;
                        background: linear-gradient(120deg, rgba(226, 240, 255, 0.28) 0%, rgba(170, 205, 255, 0.12) 18%, transparent 44%);
                        opacity: 0.58;
                    }

                    .report-doc-card::after {
                        content: "";
                        position: absolute;
                        inset: 1px;
                        border-radius: inherit;
                        pointer-events: none;
                        z-index: 1;
                        background: radial-gradient(circle at 50% 0%, rgba(104, 162, 240, 0.24), transparent 48%), linear-gradient(180deg, rgba(234, 243, 255, 0.14), transparent 44%);
                        opacity: 0.82;
                    }

                .report-doc-header,
                .report-doc-content,
                .report-doc-visual {
                    position: relative;
                    z-index: 2;
                }

                .report-doc-header {
                    padding: 1rem 1.5rem;
                    border-bottom: 1px solid rgba(170, 205, 255, 0.18);
                    font-size: 0.78rem;
                    font-weight: 700;
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                    color: #d7e8ff;
                    background: linear-gradient(90deg, rgba(9, 28, 65, 0.76), rgba(25, 71, 143, 0.34));
                }

                .report-doc-content {
                    padding: 1.5rem;
                    display: flex;
                    flex-direction: column;
                    gap: 0.9rem;
                }

                    .report-doc-content h3 {
                        color: #ffffff;
                        letter-spacing: -0.02em;
                    }

                .report-doc-copy {
                    font-size: 0.86rem;
                    line-height: 1.65;
                    color: rgba(234, 243, 255, 0.78);
                }

                .report-doc-btn {
                    display: none;
                }

                .report-doc-visual {
                    width: 100%;
                    aspect-ratio: 1.2 / 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: auto;
                    padding: 1.25rem;
                    border-top: 1px solid rgba(14, 165, 233, 0.1);
                }

                .report-track-left {
                    left: 4%;
                }

                .report-track-center {
                    left: 50%;
                    transform: translateX(-50%);
                }

                .report-track-right {
                    right: 4%;
                }

                .report-mini-sheet {
                    width: 100%;
                    max-width: 240px;
                    background: #ffffff;
                    border-radius: 14px;
                    padding: 0.9rem;
                    box-shadow: 0 12px 28px rgba(47, 139, 244, 0.14);
                    color: #17182A;
                }

                .report-mini-sheet--blue {
                    box-shadow: 0 12px 28px rgba(47, 139, 244, 0.18);
                }

                .report-mini-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.38rem 0;
                    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
                    font-size: 0.72rem;
                }

                    .report-mini-row:last-child {
                        border-bottom: 0;
                    }

                .report-mini-pill {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.38rem;
                    padding: 0.22rem 0.55rem;
                    border-radius: 999px;
                    font-size: 0.62rem;
                    font-weight: 700;
                }

                    .report-mini-pill.green {
                        background: #dcfce7;
                        color: #15803d;
                    }

                    .report-mini-pill.blue {
                        background: #dbeafe;
                        color: #1d4ed8;
                    }

                    .report-mini-pill.amber {
                        background: #fef3c7;
                        color: #b45309;
                    }

                .report-mini-bars {
                    display: flex;
                    flex-direction: column;
                    gap: 0.45rem;
                    width: 100%;
                }

                .report-mini-bar {
                    height: 0.5rem;
                    border-radius: 999px;
                    background: rgba(59, 130, 246, 0.15);
                    overflow: hidden;
                }

                    .report-mini-bar span {
                        display: block;
                        height: 100%;
                        border-radius: inherit;
                        background: linear-gradient(90deg, #2F8BF4 0%, #005DE8 100%);
                    }



                .report-doc-card.pink-tint .report-mini-sheet {
                    box-shadow: 0 12px 28px rgba(47, 139, 244, 0.14);
                }

                .report-doc-card.yellow-tint .report-mini-sheet {
                    box-shadow: 0 12px 28px rgba(47, 139, 244, 0.14);
                }

                @media (max-width: 767px) {
                    .reports-scroll-wrapper {
                        height: 460vh;
                    }

                    .report-doc-card {
                        backdrop-filter: none;
                        -webkit-backdrop-filter: none;
                        box-shadow: 0 18px 44px rgba(2, 8, 23, 0.24), inset 0 1px 0 rgba(210, 230, 255, 0.22);
                    }

                    .report-doc-card::before {
                        opacity: 0.42;
                    }

                    .report-doc-card::after {
                        opacity: 0.56;
                    }
                }

                @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
                    .report-doc-card {
                        background: rgba(255, 255, 255, 0.94);
                    }
                }

                .faq-shell {
                    max-width: 720px;
                    margin: 0 auto;
                }

                .faq-list {
                    display: flex;
                    flex-direction: column;
                }

                .faq-item {
                    border-top: 1px solid rgba(23, 24, 42, 0.08);
                    cursor: pointer;
                }

                    .faq-item:last-child {
                        border-bottom: 1px solid rgba(23, 24, 42, 0.08);
                    }

                .faq-question {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 1rem;
                    padding: 1.4rem 0.25rem;
                }

                    .faq-question span {
                        font-size: 1rem;
                        font-weight: 600;
                        color: #17182A;
                        line-height: 1.45;
                    }

                .faq-icon {
                    width: 28px;
                    height: 28px;
                    border-radius: 8px;
                    background: #F3F9FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    color: #0057FF;
                    font-size: 1.15rem;
                    font-weight: 300;
                    line-height: 1;
                    transition: all 0.25s ease;
                }

                .faq-answer {
                    max-height: 0;
                    overflow: hidden;
                    padding: 0 0.25rem;
                    font-size: 0.95rem;
                    line-height: 1.75;
                    color: #7C8494;
                    transition: max-height 0.4s ease, padding 0.4s ease;
                }

                .faq-item.open .faq-icon {
                    background: #0057FF;
                    color: #FFFFFF;
                    transform: rotate(45deg);
                }

                .faq-item.open .faq-answer {
                    max-height: 220px;
                    padding-bottom: 1.4rem;
                }

                .cta-section {
                    position: relative;
                    overflow: hidden;
                }

                .cta-stage {
                    position: relative;
                    overflow: hidden;
                    border-radius: 40px;
                    min-height: 620px;
                    background: #19478f;
                    border: 1px solid rgba(255, 255, 255, 0.16);
                    box-shadow: 0 28px 80px rgba(20, 44, 87, 0.32);
                    isolation: isolate;
                }

                .cta-base-glow,
                .cta-gradient-layer,
                .cta-haze-layer {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    transition: opacity 1.4s ease;
                }

                .cta-base-glow {
                    background: radial-gradient(circle at 16% 18%, rgba(217, 238, 255, 0.12), transparent 22%), radial-gradient(circle at 80% 18%, rgba(89, 185, 255, 0.12), transparent 30%), radial-gradient(circle at 52% 112%, rgba(20, 44, 87, 0.26), transparent 58%);
                    opacity: 0.42;
                }

                .cta-gradient-layer {
                    opacity: 0;
                    background: radial-gradient(118% 118% at 78% 18%, rgba(188, 227, 255, 0.26) 0%, rgba(188, 227, 255, 0.08) 28%, rgba(25, 71, 143, 0) 56%), radial-gradient(104% 126% at 44% 58%, rgba(51, 155, 254, 0.22) 0%, rgba(51, 155, 254, 0.06) 26%, rgba(25, 71, 143, 0) 62%), linear-gradient(135deg, #19478f 0%, #1851b5 42%, #142c57 100%);
                }

                .cta-haze-layer {
                    opacity: 0;
                    background: radial-gradient(82% 50% at 50% 100%, rgba(217, 238, 255, 0.16), transparent 66%), linear-gradient(180deg, rgba(217, 238, 255, 0.07) 0%, rgba(217, 238, 255, 0) 32%);
                    mix-blend-mode: screen;
                }

                .cta-stage.cta-active .cta-gradient-layer,
                .cta-stage.cta-active .cta-haze-layer {
                    opacity: 1;
                }

                .cta-content,
                .cta-globe-wrap {
                    opacity: 0;
                    transform: translateY(36px);
                    filter: blur(14px);
                }

                .cta-content {
                    position: relative;
                    z-index: 2;
                    max-width: 640px;
                    margin: 0 auto;
                    text-align: center;
                }

                .cta-globe-wrap {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    pointer-events: none;
                    z-index: 1;
                }

                .cta-globe-aura {
                    position: absolute;
                    width: min(86vw, 700px);
                    aspect-ratio: 1;
                    border-radius: 999px;
                    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 34%, rgba(255, 255, 255, 0) 72%);
                    filter: blur(28px);
                    opacity: var(--cta-globe-aura-opacity);
                }

                .cta-globe {
                    position: relative;
                    width: min(88vw, 720px);
                    aspect-ratio: 1;
                    border-radius: 999px;
                    display: grid;
                    place-items: center;
                    opacity: 0.88;
                    animation: cta-globe-float 10s ease-in-out infinite;
                    will-change: transform;
                }

                    .cta-globe canvas {
                        width: 100%;
                        height: 100%;
                        display: block;
                        opacity: var(--cta-globe-canvas-opacity);
                        mix-blend-mode: screen;
                        filter: brightness(var(--cta-globe-canvas-brightness)) contrast(var(--cta-globe-canvas-contrast)) saturate(var(--cta-globe-canvas-saturate));
                        mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0) 100%);
                        -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0) 100%);
                    }

                    .cta-globe::after {
                        content: "";
                        position: absolute;
                        inset: 14% 14% 14% 14%;
                        border-radius: 999px;
                        border: 1px solid rgba(255, 255, 255, 0.08);
                        pointer-events: none;
                        filter: blur(0.4px);
                    }

                @keyframes cta-globe-float {

                    0%, 100% {
                        transform: translate(var(--cta-globe-shift-x), calc(var(--cta-globe-shift-y) + 0px)) scale(var(--cta-globe-scale));
                    }

                    50% {
                        transform: translate(var(--cta-globe-shift-x), calc(var(--cta-globe-shift-y) - 14px)) scale(var(--cta-globe-scale));
                    }
                }

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

                    .cta-stage {
                        border-radius: 28px;
                        min-height: 0;
                    }

                    .cta-content {
                        max-width: min(100%, 18rem);
                    }
                    
                    /* Scale down the visual stages that are too wide */
                    .visual-stage > .lift-for-status,
                    .visual-stage > div:not(.absolute):not(.soft-line):not(.status-rail) {
                        transform: scale(var(--mobile-visual-scale, 0.85));
                        transform-origin: center top;
                    }
                    
                    :root {
                        --c3-archive-x: 60px;
                        --c5-flow-x: 40px;
                        --c5-flow-y: 48px;
                    }

                    @keyframes c5FlowVertical {
                        0% {
                            transform: translateY(0) translateX(-50%) scale(.8);
                            opacity: 0;
                        }
                        18% {
                            opacity: 1;
                        }
                        72% {
                            opacity: 1;
                        }
                        100% {
                            transform: translateY(var(--c5-flow-y, 48px)) translateX(-50%) scale(1);
                            opacity: 0;
                        }
                    }
                    
                    .c5-dot-1, .c5-dot-2, .c5-dot-3 {
                        animation-name: c5FlowVertical;
                    }
                }

                @media (min-width: 768px) and (max-width: 1279px) {
                    .feature-card.tablet-scale .visual-stage > .lift-for-status,
                    .feature-card.tablet-scale .visual-stage > div:not(.absolute):not(.soft-line):not(.status-rail) {
                        transform: scale(var(--mobile-visual-scale, 0.85));
                        transform-origin: center top;
                    }
                }

                @media (min-width: 768px) {
                    .trust-grid {
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                    }
                }

                @media (min-width: 1024px) {
                    .audience-shell {
                        padding: 2.5rem;
                    }

                    .audience-panel {
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: 2.5rem;
                    }

                    .compliance-hero {
                        padding: 3.5rem;
                    }

                    .trust-grid {
                        grid-template-columns: repeat(3, minmax(0, 1fr));
                    }

                    .cta-stage {
                        min-height: 680px;
                    }

                    .cta-globe {
                        --cta-globe-shift-x: 50%;
                    }
                }

                @media (min-width: 1280px) {
                    .trust-grid {
                        grid-template-columns: repeat(5, minmax(0, 1fr));
                    }
                }

                .hero-image-container {
                    position: relative;
                    box-sizing: border-box;
                    display: block;
                    margin-top: 5rem;
                    text-align: center;
                    width: 100%;
                    max-width: 1100px;
                    margin-left: auto;
                    margin-right: auto;
                    animation: fade-up 1.3s ease 0.6s backwards;
                    overflow: hidden;
                }

                    .hero-image-container::after {
                        position: absolute;
                        bottom: -1px;
                        left: 0px;
                        right: 0px;
                        top: 0px;
                        z-index: 50;
                        background-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.94) 10%, rgba(255, 255, 255, 0.62) 24%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0) 58%);
                        content: "";
                        pointer-events: none;
                    }

                    .hero-image-container .hero-image {
                        box-sizing: border-box;
                        display: block;
                        width: 100%;
                        height: auto;
                        border-radius: 12px;
                        border: 1px solid rgba(226, 232, 240, 0.44);
                        box-shadow: 0 24px 48px rgba(0, 87, 255, 0.08);
                        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.88) 72%, rgba(0, 0, 0, 0.38) 88%, rgba(0, 0, 0, 0) 100%);
                        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.88) 72%, rgba(0, 0, 0, 0.38) 88%, rgba(0, 0, 0, 0) 100%);
                    }

                .bg-mobile-nav {
                    background: linear-gradient(180deg, var(--main-blue) 0%, var(--deep-navy) 100%);
                }

                .mobile-nav-link {
                    font-family: 'IBM Plex Serif', serif;
                    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
                }

                    .mobile-nav-link:hover {
                        transform: translateX(10px);
                        opacity: 0.8;
                    }
                /* Adjust mobile menu toggle when header is scrolled */
                #main-header.scrolled #mobile-menu-toggle span {
                    background-color: #17182A;
                }

                body.scroll-ready #main-header.site-header-hidden {
                    opacity: 0;
                    pointer-events: none;
                    transform: translate3d(0, -1rem, 0);
                    transition: opacity 0.26s ease, transform 0.26s ease;
                }

                body.scroll-ready #main-header.site-header-visible {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translate3d(0, 0, 0);
                    transition: opacity 0.26s ease, transform 0.26s ease;
                }

                .pill-shimmer-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--color-primary-900);
}

.pill-shimmer-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;

  color: transparent;
  -webkit-text-fill-color: transparent;

  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.12) 44%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(147, 197, 253, 0.22) 56%,
    transparent 64%,
    transparent 100%
  );

  background-size: 260% 100%;
  background-position: 160% 0;

  -webkit-background-clip: text;
  background-clip: text;

  animation: pill-text-shimmer 4.8s linear infinite;
}

@keyframes pill-text-shimmer {
  0% {
    background-position: 160% 0;
  }

  55% {
    background-position: -160% 0;
  }

  100% {
    background-position: -160% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill-shimmer-text::after {
    animation: none;
  }
}