:root {
        --ink: #09182a;
        --ink2: #12253e;
        --mut: #637288;
        --line: #dce5ee;
        --soft: #f5f8fc;
        --blue: #1677ee;
        --cyan: #16b8df;
        --green: #148363;
        --amber: #a76818;
        --red: #b94a4a;
        --white: #fff;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: #fff;
        color: var(--ink);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          "Segoe UI",
          sans-serif;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      button,
      input {
        font: inherit;
      }
      .w {
        width: min(1180px, calc(100% - 42px));
        margin: auto;
      }
      nav {
        height: 72px;
        position: sticky;
        top: 0;
        z-index: 30;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid #edf1f5;
      }
      .nav {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .logo {
        width: 155px;
        height: 60px;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
      .links {
        display: flex;
        align-items: center;
        gap: 25px;
        font-size: 12px;
        font-weight: 750;
        color: #526176;
      }
      .navcta {
        background: var(--ink);
        color: white;
        border-radius: 8px;
        padding: 10px 14px;
      }
      .hero {
        padding: 100px 0 82px;
        background: linear-gradient(180deg, #fff 0, #fbfdff 100%);
      }
      .ey {
        font:
          800 10px ui-monospace,
          SFMono-Regular,
          Menlo,
          monospace;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: #56799f;
      }
      .ey:before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 1px;
        background: var(--blue);
        margin-right: 9px;
        vertical-align: middle;
      }
      h1 {
        font-size: clamp(54px, 7.4vw, 88px);
        line-height: 0.96;
        letter-spacing: -0.068em;
        margin: 22px 0 25px;
        max-width: 980px;
      }
      .blue {
        color: var(--blue);
      }
      .lead {
        font-size: 19px;
        line-height: 1.68;
        color: var(--mut);
        max-width: 820px;
        margin: 0;
      }
      .heroNav {
        display: flex;
        gap: 8px;
        margin-top: 29px;
      }
      .arrow {
        width: 35px;
        height: 35px;
        border: 1px solid #d4dfe9;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: white;
        font-weight: 900;
        transition: 0.18s;
      }
      .arrow:hover {
        transform: translateY(2px);
        border-color: #91b8e8;
        background: #f5f9ff;
      }
      .system {
        margin-top: 68px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 24px 65px rgba(17, 47, 82, 0.07);
      }
      .sysbar {
        height: 46px;
        border-bottom: 1px solid #e7edf3;
        padding: 0 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font:
          750 9px ui-monospace,
          monospace;
        color: #718297;
      }
      .live {
        color: var(--green);
      }
      .canvas {
        height: 450px;
        position: relative;
        background-image:
          linear-gradient(#0c335205 1px, transparent 1px),
          linear-gradient(90deg, #0c335205 1px, transparent 1px);
        background-size: 38px 38px;
        overflow: hidden;
      }
      .hub {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 230px;
        height: 126px;
        border: 1px solid #a9c8ec;
        border-radius: 18px;
        background: linear-gradient(145deg, #f7fbff, #edf6ff);
        box-shadow: 0 18px 45px rgba(28, 103, 190, 0.12);
        z-index: 4;
        padding: 22px;
      }
      .hub small,
      .node small {
        font:
          800 8px ui-monospace,
          monospace;
        color: #6782a1;
        letter-spacing: 0.07em;
      }
      .hub b {
        display: block;
        font-size: 17px;
        margin-top: 9px;
      }
      .hub span {
        font-size: 10px;
        color: #708197;
      }
      .node {
        position: absolute;
        width: 148px;
        border: 1px solid #dbe5ee;
        background: #fff;
        border-radius: 12px;
        padding: 13px;
        z-index: 3;
        box-shadow: 0 7px 20px rgba(20, 48, 80, 0.04);
      }
      .node b {
        display: block;
        font-size: 11px;
        margin-top: 7px;
      }
      .node span {
        display: block;
        font-size: 9px;
        color: #78889b;
        margin-top: 3px;
      }
      .email {
        left: 5%;
        top: 18%;
      }
      .excel {
        left: 5%;
        bottom: 18%;
      }
      .erp {
        left: 25%;
        top: 9%;
      }
      .docs {
        left: 25%;
        bottom: 9%;
      }
      .crm {
        right: 25%;
        top: 9%;
      }
      .api {
        right: 25%;
        bottom: 9%;
      }
      .people {
        right: 5%;
        top: 18%;
      }
      .systems {
        right: 5%;
        bottom: 18%;
      }
      .line {
        position: absolute;
        height: 1px;
        background: #d7e3ee;
        transform-origin: left center;
        z-index: 1;
      }
      .l1 {
        left: 17%;
        top: 28%;
        width: 34%;
        transform: rotate(16deg);
      }
      .l2 {
        left: 17%;
        top: 72%;
        width: 34%;
        transform: rotate(-16deg);
      }
      .l3 {
        left: 37%;
        top: 20%;
        width: 17%;
        transform: rotate(47deg);
      }
      .l4 {
        left: 37%;
        top: 80%;
        width: 17%;
        transform: rotate(-47deg);
      }
      .l5 {
        left: 50%;
        top: 50%;
        width: 36%;
        transform: rotate(-18deg);
      }
      .l6 {
        left: 50%;
        top: 50%;
        width: 36%;
        transform: rotate(18deg);
      }
      .pulse {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 14px #1677ee88;
        z-index: 5;
        animation: orbit 18s linear infinite;
      }
      @keyframes orbit {
        0% {
          left: 11%;
          top: 26%;
          opacity: 0;
        }
        6% {
          opacity: 1;
        }
        18% {
          left: 42%;
          top: 44%;
        }
        30% {
          left: 49%;
          top: 49%;
        }
        46% {
          left: 71%;
          top: 26%;
        }
        56% {
          left: 49%;
          top: 49%;
        }
        70% {
          left: 72%;
          top: 72%;
        }
        82% {
          left: 49%;
          top: 49%;
        }
        95% {
          left: 89%;
          top: 27%;
          opacity: 1;
        }
        100% {
          left: 92%;
          top: 27%;
          opacity: 0;
        }
      }
      .exception {
        position: absolute;
        right: 5%;
        top: 48%;
        padding: 8px 10px;
        border: 1px solid #f0d2aa;
        background: #fff9f0;
        border-radius: 7px;
        color: var(--amber);
        font:
          800 9px ui-monospace,
          monospace;
        opacity: 0;
        animation: exc 18s linear infinite;
      }
      @keyframes exc {
        0%,
        68% {
          opacity: 0;
          transform: translateY(6px);
        }
        76%,
        91% {
          opacity: 1;
          transform: none;
        }
        100% {
          opacity: 0;
        }
      }
      section {
        padding: 94px 0;
      }
      .soft {
        background: var(--soft);
      }
      .head {
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 70px;
        align-items: end;
      }
      .head h2,
      .side h2 {
        font-size: clamp(38px, 5vw, 58px);
        line-height: 1.04;
        letter-spacing: -0.052em;
        margin: 12px 0;
      }
      .head p,
      .copy {
        font-size: 16px;
        line-height: 1.68;
        color: var(--mut);
      }
      .problemGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 11px;
        margin-top: 40px;
      }
      .problem {
        border: 1px solid var(--line);
        background: white;
        border-radius: 14px;
        padding: 20px;
        min-height: 135px;
      }
      .problem i {
        font-style: normal;
        font:
          800 9px ui-monospace,
          monospace;
        color: #7190b4;
      }
      .problem b {
        display: block;
        font-size: 14px;
        margin: 23px 0 7px;
      }
      .problem p {
        font-size: 11px;
        line-height: 1.5;
        color: #77869a;
        margin: 0;
      }
      .statement {
        font-size: clamp(25px, 3.2vw, 38px);
        line-height: 1.2;
        letter-spacing: -0.035em;
        margin: 44px 0 0;
        max-width: 870px;
      }
      .buildGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 42px;
      }
      .build {
        border-top: 2px solid var(--ink);
        padding: 22px 4px 8px;
      }
      .build small {
        font:
          800 9px ui-monospace,
          monospace;
        color: var(--blue);
      }
      .build h3 {
        font-size: 18px;
        margin: 17px 0 8px;
      }
      .build p {
        font-size: 13px;
        line-height: 1.6;
        color: #718095;
        margin: 0;
      }
      .method {
        background: var(--ink);
        color: white;
      }
      .method .ey {
        color: #69b7ff;
      }
      .method .copy {
        color: #9cb0c7;
      }
      .methodFlow {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-top: 42px;
        border-top: 1px solid #ffffff1d;
        border-bottom: 1px solid #ffffff1d;
      }
      .step {
        padding: 23px 15px;
        border-right: 1px solid #ffffff1d;
      }
      .step:last-child {
        border: 0;
      }
      .step small {
        font:
          800 8px ui-monospace,
          monospace;
        color: #66c6ed;
      }
      .step b {
        display: block;
        font-size: 12px;
        margin: 12px 0 6px;
      }
      .step p {
        font-size: 10px;
        line-height: 1.5;
        color: #8fa4bc;
        margin: 0;
      }
      .philosophy {
        margin-top: 30px;
        font-size: 20px;
        letter-spacing: -0.02em;
        color: #dbe8f5;
      }
      .product {
        display: grid;
        grid-template-columns: 1.03fr 0.97fr;
        gap: 62px;
        align-items: center;
      }
      .mock {
        border: 1px solid #d7e1eb;
        background: #edf3f9;
        border-radius: 20px;
        padding: 10px;
        box-shadow: 0 22px 55px rgba(17, 45, 77, 0.09);
      }
      .screen {
        background: white;
        border-radius: 13px;
        overflow: hidden;
      }
      .screenbar {
        height: 35px;
        border-bottom: 1px solid #e8edf2;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font:
          750 8px ui-monospace,
          monospace;
        color: #75869a;
      }
      .dash {
        padding: 17px;
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .stat {
        background: #f4f7fa;
        border-radius: 9px;
        padding: 12px;
      }
      .stat small {
        font:
          750 7px ui-monospace,
          monospace;
        color: #8190a1;
      }
      .stat b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }
      .route {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 16px 0;
        font-size: 9px;
        color: #718196;
      }
      .route span {
        padding: 7px;
        background: #f3f7fb;
        border-radius: 6px;
      }
      .route i {
        font-style: normal;
        color: var(--blue);
      }
      .rows div {
        display: grid;
        grid-template-columns: 1fr 0.7fr 0.55fr;
        padding: 9px 2px;
        border-top: 1px solid #e8edf2;
        font-size: 9px;
        color: #65758a;
      }
      .tag {
        display: inline-block;
        padding: 7px 9px;
        border-radius: 7px;
        background: #eaf3ff;
        color: #2676d6;
        font:
          800 9px ui-monospace,
          monospace;
      }
      .checks {
        display: grid;
        gap: 10px;
        margin: 23px 0;
      }
      .check {
        font-size: 13px;
        color: #5e6e82;
      }
      .check:before {
        content: "✓";
        color: var(--green);
        font-weight: 900;
        margin-right: 9px;
      }
      .demo {
        background: var(--soft);
      }
      .demoShell {
        margin-top: 42px;
        background: white;
        border: 1px solid #dbe4ed;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(17, 43, 73, 0.06);
      }
      .dtop {
        padding: 14px 18px;
        border-bottom: 1px solid #e5ebf1;
        display: flex;
        justify-content: space-between;
        font:
          750 9px ui-monospace,
          monospace;
        color: #748397;
      }
      .privacy {
        color: var(--green);
      }
      .dbody {
        padding: 24px;
      }
      .tasks {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 9px;
      }
      .task {
        border: 1px solid #dce4ed;
        border-radius: 11px;
        padding: 13px;
        cursor: pointer;
        min-height: 105px;
      }
      .task.sel {
        border-color: var(--blue);
        box-shadow: inset 0 0 0 1px var(--blue);
        background: #f5f9ff;
      }
      .task input {
        display: none;
      }
      .task i {
        font-style: normal;
        font:
          800 8px ui-monospace,
          monospace;
        color: #2f78cc;
      }
      .task b {
        display: block;
        font-size: 11px;
        margin: 10px 0 5px;
      }
      .task p {
        font-size: 9px;
        color: #78879a;
        line-height: 1.4;
        margin: 0;
      }
      .upload {
        margin-top: 17px;
        border: 1px dashed #b8c7d7;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        background: #fbfcfe;
      }
      .upload.drag {
        border-color: var(--blue);
        background: #f3f8ff;
      }
      .upload p {
        font-size: 10px;
        color: #7a899b;
      }
      .choose {
        display: inline-block;
        background: var(--ink);
        color: white;
        border-radius: 7px;
        padding: 9px 13px;
        font-size: 11px;
        font-weight: 850;
        cursor: pointer;
      }
      .meta {
        font-size: 10px;
        color: #617188;
        margin-top: 9px;
      }
      .runrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-top: 14px;
      }
      .hint {
        font-size: 9px;
        line-height: 1.5;
        color: #7c8b9e;
        max-width: 680px;
      }
      .btn {
        border: 1px solid #d5dfe9;
        background: white;
        color: var(--ink);
        padding: 11px 15px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 850;
        cursor: pointer;
      }
      .btn.bluebtn {
        background: var(--blue);
        color: white;
        border-color: var(--blue);
      }
      .err {
        display: none;
        margin-top: 15px;
        padding: 11px;
        border: 1px solid #efcaca;
        background: #fff7f7;
        color: var(--red);
        border-radius: 8px;
        font-size: 11px;
      }
      .err.show,
      .proc.show,
      .results.show {
        display: block;
      }
      .proc,
      .results {
        display: none;
        margin-top: 19px;
        border-top: 1px solid #e3e9ef;
        padding-top: 19px;
      }
      .loader {
        height: 4px;
        background: #edf1f5;
        border-radius: 99px;
        overflow: hidden;
      }
      .loader:after {
        content: "";
        display: block;
        width: 28%;
        height: 100%;
        background: linear-gradient(90deg, var(--blue), var(--cyan));
        animation: load 1s infinite alternate;
      }
      @keyframes load {
        to {
          transform: translateX(255%);
        }
      }
      .pt {
        font:
          750 9px ui-monospace,
          monospace;
        color: #718196;
        margin-top: 9px;
      }
      .summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
      .metric {
        background: #f4f7fa;
        border-radius: 9px;
        padding: 12px;
      }
      .metric small {
        font:
          750 7px ui-monospace,
          monospace;
        color: #7b899a;
      }
      .metric b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }
      .tw {
        overflow: auto;
        margin-top: 13px;
        border: 1px solid #e0e7ee;
        border-radius: 9px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        min-width: 650px;
        font-size: 9px;
      }
      th,
      td {
        text-align: left;
        padding: 9px 10px;
        border-bottom: 1px solid #e8edf2;
        white-space: nowrap;
      }
      th {
        background: #f7f9fb;
        font:
          750 8px ui-monospace,
          monospace;
        color: #6d7d90;
      }
      .badge {
        padding: 4px 6px;
        border-radius: 99px;
        font-size: 8px;
        font-weight: 850;
        background: #fff2df;
        color: #9b5f16;
      }
      .note {
        font-size: 9px;
        color: #7c8b9d;
        line-height: 1.55;
        margin-top: 11px;
      }
      .bridge {
        padding: 92px 0;
      }
      .compare {
        display: grid;
        grid-template-columns: 1fr 70px 1fr;
        align-items: center;
        margin-top: 40px;
      }
      .compareBox {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 24px;
        min-height: 210px;
      }
      .compareBox.real {
        background: linear-gradient(145deg, #f7fbff, #edf6ff);
        border-color: #bad4f1;
      }
      .compareBox small {
        font:
          800 9px ui-monospace,
          monospace;
        color: #6e86a2;
      }
      .compareBox h3 {
        font-size: 18px;
        margin: 14px 0;
      }
      .chain {
        font:
          750 11px ui-monospace,
          monospace;
        color: #66778c;
        line-height: 2;
      }
      .versus {
        text-align: center;
        color: var(--blue);
        font-weight: 900;
      }
      .quote {
        margin-top: 36px;
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.25;
        letter-spacing: -0.035em;
        max-width: 900px;
      }
      .cta {
        padding: 0 0 90px;
      }
      .ctaBox {
        background: linear-gradient(120deg, #0b1d35, #0d437e);
        color: white;
        border-radius: 22px;
        padding: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
      }
      .ctaBox h2 {
        font-size: clamp(32px, 4vw, 48px);
        letter-spacing: -0.045em;
        margin: 0 0 10px;
      }
      .ctaBox p {
        color: #bed1e5;
        line-height: 1.6;
        max-width: 650px;
        margin: 0;
      }
      .ctaBtn {
        background: white;
        color: var(--ink);
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 850;
        white-space: nowrap;
      }
      footer {
        padding: 35px 0;
      }
      .foot {
        border-top: 1px solid var(--line);
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        color: #758397;
        font-size: 10px;
      }
      @media (max-width: 950px) {
        .links a:not(.navcta) {
          display: none;
        }
        .head,
        .product {
          grid-template-columns: 1fr;
        }
        .problemGrid,
        .buildGrid {
          grid-template-columns: 1fr 1fr;
        }
        .methodFlow {
          grid-template-columns: repeat(2, 1fr);
        }
        .tasks {
          grid-template-columns: repeat(2, 1fr);
        }
        .canvas {
          height: 580px;
        }
        .node {
          width: 38%;
        }
        .email {
          left: 5%;
          top: 7%;
        }
        .erp {
          right: 5%;
          left: auto;
          top: 7%;
        }
        .excel {
          left: 5%;
          bottom: 7%;
        }
        .docs {
          right: 5%;
          left: auto;
          bottom: 7%;
        }
        .crm,
        .api,
        .people,
        .systems,
        .line {
          display: none;
        }
        .compare {
          grid-template-columns: 1fr;
        }
        .versus {
          padding: 14px;
        }
        .ctaBox {
          display: block;
        }
        .ctaBtn {
          display: inline-block;
          margin-top: 22px;
        }
      }
      @media (max-width: 580px) {
        .w {
          width: min(100% - 26px, 1180px);
        }
        .logo {
          width: 140px;
        }
        .hero {
          padding: 65px 0 55px;
        }
        .lead {
          font-size: 16px;
        }
        .canvas {
          height: 560px;
        }
        .hub {
          width: 70%;
          height: 120px;
        }
        .node {
          width: 42%;
        }
        .problemGrid,
        .buildGrid,
        .tasks {
          grid-template-columns: 1fr;
        }
        .methodFlow {
          grid-template-columns: 1fr;
        }
        .summary {
          grid-template-columns: 1fr 1fr;
        }
        .runrow {
          display: block;
        }
        .runrow .btn {
          width: 100%;
          margin-top: 10px;
        }
        .dtop {
          flex-direction: column;
          gap: 7px;
        }
        .ctaBox {
          padding: 30px 24px;
        }
        .foot {
          flex-direction: column;
          gap: 9px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .pulse,
        .exception,
        .loader:after {
          animation: none;
        }
      }