* {
            box-sizing: border-box;
          }

          html {
            -webkit-text-size-adjust: 100%;
            scroll-behavior: smooth;
          }

          body {
            margin: 0;
            background: #ffffff;
            color: #16213e;
            font-family: "Instrument Sans", system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
          }

          a {
            color: #4a75d1;
            text-decoration: none;
          }

          a:hover {
            color: #2f4e93;
          }

          ::selection {
            background: #4a75d1;
            color: #ffffff;
          }

          summary {
            list-style: none;
            cursor: pointer;
          }

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

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

          @keyframes curioMarkSpin {
            from {
              transform: rotate(0deg)
            }

            to {
              transform: rotate(360deg)
            }
          }

          .curio-mark-wrap:hover .curio-mark-img {
            animation: curioMarkSpin .8s cubic-bezier(.2, .8, .2, 1) 1
          }

          input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            width: 100%
          }

          input[type="range"]::-webkit-slider-runnable-track {
            height: 6px;
            border-radius: 99px;
            background: rgba(22, 33, 62, 0.16);
          }

          input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            margin-top: -8px;
            border-radius: 50%;
            background: var(--accent, #4a75d1);
            border: 3px solid #ffffff;
            box-shadow: 0 2px 12px rgba(22, 33, 62, 0.18);
            cursor: pointer;
          }

          input[type="range"]::-moz-range-track {
            height: 6px;
            border-radius: 99px;
            background: rgba(22, 33, 62, 0.16);
          }

          input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border: 3px solid #ffffff;
            border-radius: 50%;
            background: var(--accent, #4a75d1);
            cursor: pointer;
          }

          @keyframes traceRun {
            0% {
              transform: translateX(-110%);
            }

            100% {
              transform: translateX(110%);
            }
          }

          @keyframes pulseDot {

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

            50% {
              opacity: 1;
              transform: scale(1.4);
            }
          }

          @keyframes floatY {

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

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

          .cr-road-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 1380 / 620;
          }

          .cr-road-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
          }

          .cr-node {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
              0 0 0 6px #ffffff,
              0 10px 22px rgba(22, 33, 62, 0.22);
            z-index: 3;
          }

          .cr-node--target {
            background: #ffffff;
            border: 2px dashed #16213e;
            box-shadow: 0 0 0 6px #ffffff;
          }

          .cr-node-ring {
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 1.5px solid currentColor;
            opacity: 0.5;
            animation: pulseDot 2.4s ease-in-out infinite;
          }

          .cr-dot {
            position: absolute;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(22, 33, 62, 0.2);
            box-shadow: 0 0 0 5px rgba(22, 33, 62, 0.06);
            z-index: 1;
            transform: translate(-50%, -50%);
          }

          .cr-info {
            position: absolute;
            width: 208px;
            z-index: 3;
          }

          .cr-info img {
            width: 100%;
            height: 104px;
            object-fit: cover;
            border-radius: 12px;
            display: block;
            margin: 0 0 12px;
            box-shadow: 0 6px 18px rgba(22, 33, 62, 0.18);
          }

          .cr-info .cr-date {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .cr-info h3 {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: -0.01em;
            line-height: 1.28;
            margin: 0 0 6px;
            color: #16213e;
          }

          .cr-info p {
            font-size: 12.5px;
            line-height: 1.48;
            color: #55607a;
            margin: 0;
          }

          @media (max-width: 1000px) {
            .cr-info {
              width: 165px;
            }

            .cr-info img {
              height: 82px;
            }
          }

          @media (max-width: 700px) {
            .cr-node {
              width: 38px;
              height: 38px;
            }

            .cr-node svg {
              width: 16px;
              height: 16px;
            }

            .cr-info {
              width: 132px;
            }

            .cr-info img {
              height: 64px;
              border-radius: 8px;
              margin-bottom: 8px;
            }

            .cr-info h3 {
              font-size: 13px;
            }

            .cr-info p {
              font-size: 10.5px;
              line-height: 1.42;
            }
          }

          .studio-swiper .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #efeeec;
          }

          .studio-swiper .swiper-pagination {
            bottom: 12px;
          }

          .studio-swiper .swiper-pagination-bullet {
            width: 7px;
            height: 7px;
            background: #16213e;
            opacity: 0.3;
          }

          .studio-swiper .swiper-pagination-bullet-active {
            background: var(--accent, #4a75d1);
            opacity: 1;
          }

          .studio-swiper .swiper-button-prev,
          .studio-swiper .swiper-button-next {
            width: 32px;
            height: 32px;
            margin-top: -16px;
            border-radius: 50%;
            background: rgba(22, 33, 62, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #ffffff;
            opacity: 0;
            transition: opacity 0.2s;
          }

          .studio-swiper:hover .swiper-button-prev,
          .studio-swiper:hover .swiper-button-next {
            opacity: 1;
          }

          .studio-swiper .swiper-button-prev::after,
          .studio-swiper .swiper-button-next::after {
            font-size: 13px;
            font-weight: 700;
          }

          .studio-swiper .swiper-button-prev {
            left: 10px;
          }

          .studio-swiper .swiper-button-next {
            right: 10px;
          }

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

            .studio-swiper .swiper-button-prev,
            .studio-swiper .swiper-button-next {
              opacity: 1;
            }
          }

          /* ------------------------------------------------------------------ */
          /* Interactive sensor demo: module / port / power chips                */
          /* ------------------------------------------------------------------ */
          .chip {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 9px 13px;
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            font-weight: 500;
            background: #eef3fc;
            color: #55607a;
            border: 1px solid rgba(22, 33, 62, 0.12);
          }

          .chip.active {
            background: var(--accent, #4a75d1);
            color: #ffffff;
            border-color: var(--accent, #4a75d1);
            box-shadow: 0 4px 16px rgba(74, 117, 209, 0.3);
          }

          .chip-block {
            text-align: center;
            padding: 11px 0;
          }

          /* ------------------------------------------------------------------ */
          /* Unfilled photo placeholders (no image supplied yet)                 */
          /* ------------------------------------------------------------------ */
          .photo-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #93a0b8;
            background: #eef4fd;
            text-align: center;
            padding: 16px;
          }

          .photo-placeholder span {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.08em;
            max-width: 200px;
            line-height: 1.4;
          }

          /* ------------------------------------------------------------------ */

          /* Component classes (migrated from inline styles)                    */

          /* ------------------------------------------------------------------ */

          .page {
            background: #ffffff;
          }

          .nav {
            position: sticky;
            top: 0;
            z-index: 60;
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(22, 33, 62, 0.08);
            transition: box-shadow 0.3s ease;
          }

          .nav--scrolled {
            box-shadow: 0 10px 30px rgba(22, 33, 62, 0.09);
          }

          .nav-inner {
            width: 100%;
            max-width: 1680px;
            margin: 0 auto;
            padding: 12px clamp(20px, 3.4vw, 56px);
            min-height: 68px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 10px 24px;
            position: relative;
          }

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

          .nav-logo-img {
            height: 20px;
            width: auto;
            display: block;
          }

          .nav-logo-text {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .nav-links {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            min-width: 0;
            gap: 10px clamp(14px, 2vw, 30px);
          }

          .nav-right {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
          }

          .nav-cta--mobile {
            display: none;
          }

          .nav-link {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #55607a;
            position: relative;
            transition: color 0.25s ease;
          }

          .nav-link.active {
            color: #16213e;
          }

          .nav-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -9px;
            height: 2px;
            border-radius: 2px;
            background: var(--accent, #4a75d1);
          }

          .btn-pill-accent {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            background: var(--accent, #4a75d1);
            color: #ffffff;
            padding: 11px 18px;
            border-radius: 999px;
            font-weight: 700;
            white-space: nowrap;
          }

          .nav-toggle {
            display: none;
            flex-shrink: 0;
            width: 42px;
            height: 42px;
            border-radius: 11px;
            border: 1px solid rgba(22, 33, 62, 0.14);
            background: #ffffff;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 0;
          }

          .nav-toggle-bar {
            display: block;
            width: 18px;
            height: 2px;
            border-radius: 2px;
            background: #16213e;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
          }

          .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
          }

          .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
            opacity: 0;
          }

          .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
          }

          @media (max-width: 880px) {
            .nav-toggle {
              display: inline-flex;
            }

            .nav-cta--desktop {
              display: none;
            }

            .nav-cta--mobile {
              display: flex;
            }

            .nav-links {
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              flex-direction: column;
              align-items: stretch;
              justify-content: flex-start;
              gap: 2px;
              background: #ffffff;
              border-bottom: 1px solid rgba(22, 33, 62, 0.08);
              box-shadow: 0 18px 40px -12px rgba(22, 33, 62, 0.22);
              padding: 4px clamp(20px, 4vw, 48px) 18px;
              max-height: 0;
              overflow: hidden;
              opacity: 0;
              transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
            }

            .nav-links.is-open {
              max-height: 420px;
              opacity: 1;
            }

            .nav-link {
              padding: 13px 2px;
              border-bottom: 1px solid rgba(22, 33, 62, 0.07);
              font-size: 12px;
            }

            .nav-link.active {
              border-bottom-color: var(--accent, #4a75d1);
            }

            .nav-link.active::after {
              display: none;
            }

            .nav-links .btn-pill-accent {
              margin-top: 12px;
              text-align: center;
              justify-content: center;
            }
          }

          @media (max-width: 400px) {
            .nav-logo-text {
              display: none;
            }
          }

          .hero {
            position: relative;
            background: #ffffff;
            overflow: hidden;
          }

          .hero-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(1100px 620px at 82% 6%,
                rgba(74, 117, 209, 0.2),
                transparent 62%),
              radial-gradient(700px 500px at 6% 92%,
                rgba(46, 107, 230, 0.1),
                transparent 60%);
            pointer-events: none;
          }

          .hero-grid-lines {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(22, 33, 62, 0.028) 1px, transparent 1px),
              linear-gradient(90deg,
                rgba(22, 33, 62, 0.028) 1px,
                transparent 1px);
            background-size: 56px 56px;
            mask-image: radial-gradient(900px 700px at 50% 20%,
                #000,
                transparent 78%);
            -webkit-mask-image: radial-gradient(900px 700px at 50% 20%,
                #000,
                transparent 78%);
            pointer-events: none;
          }

          .hero-trace-wrap {
            position: absolute;
            top: 22%;
            left: 0;
            right: 0;
            height: 1px;
            overflow: hidden;
            pointer-events: none;
          }

          .hero-trace-bar {
            width: 34%;
            height: 100%;
            background: linear-gradient(90deg,
                transparent,
                rgba(74, 117, 209, 0.85),
                transparent);
            animation: traceRun 7s linear infinite;
          }

          .hero-inner {
            position: relative;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: clamp(48px, 7vw, 104px) clamp(20px, 4vw, 48px) clamp(40px, 5vw, 72px);
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(400px, 100%), 1fr));
            gap: clamp(36px, 4.5vw, 72px);
            align-items: center;
          }

          .badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(74, 117, 209, 0.35);
            background: rgba(74, 117, 209, 0.08);
            padding: 7px 14px 7px 12px;
            border-radius: 999px;
            margin-bottom: clamp(22px, 3vw, 34px);
          }

          .pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent, #4a75d1);
            animation: pulseDot 2.2s ease-in-out infinite;
          }

          .badge-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #2f4e93;
          }

          .hero-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(42px, 6.4vw, 92px);
            line-height: 0.94;
            letter-spacing: -0.033em;
            margin: 0 0 clamp(20px, 2.6vw, 30px);
            color: #16213e;
            text-wrap: balance;
          }

          .text-accent {
            color: var(--accent, #4a75d1);
          }

          .hero-lede {
            font-size: clamp(16.5px, 1.35vw, 20px);
            line-height: 1.58;
            color: #55607a;
            max-width: 610px;
            margin: 0 0 clamp(28px, 3.4vw, 40px);
            text-wrap: pretty;
          }

          .cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: clamp(34px, 4vw, 52px);
          }

          .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent, #4a75d1);
            color: #ffffff;
            font-weight: 700;
            font-size: 15px;
            padding: 15px 26px;
            border-radius: 999px;
            box-shadow: 0 10px 34px rgba(74, 117, 209, 0.28);
          }

          .btn-icon {
            font-family: "JetBrains Mono", monospace;
            display: inline-block;
            transform: rotate(0deg);
            transition: transform 0.3s ease;
          }

          .btn-primary:hover .btn-icon {
            transform: rotate(45deg);
          }

          .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(22, 33, 62, 0.18);
            color: #16213e;
            font-weight: 600;
            font-size: 15px;
            padding: 15px 26px;
            border-radius: 999px;
          }

          .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 22px;
            padding-top: clamp(20px, 2.4vw, 28px);
            border-top: 1px solid rgba(22, 33, 62, 0.09);
          }

          .stat-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .text-strong {
            color: #16213e;
          }

          .hero-media {
            position: relative;
          }

          .hero-media-frame {
            position: relative;
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid rgba(22, 33, 62, 0.12);
            background: #efeeec;
            box-shadow: 0 40px 90px rgba(22, 33, 62, 0.16);
          }

          .img-full {
            width: 100%;
            display: block;
            height: 650px;
            object-fit: cover;
            object-position: center 15%;
          }

          .media-caption {
            position: absolute;
            left: 16px;
            bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(22, 33, 62, 0.12);
            padding: 8px 13px;
            border-radius: 999px;
          }

          .caption-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4a75d1;
          }

          .caption-text {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #2e2d2b;
          }

          .corner-tr {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 36px;
            height: 36px;
            border-top: 1px solid rgba(74, 117, 209, 0.6);
            border-right: 1px solid rgba(74, 117, 209, 0.6);
            pointer-events: none;
          }

          .corner-bl {
            position: absolute;
            bottom: -14px;
            left: -14px;
            width: 36px;
            height: 36px;
            border-bottom: 1px solid rgba(74, 117, 209, 0.6);
            border-left: 1px solid rgba(74, 117, 209, 0.6);
            pointer-events: none;
          }

          .section-tint {
            background: #f1f5fc;
            color: #16213e;
          }

          .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 48px);
          }

          .statement-text {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 4.1vw, 58px);
            line-height: 1.08;
            letter-spacing: -0.028em;
            margin: 0 0 clamp(44px, 5vw, 72px);
            max-width: 1000px;
            text-wrap: balance;
          }

          .text-accent-deep {
            color: #2f4e93;
          }

          .statement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(260px, 100%), 1fr));
            gap: clamp(28px, 3.4vw, 52px);
          }

          .statement-card {
            padding-top: 22px;
            border-top: 2px solid rgba(22, 33, 62, 0.18);
          }

          .statement-card-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 20px;
            letter-spacing: -0.01em;
            margin: 0 0 10px;
          }

          .statement-card-body {
            font-size: 16px;
            line-height: 1.6;
            color: #55607a;
            margin: 0;
            text-wrap: pretty;
          }

          .statement-card--muted {
            padding-top: 22px;
            border-top: 2px solid rgba(22, 33, 62, 0.18);
          }

          .section--relative {
            background: #ffffff;
            position: relative;
          }

          .section-kicker {
            display: flex;
            align-items: baseline;
            gap: 16px;
            margin-bottom: clamp(22px, 2.6vw, 32px);
          }

          .kicker-num {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent, #4a75d1);
          }

          .kicker-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .section-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 4.6vw, 66px);
            line-height: 1;
            letter-spacing: -0.028em;
            margin: 0 0 clamp(16px, 2vw, 22px);
            color: #16213e;
            text-wrap: balance;
          }

          .section-intro {
            font-size: clamp(16px, 1.25vw, 19px);
            line-height: 1.6;
            color: #55607a;
            max-width: 640px;
            margin: 0 0 clamp(40px, 5vw, 64px);
            text-wrap: pretty;
          }

          .flagship-card {
            border: 1px solid rgba(22, 33, 62, 0.11);
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(160deg, #eef4fd, #ffffff);
            margin-bottom: clamp(20px, 2.4vw, 28px);
          }

          .split-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(340px, 100%), 1fr));
          }

          .flagship-card .split-grid {
            grid-template-columns: 3fr 7fr;
          }

          @media (max-width: 700px) {
            .flagship-card .split-grid {
              grid-template-columns: 1fr;
            }
          }

          .flagship-media {
            background: #efeeec;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(24px, 3vw, 44px);
            min-height: 300px;
          }

          .img-contain-lg {
            width: 100%;
            max-width: 520px;
            display: block;
          }

          .flagship-content {
            padding: clamp(28px, 3.6vw, 52px);
            display: flex;
            flex-direction: column;
            justify-content: center;
          }

          .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
          }

          .tag-accent {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            background: rgba(74, 117, 209, 0.14);
            color: #2f4e93;
            border: 1px solid rgba(74, 117, 209, 0.3);
            padding: 5px 11px;
            border-radius: 999px;
          }

          .tag-neutral {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            background: rgba(22, 33, 62, 0.06);
            color: #55607a;
            border: 1px solid rgba(22, 33, 62, 0.12);
            padding: 5px 11px;
            border-radius: 999px;
          }

          .product-title-lg {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 3vw, 42px);
            line-height: 1.04;
            letter-spacing: -0.026em;
            margin: 0 0 6px;
            color: #16213e;
          }

          .product-eyebrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent, #4a75d1);
            margin: 0 0 18px;
          }

          .product-desc-lg {
            font-size: 16.5px;
            line-height: 1.62;
            color: #55607a;
            margin: 0 0 26px;
            text-wrap: pretty;
          }

          .spec-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: rgba(22, 33, 62, 0.09);
            border: 1px solid rgba(22, 33, 62, 0.09);
            border-radius: 12px;
            overflow: hidden;
          }

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

          .spec-tile {
            background: #f4f8fe;
            padding: 14px 16px;
          }

          .spec-number {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: 22px;
            color: #16213e;
          }

          .spec-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 9.5px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #7a86a0;
            margin-top: 3px;
          }

          .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(290px, 100%), 1fr));
            gap: clamp(20px, 2.4vw, 28px);
            margin-bottom: clamp(20px, 2.4vw, 28px);
          }

          .product-card {
            border: 1px solid rgba(22, 33, 62, 0.11);
            border-radius: 20px;
            overflow: hidden;
            background: #f4f8fe;
            display: flex;
            flex-direction: column;
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s,
              box-shadow 0.35s;
          }

          .product-card-media {
            background: #efeeec;
            padding: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 160px;
          }

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

          .product-card-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
          }

          .tag-row-sm {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
          }

          .tag-neutral-sm {
            font-family: "JetBrains Mono", monospace;
            font-size: 9.5px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            background: rgba(22, 33, 62, 0.06);
            color: #55607a;
            border: 1px solid rgba(22, 33, 62, 0.12);
            padding: 4px 9px;
            border-radius: 999px;
          }

          .product-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: 22px;
            letter-spacing: -0.02em;
            margin: 0 0 3px;
            color: #16213e;
          }

          .product-eyebrow-sm {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent, #4a75d1);
            margin: 0 0 8px;
          }

          .product-desc {
            font-size: 14.5px;
            line-height: 1.52;
            color: #55607a;
            margin: 0 0 12px;
            text-wrap: pretty;
          }

          .product-tagline {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 14.5px;
            line-height: 1.35;
            color: #16213e;
            margin: 0 0 6px;
            text-wrap: pretty;
          }

          .capability-strip {
            margin-top: auto;
            padding-top: 12px;
            border-top: 1px dashed rgba(22, 33, 62, 0.14);
          }

          .capability-strip-label {
            display: block;
            font-family: "JetBrains Mono", monospace;
            font-size: 9px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #8892a8;
            margin-bottom: 7px;
          }

          .capability-list {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 20px;
            padding: 0;
            list-style: none;
          }

          .capability-list li {
            font-family: "JetBrains Mono", monospace;
            font-size: 9.5px;
            letter-spacing: 0.01em;
            line-height: 1.3;
            color: #2f4e93;
            background: rgba(74, 117, 209, 0.08);
            border: 1px solid rgba(74, 117, 209, 0.18);
            padding: 4px 8px;
            border-radius: 999px;
            white-space: nowrap;
          }

          .product-card-media--empty {
            height: 160px;
            position: relative;
            background: #eef4fd;
          }

          .studio-card {
            border: 1px solid rgba(22, 33, 62, 0.11);
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(160deg, #eef4fd, #ffffff);
          }

          .studio-content {
            padding: clamp(28px, 3.6vw, 52px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            order: 2;
          }

          .tag-row-md {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 18px;
          }

          .tag-accent-alt {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            background: rgba(74, 117, 209, 0.12);
            color: #2f4e93;
            border: 1px solid rgba(74, 117, 209, 0.32);
            padding: 5px 11px;
            border-radius: 999px;
          }

          .product-title-md {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(26px, 2.8vw, 38px);
            line-height: 1.05;
            letter-spacing: -0.024em;
            margin: 0 0 6px;
            color: #16213e;
          }

          .product-desc-md {
            font-size: 16.5px;
            line-height: 1.62;
            color: #55607a;
            margin: 0 0 22px;
            text-wrap: pretty;
          }

          .link-arrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            border-bottom: 1px solid rgba(74, 117, 209, 0.4);
            padding-bottom: 3px;
          }

          .studio-media {
            background: #efeeec;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(20px, 2.4vw, 34px);
            order: 1;
            min-height: 280px;
          }

          .studio-swiper-frame {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 14px 40px rgba(22, 33, 62, 0.08);
          }

          .slide-img--contain {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: left;
          }

          .slide-img--fill {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
          }

          .slide-img--cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;

          }

          .slide-img--contain2 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right;
          }

          .kicker-num-static {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #2f4e93;
          }

          .section-title-how {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 4.6vw, 66px);
            line-height: 1;
            letter-spacing: -0.028em;
            margin: 0 0 clamp(44px, 5.5vw, 76px);
            text-wrap: balance;
          }

          .steps-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: clamp(24px, 3vw, 44px);
          }

          .step-number {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: 56px;
            line-height: 1;
            color: rgba(22, 33, 62, 0.14);
            margin-bottom: 8px;
          }

          .step-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 21px;
            letter-spacing: -0.012em;
            margin: 0 0 10px;
          }

          .step-desc {
            font-size: 15.5px;
            line-height: 1.62;
            color: #55607a;
            margin: 0;
            text-wrap: pretty;
          }

          .banner-card {
            margin-top: clamp(44px, 5.5vw, 76px);
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid rgba(22, 33, 62, 0.12);
            background: #e3ebfb;
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(320px, 100%), 1fr));
          }

          .banner-content {
            padding: clamp(26px, 3.2vw, 44px);
            display: flex;
            flex-direction: column;
            justify-content: center;
          }

          .banner-eyebrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #2f4e93;
            margin: 0 0 14px;
          }

          .banner-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(24px, 2.6vw, 34px);
            line-height: 1.08;
            letter-spacing: -0.022em;
            margin: 0 0 14px;
            text-wrap: balance;
          }

          .banner-desc {
            font-size: 16px;
            line-height: 1.62;
            color: #55607a;
            margin: 0 0 10px;
            padding-left: 22px;
            position: relative;
            text-wrap: pretty;
          }

          .banner-desc:last-child {
            margin-bottom: 0;
          }

          .banner-desc::before {
            content: "\2192";
            position: absolute;
            left: 0;
            color: var(--accent, #4a75d1);
            font-weight: 700;
          }

          .banner-media {
            background: #ffffff;
            min-height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
          }

          .img-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .demo-section {
            background: #eaf1fc;
            position: relative;
            overflow: hidden;
          }

          .demo-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(800px 500px at 50% 0%,
                rgba(74, 117, 209, 0.13),
                transparent 65%);
            pointer-events: none;
          }

          .container--relative {
            position: relative;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 48px);
          }

          .section-title-demo {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 4.6vw, 66px);
            line-height: 1;
            letter-spacing: -0.028em;
            margin: 0 0 16px;
            color: #16213e;
            text-wrap: balance;
          }

          .section-intro-demo {
            font-size: clamp(16px, 1.25vw, 19px);
            line-height: 1.6;
            color: #55607a;
            max-width: 620px;
            margin: 0 0 clamp(34px, 4vw, 52px);
            text-wrap: pretty;
          }

          .demo-card {
            border: 1px solid rgba(22, 33, 62, 0.12);
            border-radius: 24px;
            overflow: hidden;
            background: #f4f8fe;
            box-shadow: 0 40px 100px rgba(22, 33, 62, 0.18);
          }

          .demo-card-header {
            background: #e8effb;
            padding: 18px clamp(18px, 2.4vw, 28px);
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(22, 33, 62, 0.1);
          }

          .demo-header-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: #d7e4fa;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }

          .demo-header-glyph {
            font-family: "JetBrains Mono", monospace;
            font-size: 16px;
            font-weight: 700;
            color: #2f4e93;
          }

          .demo-header-title-wrap {
            flex: 1;
            min-width: 180px;
          }

          .demo-header-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: 19px;
            color: #16213e;
            letter-spacing: -0.012em;
          }

          .demo-header-subtitle {
            font-size: 13.5px;
            color: #7a86a0;
          }

          .demo-mode-badge {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #2f4e93;
            border: 1px solid rgba(47, 78, 147, 0.4);
            padding: 6px 13px;
            border-radius: 999px;
            background: #fff;
          }

          .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(300px, 100%), 1fr));
            gap: 1px;
            background: rgba(22, 33, 62, 0.08);
          }

          .demo-panel {
            background: #f4f8fe;
            padding: clamp(20px, 2.6vw, 30px);
          }

          .demo-step-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #7a86a0;
            margin: 0 0 14px;
          }

          .chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 26px;
          }

          .text-muted-sm {
            color: #93a0b8;
          }

          .port-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 26px;
          }

          .power-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 26px;
          }

          .demo-step-label--tight {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #7a86a0;
            margin: 0 0 16px;
          }

          .threshold-scale {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .demo-panel--alt {
            background: #f6f9fe;
            padding: clamp(20px, 2.6vw, 30px);
            display: flex;
            flex-direction: column;
            gap: 22px;
          }

          .reading-row {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            margin-bottom: 14px;
          }

          .reading-value {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: clamp(40px, 5vw, 64px);
            line-height: .9;
            letter-spacing: -.03em;
            color: #4ADE80;
          }

          .reading-unit-text {
            font-family: "JetBrains Mono", monospace;
            font-size: 13px;
            color: #7a86a0;
            padding-bottom: 8px;
          }

          .reading-track {
            position: relative;
            height: 8px;
            border-radius: 99px;
            background: rgba(22, 33, 62, 0.09);
            overflow: visible;
          }

          .reading-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            border-radius: 99px;
            background: #4ADE80;
            width: 50.0%;
            transition: width .5s ease-out;
          }

          .threshold-marker {
            position: absolute;
            top: -5px;
            bottom: -5px;
            width: 2px;
            background: #16213E;
            left: 38.0%;
            border-radius: 2px;
          }

          .status-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
          }

          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4ADE80;
          }

          .status-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #4ADE80;
          }

          .program-view {
            border-top: 1px solid rgba(22, 33, 62, 0.08);
            padding-top: 22px;
          }

          .program-blocks {
            display: flex;
            flex-direction: column;
            gap: 7px;
          }

          .program-block-when {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            background: #dce8fb;
            border: 1px solid rgba(74, 117, 209, 0.34);
            border-radius: 9px;
            padding: 10px 12px;
            font-family: "JetBrains Mono", monospace;
            font-size: 12px;
            color: #1b3a78;
          }

          .program-keyword {
            color: #2f4e93;
            font-weight: 700;
          }

          .program-chip {
            background: rgba(74, 117, 209, 0.22);
            padding: 3px 8px;
            border-radius: 5px;
          }

          .program-branch-a {
            margin-left: 18px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            border-radius: 9px;
            padding: 10px 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            background: #EEF3FC;
            border: 1px solid rgba(22, 33, 62, .08);
            color: #93A0B8;
            transition: background .3s, border-color .3s;
          }

          .text-bold {
            font-weight: 700;
          }

          .program-chip-neutral {
            background: rgba(22, 33, 62, 0.12);
            padding: 3px 8px;
            border-radius: 5px;
          }

          .program-chip-red {
            background: #ef4444;
            color: #fff;
            padding: 3px 8px;
            border-radius: 5px;
          }

          .text-faded {
            opacity: 0.65;
          }

          .program-block-otherwise {
            display: flex;
            align-items: center;
            gap: 6px;
            background: #eef3fc;
            border: 1px solid rgba(22, 33, 62, 0.1);
            border-radius: 9px;
            padding: 10px 12px;
            font-family: "JetBrains Mono", monospace;
            font-size: 12px;
            color: #55607a;
          }

          .program-branch-b {
            margin-left: 18px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            border-radius: 9px;
            padding: 10px 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            background: rgba(34, 197, 94, .14);
            border: 1px solid rgba(34, 197, 94, .4);
            color: #15803D;
            transition: background .3s, border-color .3s;
          }

          .program-chip-green {
            background: #22c55e;
            color: #06240f;
            padding: 3px 8px;
            border-radius: 5px;
          }

          .demo-footnote {
            font-size: 13px;
            line-height: 1.55;
            color: #7a86a0;
            margin: 16px 0 0;
            text-wrap: pretty;
          }

          .progress-header-row {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(300px, 100%), 1fr));
            gap: clamp(20px, 3vw, 48px);
            align-items: end;
            margin-bottom: clamp(44px, 5.5vw, 72px);
          }

          .section-title-flush {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 4.6vw, 66px);
            line-height: 1;
            letter-spacing: -0.028em;
            margin: 0;
            text-wrap: balance;
          }

          .section-intro-flush {
            font-size: 16.5px;
            line-height: 1.6;
            color: #55607a;
            margin: 0;
            text-wrap: pretty;
          }

          .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(240px, 100%), 1fr));
            gap: 1px;
            background: rgba(22, 33, 62, 0.14);
            border: 1px solid rgba(22, 33, 62, 0.14);
            border-radius: 18px;
            overflow: hidden;
          }

          .status-col {
            background: #e3ebfb;
            padding: clamp(22px, 2.6vw, 30px);
          }

          .status-col-header {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 20px;
          }

          .status-col-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #1f7a3d;
          }

          .status-col-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #1f7a3d;
            font-weight: 700;
          }

          .status-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
          }

          .status-item {
            font-size: 15px;
            line-height: 1.5;
            color: #16213e;
          }

          .status-col--light {
            background: #f1f5fc;
            padding: clamp(22px, 2.6vw, 30px);
          }

          .status-col-dot--pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent, #4a75d1);
            animation: pulseDot 2.2s ease-in-out infinite;
          }

          .status-col-label--accent {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #2f4e93;
            font-weight: 700;
          }

          .status-col-dot--muted {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(22, 33, 62, 0.3);
          }

          .status-col-label--muted {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #7a86a0;
            font-weight: 700;
          }

          .status-item--muted {
            font-size: 15px;
            line-height: 1.5;
            color: #55607a;
          }

          .status-col-dot--faint {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(22, 33, 62, 0.18);
          }

          .status-col-label--faint {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #93a0b8;
            font-weight: 700;
          }

          .status-item--faint {
            font-size: 15px;
            line-height: 1.5;
            color: #93a0b8;
          }

          .traction-block {
            margin-top: clamp(44px, 5.5vw, 76px);
          }

          .traction-header {
            display: flex;
            align-items: baseline;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 24px;
          }

          .traction-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(22px, 2.4vw, 30px);
            letter-spacing: -0.02em;
            margin: 0;
          }

          .traction-subtitle {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .traction-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(155px, 100%), 1fr));
            gap: 1px;
            background: rgba(22, 33, 62, 0.14);
            border: 1px solid rgba(22, 33, 62, 0.14);
            border-radius: 16px;
            overflow: hidden;
          }

          .traction-tile {
            background: #f1f5fc;
            padding: 24px 22px;
          }

          .traction-number {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 3.6vw, 46px);
            line-height: 1;
            letter-spacing: -0.03em;
          }

          .traction-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 9.5px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #7a86a0;
            margin-top: 8px;
          }

          .traction-tile--accent {
            background: #e3ebfb;
            padding: 24px 22px;
          }

          .traction-number--accent {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 3.6vw, 46px);
            line-height: 1;
            letter-spacing: -0.03em;
            color: #2f4e93;
          }

          .section {
            background: #ffffff;
          }

          .container--tight {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 48px);
          }

          .section-title-updates {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(34px, 4.6vw, 66px);
            line-height: 1;
            letter-spacing: -0.028em;
            margin: 0 0 clamp(36px, 4.5vw, 60px);
            color: #16213e;
            text-wrap: balance;
          }

          .cr-dot-1 {
            left: 17.4%;
            top: 50%;
          }

          .cr-dot-2 {
            left: 39.1%;
            top: 50%;
          }

          .cr-dot-3 {
            left: 60.9%;
            top: 50%;
          }

          .cr-dot-4 {
            left: 82.6%;
            top: 50%;
          }

          .cr-node-1 {
            left: 6.5%;
            top: 58.7%;
            transform: translate(-50%, -50%);
            background: #f5a524;
          }

          .cr-info-1 {
            left: 6.5%;
            bottom: 61%;
          }

          .cr-info-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
          }

          .cr-info-dot-1 {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #f5a524;
            flex-shrink: 0;
          }

          .cr-node-2 {
            left: 28.3%;
            top: 41.3%;
            transform: translate(-50%, -50%);
            background: #2e6be6;
          }

          .cr-info-2 {
            left: 28.3%;
            top: 61%;
            transform: translateX(-50%);
          }

          .cr-info-dot-2 {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #2e6be6;
            flex-shrink: 0;
          }

          .cr-node-3 {
            left: 50%;
            top: 58.7%;
            transform: translate(-50%, -50%);
            background: #22c55e;
          }

          .cr-info-3 {
            left: 50%;
            bottom: 61%;
            transform: translateX(-50%);
          }

          .cr-info-dot-3 {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            flex-shrink: 0;
          }

          .cr-node-4 {
            left: 71.7%;
            top: 41.3%;
            transform: translate(-50%, -50%);
            background: var(--accent, #4a75d1);
          }

          .cr-info-4 {
            left: 71.7%;
            top: 61%;
            transform: translateX(-50%);
          }

          .cr-info-dot-4 {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent, #4a75d1);
            flex-shrink: 0;
          }

          .cr-node-5 {
            left: 93.5%;
            top: 58.7%;
            transform: translate(-50%, -50%);
            color: #16213e;
          }

          .text-purple {
            color: #16213e;
          }

          .cr-info-5 {
            left: 93.5%;
            bottom: 61%;
            transform: translateX(-100%);
            text-align: right;
          }

          .cr-info-meta--end {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            margin-bottom: 6px;
          }

          .cr-info-dot-5 {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #16213e;
            flex-shrink: 0;
          }

          /* ------------------------------------------------------------------ */
          /* Mobile build-log timeline — connected cards, replaces the winding   */
          /* road visual below 760px where absolute-positioned nodes get cramped */
          /* ------------------------------------------------------------------ */
          .timeline-list {
            display: none;
            list-style: none;
            margin: 0;
            padding: 0;
          }

          .timeline-item {
            display: flex;
            align-items: stretch;
            gap: 16px;
          }

          .timeline-item:not(:last-child) {
            padding-bottom: 22px;
          }

          .timeline-marker {
            flex-shrink: 0;
            width: 16px;
            position: relative;
            display: flex;
            justify-content: center;
          }

          .timeline-marker::before {
            content: "";
            position: absolute;
            top: 22px;
            bottom: -22px;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            background: rgba(22, 33, 62, 0.14);
          }

          .timeline-item:last-child .timeline-marker::before {
            display: none;
          }

          .timeline-marker-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-top: 14px;
            box-shadow: 0 0 0 4px #ffffff;
            position: relative;
            z-index: 1;
          }

          .timeline-marker-dot-1 {
            background: #f5a524;
          }

          .timeline-marker-dot-2 {
            background: #2e6be6;
          }

          .timeline-marker-dot-3 {
            background: #22c55e;
          }

          .timeline-marker-dot-4 {
            background: var(--accent, #4a75d1);
          }

          .timeline-marker-dot-5 {
            background: #ffffff;
            border: 2px dashed #16213e;
            box-shadow: 0 0 0 4px #ffffff;
          }

          .timeline-card {
            flex: 1;
            min-width: 0;
            background: #f8fafd;
            border: 1px solid rgba(22, 33, 62, 0.1);
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
          }

          .timeline-card--target {
            background: #f6f3fe;
            border-color: rgba(139, 92, 246, 0.28);
            border-style: dashed;
          }

          .timeline-card-img {
            width: 100%;
            height: 128px;
            object-fit: cover;
            border-radius: 10px;
            display: block;
            margin-bottom: 12px;
          }

          .timeline-card-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
          }

          .timeline-card-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
          }

          .timeline-card-dot-1 {
            background: #f5a524;
          }

          .timeline-card-dot-2 {
            background: #2e6be6;
          }

          .timeline-card-dot-3 {
            background: #22c55e;
          }

          .timeline-card-dot-4 {
            background: var(--accent, #4a75d1);
          }

          .timeline-card-dot-5 {
            background: #16213e;
          }

          .timeline-card-date {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .timeline-card-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: -0.01em;
            line-height: 1.28;
            margin: 0 0 6px;
            color: #16213e;
          }

          .timeline-card-desc {
            font-size: 13.5px;
            line-height: 1.5;
            color: #55607a;
            margin: 0;
            text-wrap: pretty;
          }

          @media (max-width: 760px) {
            .cr-road-wrap {
              display: none;
            }

            .timeline-list {
              display: block;
            }
          }

          .faq-section {
            background: #ffffff;
            border-top: 1px solid rgba(22, 33, 62, 0.06);
          }

          .container--narrow {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 48px);
          }

          .section-title-faq {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(30px, 3.8vw, 52px);
            line-height: 1;
            letter-spacing: -0.026em;
            margin: 0 0 clamp(34px, 4vw, 52px);
            color: #16213e;
            text-wrap: balance;
          }

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

          .faq-item {
            border-top: 1px solid rgba(22, 33, 62, 0.1);
          }

          .faq-summary {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 22px 0;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: clamp(17px, 1.6vw, 21px);
            letter-spacing: -0.012em;
            color: #16213e;
          }

          .faq-question {
            flex: 1;
          }

          .faq-plus {
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border: 1px solid rgba(22, 33, 62, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent, #4a75d1);
            font-family: "JetBrains Mono", monospace;
            font-size: 14px;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
          }

          .faq-answer {
            font-size: 16px;
            line-height: 1.62;
            color: #55607a;
            margin: 0 0 24px;
            max-width: 760px;
            text-wrap: pretty;
          }

          .faq-item--last {
            border-top: 1px solid rgba(22, 33, 62, 0.1);
            border-bottom: 1px solid rgba(22, 33, 62, 0.1);
          }

          .partner-section {
            background: var(--accent, #4a75d1);
            color: #ffffff;
          }

          .partner-header {
            max-width: 900px;
            margin-bottom: clamp(40px, 5vw, 64px);
          }

          .partner-eyebrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.72);
            margin: 0 0 20px;
          }

          .partner-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(36px, 5.4vw, 80px);
            line-height: 0.98;
            letter-spacing: -0.032em;
            margin: 0 0 20px;
            text-wrap: balance;
          }

          .partner-desc {
            font-size: clamp(16.5px, 1.35vw, 20px);
            line-height: 1.55;
            color: rgba(255, 255, 255, 0.85);
            margin: 0;
            text-wrap: pretty;
          }

          .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(250px, 100%), 1fr));
            gap: clamp(16px, 2vw, 22px);
          }

          .contact-card {
            background: #ffffff;
            border-radius: 18px;
            padding: clamp(24px, 2.8vw, 32px);
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: inherit;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
          }

          .contact-eyebrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #2f4e93;
          }

          .contact-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: 23px;
            letter-spacing: -0.02em;
            color: #16213e;
          }

          .contact-desc {
            font-size: 15px;
            line-height: 1.55;
            color: #55607a;
            text-wrap: pretty;
          }

          .contact-link {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent, #4a75d1);
            margin-top: 6px;
          }

          .contact-section {
            background: #ffffff;
            border-top: 1px solid rgba(22, 33, 62, 0.06);
          }

          .contact-card {
            border: 1px solid rgba(22, 33, 62, 0.11);
            border-radius: 24px;
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0 30px 70px -40px rgba(22, 33, 62, 0.28);
          }

          .contact-card-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
          }

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

          .contact-form-panel {
            padding: clamp(28px, 3.6vw, 48px);
          }

          .contact-panel-eyebrow {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent, #4a75d1);
            margin: 0 0 20px;
          }

          .contact-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
          }

          .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
            gap: 16px;
          }

          .form-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
          }

          .form-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 10.5px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #7a86a0;
          }

          .form-input {
            font-family: inherit;
            font-size: 15px;
            color: #16213e;
            background: #f4f8fe;
            border: 1px solid rgba(22, 33, 62, 0.13);
            border-radius: 12px;
            padding: 13px 15px;
            transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
          }

          .form-input::placeholder {
            color: #96a1b8;
          }

          .form-input:focus {
            outline: none;
            border-color: var(--accent, #4a75d1);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(74, 117, 209, 0.14);
          }

          .form-textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.55;
          }

          .btn-form-submit {
            border: none;
            cursor: pointer;
            align-self: flex-start;
            margin-top: 6px;
          }

          .btn-form-submit:disabled {
            opacity: 0.6;
            cursor: default;
          }

          .form-status {
            font-size: 13.5px;
            font-weight: 600;
            color: #55607a;
            margin: 0;
            min-height: 1.3em;
          }

          .form-status--ok {
            color: #1f8a4c;
          }

          .form-status--error {
            color: #c0433a;
          }

          .contact-info-panel {
            background: linear-gradient(165deg, #eef4fd, #e3ebfb);
            padding: clamp(28px, 3.6vw, 48px);
            display: flex;
            flex-direction: column;
            border-radius: 24px 24px 24px 24px;
            gap: 22px;
            border-left: 1px solid rgba(22, 33, 62, 0.08);
          }

          @media (max-width: 760px) {
            .contact-info-panel {
              border-left: none;
              border-top: 1px solid rgba(22, 33, 62, 0.08);
            }
          }

          .contact-map {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(22, 33, 62, 0.12);
            background: #ffffff;
            aspect-ratio: 4 / 3;
          }

          .contact-map iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
          }

          .contact-details {
            display: flex;
            flex-direction: column;
            gap: 18px;
          }

          .contact-detail-row {
            display: flex;
            align-items: flex-start;
            gap: 14px;
          }

          .contact-detail-icon {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #ffffff;
            border: 1px solid rgba(22, 33, 62, 0.1);
            color: var(--accent, #4a75d1);
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .contact-detail-body {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
          }

          .contact-detail-label {
            font-family: "JetBrains Mono", monospace;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #6b7690;
          }

          .contact-detail-text {
            font-size: 14.5px;
            line-height: 1.55;
            color: #384057;
            margin: 0;
            text-wrap: pretty;
          }

          .contact-detail-link {
            font-size: 14.5px;
            color: #16213e;
            font-weight: 600;
          }

          .contact-detail-link:hover {
            color: var(--accent, #4a75d1);
          }

          .footer {
            background: #ffffff;
            border-top: 1px solid rgba(22, 33, 62, 0.08);
          }

          .footer-inner {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 48px);
          }

          .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
            gap: clamp(32px, 4vw, 56px);
            align-items: start;
            margin-bottom: clamp(36px, 4vw, 56px);
          }

          .mark-wrap-dim {
            display: inline-block;
            margin-bottom: 14px;
            cursor: pointer;
          }

          .mark-img-dim {
            height: 34px;
            width: auto;
            display: block;
          }

          .footer-col-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #7A86A0;
            margin: 0 0 4px;
          }

          .footer-blurb {
            font-size: 14.5px;
            line-height: 1.6;
            color: #7A86A0;
            margin: 0;
            max-width: 280px;
            text-wrap: pretty;
          }

          .footer-heading {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #7A86A0;
            margin: 0 0 16px;
          }

          .footer-col {
            display: flex;
            flex-direction: column;
            gap: 10px;
          }

          .footer-link {
            font-size: 15px;
            color: #55607A;
          }

          .footer-link--email {
            font-size: 15px;
          }

          .footer-muted {
            font-size: 15px;
            color: #7A86A0;
          }

          .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 24px;
            justify-content: space-between;
            align-items: center;
            padding-top: 24px;
            border-top: 1px solid rgba(22, 33, 62, .08);
          }

          .footer-bottom-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #7A86A0;
          }


          /* Hover states */

          .nav-link:hover {
            color: #16213E;
          }

          .btn-pill-accent:hover {
            background: #3A63C0;
          }

          .btn-primary:hover {
            background: #3A63C0;
            color: #FFFFFF;
          }

          .btn-secondary:hover {
            border-color: rgba(22, 33, 62, .42);
            background: rgba(22, 33, 62, .04);
            color: #16213E;
          }

          .product-card:hover {
            transform: translateY(-5px);
            border-color: rgba(74, 117, 209, .42);
            box-shadow: 0 12px 28px rgba(22, 33, 62, .16);
          }

          a.contact-card:hover .btn-icon {
            transform: rotate(45deg);
          }

          .contact-card:hover {
            transform: translateY(-5px);
            color: inherit;
          }

          .footer-link:hover {
            color: #16213E;
          }

          /* Why choose us */

          .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,
                minmax(min(280px, 100%), 1fr));
            gap: clamp(20px, 2.4vw, 28px);
          }

          .why-card {
            padding: clamp(24px, 2.8vw, 32px);
            border: 1px solid rgba(22, 33, 62, 0.11);
            border-radius: 18px;
            background: #f4f8fe;
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s,
              box-shadow 0.35s;
          }

          .why-card:hover {
            transform: translateY(-5px);
            border-color: rgba(74, 117, 209, 0.42);
            box-shadow: 0 12px 28px rgba(22, 33, 62, 0.16);
          }

          .why-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(74, 117, 209, 0.12);
            color: #2f4e93;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
          }

          .why-title {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 600;
            font-size: 19px;
            letter-spacing: -0.01em;
            margin: 0 0 8px;
            color: #16213e;
          }

          .why-desc {
            font-size: 15px;
            line-height: 1.6;
            color: #55607a;
            margin: 0;
            text-wrap: pretty;
          }