:root {
        --paper: #ffffff;
        --fog: #f2f3f5;
        --card: #ffffff;
        --ink: #000000;
        --graphite: #2b2d33;
        --muted: #61646d;
        --line: #e2e4e9;
        --accent: #1f4dff;
        --accent-2: #1238d8;
        --accent-soft: #e9eeff;
        --on-accent: #ffffff;
        --nav-bg: rgba(255, 255, 255, 0.8);
        --band: #000000;
        --band-ink: #ffffff;
        --band-line: #26282e;
        --band-muted: #a3a6af;
        --shadow:
          0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 40px -22px rgba(12, 24, 70, 0.28);
        --err: #d93636;
        --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
        --f-body:
          "Geist", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        color-scheme: light;
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --paper: #07080a;
          --fog: #0f1115;
          --card: #15171c;
          --ink: #f5f6f8;
          --graphite: #d3d6dd;
          --muted: #9a9ea8;
          --line: #272a31;
          --accent: #5b80ff;
          --accent-2: #4a70ff;
          --accent-soft: #141d3d;
          --nav-bg: rgba(7, 8, 10, 0.74);
          --band: #0f1115;
          --band-line: #2a2d35;
          --band-muted: #a3a7b1;
          --err: #ff7a7a;
          --shadow:
            0 1px 0 rgba(255, 255, 255, 0.03) inset,
            0 20px 44px -24px rgba(0, 0, 0, 0.95);
          color-scheme: dark;
        }
      }
      :root[data-theme="dark"] {
        --paper: #07080a;
        --fog: #0f1115;
        --card: #15171c;
        --ink: #f5f6f8;
        --graphite: #d3d6dd;
        --muted: #9a9ea8;
        --line: #272a31;
        --accent: #5b80ff;
        --accent-2: #4a70ff;
        --accent-soft: #141d3d;
        --nav-bg: rgba(7, 8, 10, 0.74);
        --band: #0f1115;
        --band-line: #2a2d35;
        --band-muted: #a3a7b1;
        --err: #ff7a7a;
        --shadow:
          0 1px 0 rgba(255, 255, 255, 0.03) inset,
          0 20px 44px -24px rgba(0, 0, 0, 0.95);
        color-scheme: dark;
      }
      html {
        scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px));
        -webkit-text-size-adjust: 100%;
      }
      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }
      body {
        margin: 0;
        background: var(--paper);
        color: var(--graphite);
        font: 400 17px/1.6 var(--f-body);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img,
      svg {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        color: inherit;
        cursor: pointer;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: var(--f-display);
        color: var(--ink);
        margin: 0;
        font-weight: 700;
      }
      h1 {
        font-size: clamp(42px, 6vw, 90px);
        line-height: 0.94;
        letter-spacing: -0.04em;
      }
      h2 {
        font-size: clamp(32px, 4.4vw, 58px);
        line-height: 1.02;
        letter-spacing: -0.032em;
      }
      h3 {
        font-size: 21px;
        line-height: 1.25;
        letter-spacing: -0.012em;
      }
      h4 {
        font-size: 16px;
        letter-spacing: -0.005em;
      }
      p {
        margin: 0;
      }
      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
        border-radius: 4px;
      }
      .wrap {
        max-width: 1260px;
        margin: 0 auto;
        padding: 0 clamp(20px, 4vw, 44px);
      }
      .ic {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .sec {
        padding: clamp(72px, 10vw, 132px) 0;
      }
      .sec.tight {
        padding: clamp(48px, 6vw, 80px) 0;
      }
      .fog {
        background: var(--fog);
      }
      .lead {
        font-size: clamp(17px, 1.5vw, 20px);
        color: var(--muted);
        max-width: 60ch;
      }
      .muted {
        color: var(--muted);
      }
      .sh {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px 40px;
        align-items: end;
        margin-bottom: clamp(36px, 5vw, 60px);
      }
      .sh h2 {
        max-width: 17ch;
      }
      .sh .lead {
        grid-column: 1/-1;
        max-width: 58ch;
      }
      .mark {
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        width: 14px;
        height: 14px;
        margin-bottom: 18px;
      }
      .mark i {
        background: var(--ink);
      }
      .mark i:nth-child(4) {
        background: var(--accent);
      }

      /* buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 50px;
        padding: 0 22px;
        border-radius: 10px;
        border: 1px solid transparent;
        font-weight: 600;
        font-size: 15.5px;
        letter-spacing: -0.005em;
        transition:
          background 0.25s var(--ease),
          color 0.25s,
          border-color 0.25s,
          transform 0.35s var(--ease);
        will-change: transform;
        white-space: nowrap;
      }
      .btn .ic {
        width: 18px;
        height: 18px;
        transition: transform 0.3s var(--ease);
      }
      .btn:hover .ic {
        transform: translateX(3px);
      }
      .btn-ink {
        background: var(--ink);
        color: var(--paper);
      }
      .btn-ink:hover {
        background: var(--accent);
        color: var(--on-accent);
      }
      .btn-acc {
        background: var(--accent);
        color: var(--on-accent);
      }
      .btn-acc:hover {
        background: var(--accent-2);
      }
      .btn-line {
        border-color: var(--line);
        background: var(--card);
        color: var(--ink);
      }
      .btn-line:hover {
        border-color: var(--ink);
      }
      .btn-sm {
        height: 40px;
        padding: 0 16px;
        font-size: 14.5px;
        border-radius: 8px;
      }

      .lnk {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: var(--ink);
        font-size: 15px;
      }
      .lnk .ic {
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--ease);
      }
      .lnk:hover {
        color: var(--accent);
      }
      .lnk:hover .ic {
        transform: translateX(4px);
      }
      .row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
      }

      /* nav */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding-top: env(safe-area-inset-top, 0px);
        transition:
          background 0.3s,
          border-color 0.3s,
          backdrop-filter 0.3s;
        border-bottom: 1px solid transparent;
      }
      .nav.scrolled {
        background: var(--nav-bg);
        backdrop-filter: saturate(1.6) blur(14px);
        -webkit-backdrop-filter: saturate(1.6) blur(14px);
        border-color: var(--line);
      }
      .nav .wrap {
        display: flex;
        align-items: center;
        gap: 28px;
        height: 76px;
        transition: height 0.3s var(--ease);
      }
      .nav.scrolled .wrap {
        height: 64px;
      }
      .logo {
        color: var(--ink);
        display: flex;
        flex: none;
      }
      .logo svg {
        height: 38px;
        width: auto;
      }
      .menu {
        display: flex;
        gap: 2px;
        margin-left: auto;
        align-items: center;
      }
      .menu > a,
      .menu > .dd > a {
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 14.5px;
        white-space: nowrap;
        font-weight: 500;
        color: var(--graphite);
        transition:
          color 0.2s,
          background 0.2s;
      }
      .menu > a:hover,
      .menu > .dd > a:hover,
      .menu a.on {
        color: var(--ink);
        background: var(--fog);
      }
      .dd {
        position: relative;
      }
      .ddp {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translate(-50%, 8px);
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        width: 560px;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.22s,
          transform 0.3s var(--ease),
          visibility 0.22s;
      }
      .dd::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 14px;
      }
      .dd:hover .ddp,
      .dd:focus-within .ddp {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
      }
      .ddp a {
        display: flex;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 9px;
        align-items: flex-start;
        transition: background 0.2s;
      }
      .ddp a:hover {
        background: var(--fog);
      }
      .ddp a .ic {
        color: var(--accent);
        margin-top: 2px;
        width: 20px;
        height: 20px;
      }
      .ddp b {
        display: block;
        font-size: 14.5px;
        color: var(--ink);
        font-weight: 600;
      }
      .ddp small {
        display: block;
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.4;
      }
      .nav-cta {
        margin-left: 10px;
      }
      .burger {
        display: none;
        margin-left: auto;
        background: none;
        border: 1px solid var(--line);
        border-radius: 10px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: var(--ink);
      }
      .mnav {
        position: fixed;
        inset: 0;
        z-index: 49;
        background: var(--paper);
        padding: calc(90px + env(safe-area-inset-top, 0px)) 24px
          calc(30px + env(safe-area-inset-bottom, 0px));
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.25s,
          visibility 0.25s;
      }
      .mnav.open {
        opacity: 1;
        visibility: visible;
      }
      .mnav a {
        display: block;
        font: 600 28px/1.25 var(--f-display);
        color: var(--ink);
        padding: 9px 0;
        letter-spacing: -0.02em;
        border-bottom: 1px solid var(--line);
        transform: translateY(12px);
        opacity: 0;
        transition:
          transform 0.45s var(--ease),
          opacity 0.45s;
      }
      .mnav.open a {
        transform: none;
        opacity: 1;
      }
      .mnav .btn {
        margin-top: 24px;
        width: 100%;
        justify-content: center;
      }
      @media (max-width: 1240px) {
        .menu,
        .nav-cta {
          display: none;
        }
        .burger {
          display: flex;
        }
      }

      /* hero */
      .hero {
        padding: calc(150px + env(safe-area-inset-top, 0px)) 0
          clamp(60px, 8vw, 100px);
        position: relative;
        overflow: hidden;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      .hero h1 .ln {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        padding-bottom: 0.06em;
      }
      .hero h1 .ln > span {
        display: block;
        transform: translateY(105%);
        animation: rise 0.95s var(--ease) forwards;
      }
      .hero h1 .ln:nth-child(2) > span {
        animation-delay: 0.12s;
      }
      .hero h1 .ln:nth-child(3) > span {
        animation-delay: 0.24s;
      }
      .hero h1 .ln:nth-child(3) {
        color: var(--accent);
      }
      @keyframes rise {
        to {
          transform: none;
        }
      }
      .hero .lead {
        margin: 30px 0 36px;
        opacity: 0;
        animation: fadeIn 0.8s 0.5s var(--ease) forwards;
      }
      .hero .row {
        opacity: 0;
        animation: fadeIn 0.8s 0.65s var(--ease) forwards;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .hero-meta {
        margin-top: 44px;
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
        font-size: 14px;
        color: var(--muted);
        opacity: 0;
        animation: fadeIn 0.8s 0.8s var(--ease) forwards;
      }
      .hero-meta span {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .hero-meta .ic {
        width: 16px;
        height: 16px;
        color: var(--accent);
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(
          ellipse 70% 60% at 70% 40%,
          #000 10%,
          transparent 75%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 70% 60% at 70% 40%,
          #000 10%,
          transparent 75%
        );
        opacity: 0.7;
      }

      /* module grid — the signature element, echoes the logo's cell grid */
      .mgrid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border: 2px solid var(--ink);
        grid-auto-rows: minmax(clamp(112px, 11vw, 150px), auto);
        background: var(--card);
        opacity: 0;
        animation: fadeIn 1s 0.35s var(--ease) forwards;
      }
      .cell {
        position: relative;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: clamp(10px, 1.6vw, 18px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition:
          background 0.5s var(--ease),
          color 0.5s;
        overflow: hidden;
        cursor: default;
      }
      .cell:nth-child(3n) {
        border-right: 0;
      }
      .cell:nth-child(n + 7) {
        border-bottom: 0;
      }
      .cell .ic {
        width: clamp(20px, 2.2vw, 28px);
        height: clamp(20px, 2.2vw, 28px);
        color: var(--ink);
        transition:
          color 0.5s,
          transform 0.6s var(--ease);
      }
      .cell b {
        font: 600 clamp(12px, 1.15vw, 15px)/1.2 var(--f-display);
        color: var(--ink);
        transition: color 0.5s;
      }
      .cell small {
        font-size: 11.5px;
        color: var(--muted);
        transition: color 0.5s;
      }
      .cell::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 3px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.8s var(--ease);
      }
      .cell.lit {
        background: var(--ink);
      }
      .cell.lit b,
      .cell.lit .ic {
        color: var(--paper);
      }
      .cell.lit small {
        color: var(--band-muted);
      }
      .cell.lit .ic {
        transform: scale(1.12);
      }
      .cell.lit::after {
        transform: scaleX(1);
      }
      .cell.core {
        background: var(--accent);
      }
      .cell.core b,
      .cell.core .ic {
        color: #fff;
      }
      .cell.core small {
        color: rgba(255, 255, 255, 0.75);
      }
      .cell.core .pulse {
        position: absolute;
        right: 14px;
        top: 14px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #fff;
      }
      .cell.core .pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid #fff;
        animation: ping 1.8s infinite;
      }
      @keyframes ping {
        from {
          transform: scale(1);
          opacity: 1;
        }
        to {
          transform: scale(3.2);
          opacity: 0;
        }
      }
      .mgrid-cap {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        font-size: 12.5px;
        color: var(--muted);
      }
      @media (max-width: 900px) {
        .hero h1 .ln {
          white-space: normal;
        }
        .hero-grid {
          grid-template-columns: 1fr;
        }
        .mgrid {
          max-width: 460px;
        }
      }

      /* reveal */
      .rv {
        opacity: 0;
        translate: 0 26px;
        transition:
          opacity 0.8s var(--ease),
          translate 0.9s var(--ease);
        transition-delay: var(--d, 0s);
      }
      .rv.in {
        opacity: 1;
        translate: 0 0;
      }

      /* marquee */
      .logos {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 30px 0;
      }
      .logos-head {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        margin-bottom: 22px;
        font-size: 14.5px;
        color: var(--muted);
      }
      .logos-head b {
        color: var(--ink);
        font-weight: 600;
      }
      .mq {
        overflow: hidden;
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 8%,
          #000 92%,
          transparent
        );
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 8%,
          #000 92%,
          transparent
        );
      }
      .mq-t {
        display: flex;
        gap: 16px;
        width: max-content;
        animation: mq 40s linear infinite;
      }
      .mq:hover .mq-t {
        animation-play-state: paused;
      }
      @keyframes mq {
        to {
          transform: translateX(-50%);
        }
      }
      .lslot {
        width: 170px;
        height: 64px;
        border: 1px dashed var(--line);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        flex: none;
        transition:
          border-color 0.3s,
          color 0.3s;
      }
      .lslot:hover {
        border-color: var(--ink);
        color: var(--ink);
      }
      .lslot .ic {
        width: 16px;
        height: 16px;
      }

      /* cards */
      .grid {
        display: grid;
        gap: 18px;
      }
      .g2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .g3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .g4 {
        grid-template-columns: repeat(4, 1fr);
      }
      @media (max-width: 1023px) {
        .g3,
        .g4 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 767px) {
        .g2,
        .g3,
        .g4 {
          grid-template-columns: 1fr;
        }
      }
      .card {
        position: relative;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 28px;
        transition:
          transform 0.45s var(--ease),
          border-color 0.3s,
          box-shadow 0.45s var(--ease);
        overflow: hidden;
      }
      .card:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--ink) 30%, var(--line));
        box-shadow: var(--shadow);
      }
      .spot::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          420px circle at var(--mx, 50%) var(--my, 50%),
          color-mix(in srgb, var(--accent) 9%, transparent),
          transparent 45%
        );
        opacity: 0;
        transition: opacity 0.35s;
      }
      .spot:hover::before {
        opacity: 1;
      }
      .card .ic.big {
        width: 30px;
        height: 30px;
        color: var(--ink);
        margin-bottom: 22px;
        transition:
          color 0.3s,
          transform 0.5s var(--ease);
      }
      .card:hover .ic.big {
        color: var(--accent);
        transform: translateY(-2px) rotate(-4deg);
      }
      .card h3 {
        margin-bottom: 10px;
      }
      .card p {
        color: var(--muted);
        font-size: 15.5px;
      }
      .card .foot {
        margin-top: 22px;
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .chip {
        font-size: 13px;
        padding: 5px 11px;
        border-radius: 999px;
        background: var(--fog);
        color: var(--graphite);
        border: 1px solid transparent;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      .chip.acc {
        background: var(--accent-soft);
        color: var(--accent);
      }
      .chip:hover {
        border-color: var(--line);
      }
      .ticks {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 8px;
      }
      .ticks li {
        display: flex;
        gap: 10px;
        font-size: 15px;
        align-items: flex-start;
      }
      .ticks .ic {
        width: 17px;
        height: 17px;
        color: var(--accent);
        margin-top: 3px;
      }

      /* what we do band */
      .wwd {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        background: var(--card);
      }
      .wwd > div {
        padding: 34px 30px;
        border-right: 1px solid var(--line);
        transition: background 0.4s var(--ease);
      }
      .wwd > div:last-child {
        border-right: 0;
      }
      .wwd > div:hover {
        background: var(--fog);
      }
      .wwd .ic {
        width: 30px;
        height: 30px;
        color: var(--accent);
        margin-bottom: 40px;
      }
      .wwd h3 {
        margin-bottom: 8px;
      }
      .wwd p {
        font-size: 15px;
        color: var(--muted);
      }
      @media (max-width: 1023px) {
        .wwd {
          grid-template-columns: 1fr 1fr;
        }
        .wwd > div:nth-child(2) {
          border-right: 0;
        }
        .wwd > div:nth-child(-n + 2) {
          border-bottom: 1px solid var(--line);
        }
      }
      @media (max-width: 600px) {
        .wwd {
          grid-template-columns: 1fr;
        }
        .wwd > div {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
      }

      /* service list */
      .svc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line);
      }
      .svc a {
        padding: 28px 26px 28px 0;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 16px;
        align-items: start;
        transition: padding 0.45s var(--ease);
      }
      .svc a:hover {
        padding-left: 12px;
      }
      .svc a .ic {
        grid-row: span 2;
        color: var(--ink);
        transition: color 0.3s;
      }
      .svc a:hover .ic {
        color: var(--accent);
      }
      .svc a b {
        font: 600 18px/1.3 var(--f-display);
        color: var(--ink);
        letter-spacing: -0.01em;
      }
      .svc a span {
        font-size: 14.5px;
        color: var(--muted);
      }
      @media (max-width: 1023px) {
        .svc {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 640px) {
        .svc {
          grid-template-columns: 1fr;
        }
      }

      /* product cards */
      .pc {
        display: flex;
        flex-direction: column;
      }
      .pc .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 22px;
      }
      .pc .ibox {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        background: var(--fog);
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.35s,
          color 0.35s;
      }
      .pc .ibox .ic {
        width: 26px;
        height: 26px;
        color: var(--ink);
      }
      .pc:hover .ibox {
        background: var(--ink);
      }
      .pc:hover .ibox .ic {
        color: var(--paper);
      }
      .pc .ticks {
        margin: 18px 0 20px;
      }
      .pc .ticks li {
        font-size: 14.5px;
      }
      .pc .pind {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 20px;
      }
      .pc .foot {
        margin-top: auto;
      }
      .pc.feat.wide {
        grid-column: span 2;
      }
      .pc.feat {
        background: var(--band);
        color: var(--band-muted);
        border-color: var(--band-line);
      }
      .pc.feat h3,
      .pc.feat .lnk {
        color: var(--band-ink);
      }
      .pc.feat p,
      .pc.feat .pind {
        color: var(--band-muted);
      }
      .pc.feat .ibox {
        background: var(--accent);
      }
      .pc.feat .ibox .ic {
        color: #fff;
      }
      .pc.feat .ticks li {
        color: var(--band-ink);
      }
      .pc.feat .btn-line {
        background: transparent;
        border-color: var(--band-line);
        color: var(--band-ink);
      }
      .pc.feat .btn-line:hover {
        border-color: var(--band-ink);
      }
      @media (max-width: 767px) {
        .pc.feat.wide {
          grid-column: auto;
        }
      }
      .tag {
        font-size: 12px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        color: var(--muted);
        white-space: nowrap;
      }
      .pc.feat .tag {
        border-color: var(--band-line);
        color: var(--band-muted);
      }

      /* AI band */
      .band {
        background: var(--band);
        color: var(--band-muted);
      }
      .band h2,
      .band h3 {
        color: var(--band-ink);
      }
      .band .lead {
        color: var(--band-muted);
      }
      .ai-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      @media (max-width: 900px) {
        .ai-grid {
          grid-template-columns: 1fr;
        }
      }
      .flow {
        width: 100%;
        height: auto;
      }
      .flow .n rect {
        fill: #0f1014;
        stroke: var(--band-line);
      }
      .flow .n text {
        fill: #fff;
        font: 600 13px var(--f-body);
      }
      .flow .n .s {
        fill: var(--band-muted);
        font: 400 11px var(--f-body);
      }
      .flow .n.k rect {
        fill: var(--accent);
        stroke: var(--accent);
      }
      .flow .n.k .s {
        fill: rgba(255, 255, 255, 0.75);
      }
      .flow path {
        fill: none;
        stroke: #34373f;
        stroke-width: 1.5;
      }
      .flow path.d {
        stroke: var(--accent);
        stroke-width: 2;
        stroke-dasharray: 6 10;
        animation: dash 1.6s linear infinite;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: -32;
        }
      }
      .flow .dot {
        fill: var(--accent);
      }
      .ai-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--band-line);
        border: 1px solid var(--band-line);
        border-radius: 16px;
        overflow: hidden;
        margin-top: clamp(40px, 6vw, 70px);
      }
      .ai-cards a {
        background: var(--band);
        padding: 30px;
        transition: background 0.35s;
      }
      .ai-cards a:hover {
        background: color-mix(in srgb, var(--band-ink) 5%, var(--band));
      }
      .ai-cards .ic {
        color: var(--accent);
        width: 28px;
        height: 28px;
        margin-bottom: 30px;
      }
      .ai-cards h3 {
        margin-bottom: 8px;
      }
      .ai-cards p {
        font-size: 15px;
      }
      .ai-cards .lnk {
        color: #fff;
        margin-top: 20px;
      }
      @media (max-width: 900px) {
        .ai-cards {
          grid-template-columns: 1fr;
        }
      }

      /* industries */
      .ind-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
      }
      .ind {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 22px 20px;
        background: var(--card);
        transition:
          background 0.35s,
          color 0.35s,
          transform 0.45s var(--ease);
      }
      .ind .ic {
        width: 26px;
        height: 26px;
        margin-bottom: 28px;
        color: var(--ink);
        transition: color 0.3s;
      }
      .ind b {
        font: 600 16px/1.3 var(--f-display);
        color: var(--ink);
        display: block;
        transition: color 0.3s;
      }
      .ind span {
        font-size: 13px;
        color: var(--muted);
        transition: color 0.3s;
        display: block;
        margin-top: 4px;
      }
      .ind:hover {
        background: var(--ink);
        transform: translateY(-4px);
      }
      .ind:hover b,
      .ind:hover .ic {
        color: var(--paper);
      }
      .ind:hover span {
        color: var(--band-muted);
      }
      @media (max-width: 1023px) {
        .ind-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 640px) {
        .ind-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      /* projects */
      .filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 34px;
      }
      .filters button {
        border: 1px solid var(--line);
        background: var(--card);
        border-radius: 999px;
        padding: 9px 18px;
        font-size: 14.5px;
        font-weight: 500;
        transition: all 0.25s;
      }
      .filters button:hover {
        border-color: var(--ink);
      }
      .filters button.on {
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
      }
      .pj {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        text-align: left;
        padding: 0;
        transition:
          transform 0.5s var(--ease),
          box-shadow 0.5s var(--ease),
          opacity 0.35s;
        display: flex;
        flex-direction: column;
      }
      .pj:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
      }
      .pj .img {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/10;
        background: var(--fog);
        border-bottom: 1px solid var(--line);
      }
      .pj .img svg,
      .pj .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
        transition: transform 0.9s var(--ease);
      }
      .pj:hover .img svg,
      .pj:hover .img img {
        transform: scale(1.06);
      }
      .pj .ov {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--ink) 55%, transparent);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s;
      }
      .pj:hover .ov,
      .pj:focus-visible .ov {
        opacity: 1;
      }
      .pj .ov span {
        background: var(--paper);
        color: var(--ink);
        padding: 11px 18px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 14.5px;
        display: flex;
        gap: 8px;
        align-items: center;
        transform: translateY(12px);
        transition: transform 0.45s var(--ease);
      }
      .pj:hover .ov span {
        transform: none;
      }
      .pj .ov .ic {
        width: 16px;
        height: 16px;
      }
      .pj .bd {
        padding: 22px 22px 24px;
      }
      .pj .meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      .pj h3 {
        font-size: 19px;
        margin-bottom: 8px;
      }
      .pj p {
        font-size: 14.5px;
        color: var(--muted);
      }
      .pj.hide {
        display: none;
      }
      .ph {
        position: absolute;
        left: 12px;
        top: 12px;
        font-size: 11.5px;
        font-weight: 600;
        background: var(--paper);
        color: var(--muted);
        padding: 4px 9px;
        border-radius: 6px;
        border: 1px solid var(--line);
      }

      /* mocks */
      .m-bg {
        fill: var(--fog);
      }
      .m-card {
        fill: var(--card);
      }
      .m-line {
        fill: var(--line);
      }
      .m-ink {
        fill: var(--ink);
      }
      .m-mut {
        fill: var(--muted);
        opacity: 0.32;
      }
      .m-acc {
        fill: var(--accent);
      }
      .m-soft {
        fill: var(--accent-soft);
      }
      .m-str {
        fill: none;
        stroke: var(--line);
      }
      .m-astr {
        fill: none;
        stroke: var(--accent);
        stroke-width: 2;
      }
      .m-tag {
        font: 600 8.5px var(--f-body);
        fill: var(--muted);
      }

      /* gov */
      .gov {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 40px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: clamp(28px, 4vw, 52px);
        background: var(--card);
      }
      .gov .emb {
        width: 84px;
        height: 84px;
        border: 2px solid var(--ink);
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .gov .emb i {
        border: 1px solid var(--line);
      }
      .gov .emb i:nth-child(1) {
        background: var(--ink);
      }
      .gov .emb i:nth-child(4) {
        background: var(--accent);
      }
      .gov h2 {
        font-size: clamp(28px, 3.2vw, 42px);
        margin-bottom: 12px;
      }
      @media (max-width: 900px) {
        .gov {
          grid-template-columns: 1fr;
        }
      }

      /* tech */
      .tech {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid var(--line);
      }
      .tech > div {
        padding: 26px 22px 26px 0;
        border-bottom: 1px solid var(--line);
      }
      .tech h4 {
        margin-bottom: 14px;
        font-weight: 600;
      }
      .tech ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 7px;
      }
      .tech li {
        font-size: 15px;
        color: var(--muted);
        transition:
          color 0.2s,
          transform 0.3s var(--ease);
      }
      .tech li:hover {
        color: var(--ink);
        transform: translateX(4px);
      }
      @media (max-width: 1023px) {
        .tech {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 640px) {
        .tech {
          grid-template-columns: 1fr 1fr;
        }
      }
      .wordmq {
        margin-top: 50px;
      }
      .wordmq .mq-t {
        gap: 56px;
        animation-duration: 32s;
      }
      .wordmq span {
        font: 700 clamp(28px, 4vw, 52px)/1 var(--f-display);
        letter-spacing: -0.03em;
        color: transparent;
        -webkit-text-stroke: 1px var(--muted);
        white-space: nowrap;
        transition: color 0.3s;
      }
      .wordmq span:hover {
        color: var(--ink);
      }

      /* why */
      .why {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(30px, 6vw, 90px);
      }
      .why .sticky {
        position: sticky;
        top: 120px;
        align-self: start;
      }
      .why-list > div {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding: 26px 0;
        border-bottom: 1px solid var(--line);
      }
      .why-list > div:first-child {
        border-top: 1px solid var(--line);
      }
      .why-list .ic {
        width: 26px;
        height: 26px;
        color: var(--accent);
        margin-top: 2px;
      }
      .why-list h3 {
        margin-bottom: 6px;
      }
      .why-list p {
        color: var(--muted);
        font-size: 15.5px;
      }
      @media (max-width: 900px) {
        .why {
          grid-template-columns: 1fr;
        }
        .why .sticky {
          position: static;
        }
      }

      /* process */
      .proc {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
        padding-top: 34px;
      }
      .proc .track {
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--line);
      }
      .proc .fill {
        position: absolute;
        top: 8px;
        left: 0;
        height: 2px;
        background: var(--accent);
        width: 0;
        transition: width 0.2s linear;
      }
      .proc .st {
        position: relative;
      }
      .proc .st::before {
        content: "";
        position: absolute;
        top: -32px;
        left: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--paper);
        border: 2px solid var(--line);
        transition:
          border-color 0.4s,
          background 0.4s,
          transform 0.4s var(--ease);
      }
      .proc .st.on::before {
        border-color: var(--accent);
        background: var(--accent);
        transform: scale(1.15);
      }
      .proc .n {
        font: 700 14px var(--f-display);
        color: var(--accent);
        margin-bottom: 10px;
        display: block;
      }
      .proc h3 {
        font-size: 20px;
        margin-bottom: 6px;
      }
      .proc p {
        font-size: 14.5px;
        color: var(--muted);
      }
      @media (max-width: 900px) {
        .proc {
          grid-template-columns: 1fr;
          padding: 0 0 0 34px;
          gap: 30px;
        }
        .proc .track {
          top: 0;
          bottom: 0;
          left: 6px;
          width: 2px;
          height: auto;
          right: auto;
        }
        .proc .fill {
          left: 6px;
          top: 0;
          width: 2px;
          height: 0;
          transition: height 0.2s linear;
        }
        .proc .st::before {
          top: 4px;
          left: -34px;
        }
      }

      /* stats */
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 2px solid var(--ink);
      }
      .stats > div {
        padding: 28px 20px 10px 0;
      }
      .stats b {
        font: 700 clamp(46px, 6vw, 80px)/1 var(--f-display);
        color: var(--ink);
        letter-spacing: -0.045em;
        display: block;
      }
      .stats span {
        color: var(--muted);
        font-size: 15px;
        display: block;
        margin-top: 10px;
        max-width: 22ch;
      }
      @media (max-width: 900px) {
        .stats {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
      }

      /* testimonials */
      .tgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .tgrid .tcard:first-child {
        grid-column: span 2;
      }
      .tgrid .tcard:first-child blockquote {
        font-size: clamp(18px, 1.6vw, 22px);
      }
      .tgrid .tslot {
        grid-column: span 1;
      }
      .tcard {
        margin: 0;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 34px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        justify-content: space-between;
      }
      .tcard .q {
        font: 700 56px/0.6 var(--f-display);
        color: var(--accent);
      }
      .tcard blockquote {
        margin: 0;
        font: 500 clamp(16px, 1.3vw, 18px)/1.55 var(--f-display);
        color: var(--ink);
        letter-spacing: -0.01em;
      }
      .tcard .who {
        display: flex;
        gap: 12px;
        align-items: center;
        font-size: 14px;
        flex-wrap: wrap;
      }
      .tcard .who b {
        display: block;
        color: var(--ink);
      }
      .tcard .who small {
        color: var(--muted);
      }
      .tcard .av {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--ink);
        color: var(--paper);
        font: 700 15px var(--f-display);
      }
      .ttags {
        margin-left: auto;
        display: flex;
        gap: 6px;
      }
      .ttags i {
        font-style: normal;
        font-size: 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 10px;
        color: var(--muted);
      }
      .tgrid .tslot {
        min-height: 0;
        gap: 18px;
      }
      .tgrid .tslot .btn {
        align-self: flex-start;
      }
      @media (max-width: 980px) {
        .tgrid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 700px) {
        .tgrid {
          grid-template-columns: 1fr;
        }
        .tgrid .tcard:first-child {
          grid-column: auto;
        }
        .ttags {
          margin-left: 0;
        }
      }

      .tslot {
        border: 1px dashed var(--line);
        border-radius: 14px;
        padding: 30px;
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--muted);
      }
      .tslot .q {
        font: 600 44px/1 var(--f-display);
        color: var(--line);
      }
      .tslot .who {
        display: flex;
        gap: 12px;
        align-items: center;
        font-size: 14px;
      }
      .tslot .av {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--fog);
      }

      /* faq */
      .faq {
        border-top: 1px solid var(--line);
      }
      .faq details {
        border-bottom: 1px solid var(--line);
      }
      .faq summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 24px 0;
        font: 600 clamp(17px, 1.6vw, 20px)/1.35 var(--f-display);
        color: var(--ink);
        letter-spacing: -0.01em;
      }
      .faq summary::-webkit-details-marker {
        display: none;
      }
      .faq summary .pm {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        transition:
          transform 0.45s var(--ease),
          background 0.3s,
          color 0.3s;
      }
      .faq summary:hover .pm {
        border-color: var(--ink);
      }
      .faq details[open] summary .pm {
        transform: rotate(45deg);
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
      }
      .faq .ans {
        overflow: hidden;
        color: var(--muted);
        max-width: 70ch;
      }
      .faq .ans p {
        padding: 0 0 26px;
      }
      .faq-wrap {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: clamp(30px, 6vw, 90px);
      }
      @media (max-width: 900px) {
        .faq-wrap {
          grid-template-columns: 1fr;
        }
      }

      /* final cta */
      .fcta {
        border-radius: 22px;
        background: var(--band);
        color: var(--band-muted);
        padding: clamp(40px, 7vw, 96px);
        position: relative;
        overflow: hidden;
      }
      .fcta h2 {
        color: #fff;
        max-width: 18ch;
        margin-bottom: 22px;
      }
      .fcta p {
        max-width: 52ch;
        margin-bottom: 34px;
        font-size: 18px;
      }
      .fcta .btn-line {
        background: transparent;
        color: #fff;
        border-color: var(--band-line);
      }
      .fcta .btn-line:hover {
        border-color: #fff;
      }
      .fcta .btn-ink {
        background: #fff;
        color: #000;
      }
      .fcta .btn-ink:hover {
        background: var(--accent);
        color: #fff;
      }
      .fcta .cells {
        position: absolute;
        right: -40px;
        top: -40px;
        display: grid;
        grid-template-columns: repeat(3, 90px);
        gap: 0;
        opacity: 0.9;
      }
      .fcta .cells i {
        width: 90px;
        height: 90px;
        border: 1px solid var(--band-line);
        transition: background 0.6s;
      }
      .fcta .cells i.a {
        background: var(--accent);
      }
      @media (max-width: 767px) {
        .fcta .cells {
          display: none;
        }
      }

      /* footer */
      footer {
        border-top: 1px solid var(--line);
        padding: 70px 0 34px;
        margin-top: clamp(40px, 6vw, 80px);
      }
      .fgrid {
        display: grid;
        grid-template-columns: 1.4fr repeat(4, 1fr);
        gap: 34px;
      }
      footer h4 {
        font-size: 14px;
        margin-bottom: 16px;
        color: var(--ink);
      }
      footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 9px;
      }
      footer li a,
      footer li {
        font-size: 14.5px;
        color: var(--muted);
        transition: color 0.2s;
      }
      footer li a:hover {
        color: var(--ink);
      }
      .fbot {
        margin-top: 56px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 13.5px;
        color: var(--muted);
      }
      .fbot .row a:hover {
        color: var(--ink);
      }
      @media (max-width: 1023px) {
        .fgrid {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .fgrid > div:first-child {
          grid-column: 1/-1;
        }
      }
      @media (max-width: 600px) {
        .fgrid {
          grid-template-columns: 1fr 1fr;
        }
      }

      /* page header */
      .ph-hero {
        padding: calc(150px + env(safe-area-inset-top, 0px)) 0
          clamp(50px, 6vw, 80px);
        border-bottom: 1px solid var(--line);
        position: relative;
        overflow: hidden;
      }
      .ph-hero h1 {
        font-size: clamp(42px, 6vw, 84px);
        max-width: 16ch;
        margin-bottom: 24px;
      }
      .crumbs {
        display: flex;
        gap: 8px;
        font-size: 13.5px;
        color: var(--muted);
        margin-bottom: 26px;
        flex-wrap: wrap;
      }
      .crumbs a:hover {
        color: var(--ink);
      }
      .crumbs .sep {
        opacity: 0.5;
      }

      /* services page */
      .svc-page {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: clamp(30px, 5vw, 70px);
      }
      .svc-side {
        position: sticky;
        top: 110px;
        align-self: start;
        display: grid;
        gap: 2px;
      }
      .svc-side a {
        font-size: 14.5px;
        color: var(--muted);
        padding: 8px 12px;
        border-radius: 8px;
        border-left: 2px solid transparent;
        transition: all 0.25s;
      }
      .svc-side a:hover {
        color: var(--ink);
        background: var(--fog);
      }
      .svc-side a.on {
        color: var(--ink);
        border-left-color: var(--accent);
        background: var(--fog);
      }
      .svc-block {
        padding: 44px 0;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px 26px;
      }
      .svc-block:first-child {
        padding-top: 0;
      }
      .svc-block .ibox {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--fog);
        display: flex;
        align-items: center;
        justify-content: center;
        grid-row: span 4;
      }
      .svc-block .ibox .ic {
        width: 28px;
        height: 28px;
        color: var(--ink);
      }
      .svc-block h2 {
        font-size: clamp(26px, 3vw, 36px);
      }
      .svc-block .chips {
        margin: 14px 0 20px;
      }
      @media (max-width: 900px) {
        .svc-page {
          grid-template-columns: 1fr;
        }
        .svc-side {
          display: none;
        }
        .svc-block {
          grid-template-columns: 1fr;
        }
        .svc-block .ibox {
          grid-row: auto;
        }
      }

      /* product detail */
      .pd-hero {
        padding: calc(140px + env(safe-area-inset-top, 0px)) 0
          clamp(50px, 6vw, 90px);
        position: relative;
        overflow: hidden;
      }
      .pd-grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      .pd-hero h1 {
        font-size: clamp(40px, 5.4vw, 76px);
        margin: 18px 0 22px;
      }
      .pd-hero .shot {
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        background: var(--fog);
        box-shadow: var(--shadow);
        transform: perspective(1400px) rotateY(-6deg) rotateX(3deg);
        transition: transform 0.9s var(--ease);
      }
      .pd-hero .shot:hover {
        transform: none;
      }
      @media (max-width: 900px) {
        .pd-grid {
          grid-template-columns: 1fr;
        }
        .pd-hero .shot {
          transform: none;
        }
      }
      .mods {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
      .mods .card h3 {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .mods .card h3 .ic {
        color: var(--accent);
      }
      @media (max-width: 767px) {
        .mods {
          grid-template-columns: 1fr;
        }
      }
      .benefits {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 2px solid var(--ink);
      }
      .benefits > div {
        padding: 26px 22px 0 0;
      }
      .benefits b {
        font: 600 19px/1.3 var(--f-display);
        color: var(--ink);
        display: block;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
      }
      .benefits p {
        font-size: 15px;
        color: var(--muted);
      }
      @media (max-width: 900px) {
        .benefits {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
      }
      @media (max-width: 540px) {
        .benefits {
          grid-template-columns: 1fr;
        }
      }
      .gallery {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: auto auto;
        gap: 18px;
      }
      .gallery button {
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--fog);
        position: relative;
        cursor: zoom-in;
      }
      .gallery button:first-child {
        grid-row: span 2;
      }
      .gallery button svg {
        width: 100%;
        height: 100%;
        transition: transform 0.8s var(--ease);
      }
      .gallery button:hover svg {
        transform: scale(1.04);
      }
      .gallery .cap {
        position: absolute;
        left: 12px;
        bottom: 12px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 5px 10px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
      }
      @media (max-width: 767px) {
        .gallery {
          grid-template-columns: 1fr;
        }
        .gallery button:first-child {
          grid-row: auto;
        }
      }
      .demo-bar {
        position: fixed;
        left: 50%;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        transform: translate(-50%, 140%);
        transition: transform 0.5s var(--ease);
        background: var(--ink);
        color: var(--paper);
        border-radius: 14px;
        padding: 10px 10px 10px 20px;
        display: flex;
        align-items: center;
        gap: 18px;
        box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
        max-width: calc(100% - 32px);
      }
      .demo-bar.show {
        transform: translate(-50%, 0);
      }
      .demo-bar b {
        font: 600 15px var(--f-display);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .demo-bar .btn-acc {
        height: 42px;
      }
      .demo-bar .btn-q {
        height: 42px;
        background: transparent;
        color: var(--paper);
        border-color: color-mix(in srgb, var(--paper) 30%, transparent);
      }
      @media (max-width: 600px) {
        .demo-bar b {
          display: none;
        }
        .demo-bar {
          padding: 8px;
        }
      }
      .agents {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .agents div {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ink);
        display: flex;
        gap: 10px;
        align-items: center;
        transition:
          border-color 0.3s,
          transform 0.4s var(--ease);
      }
      .agents div:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
      }
      .agents .ic {
        width: 18px;
        height: 18px;
        color: var(--accent);
      }
      @media (max-width: 900px) {
        .agents {
          grid-template-columns: 1fr 1fr;
        }
      }

      /* call flow */
      .call {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        counter-reset: c;
      }
      .call div {
        position: relative;
        border: 1px solid var(--band-line);
        border-radius: 12px;
        padding: 20px 18px;
        background: #0f1014;
      }
      .call div::before {
        counter-increment: c;
        content: counter(c);
        font: 700 13px var(--f-display);
        color: var(--accent);
        display: block;
        margin-bottom: 26px;
      }
      .call b {
        color: #fff;
        display: block;
        font: 600 16px/1.3 var(--f-display);
        margin-bottom: 6px;
      }
      .call span {
        font-size: 13.5px;
      }
      @media (max-width: 900px) {
        .call {
          grid-template-columns: 1fr 1fr;
        }
      }
      .wave {
        display: flex;
        gap: 4px;
        align-items: center;
        height: 40px;
      }
      .wave i {
        width: 4px;
        border-radius: 2px;
        background: var(--accent);
        animation: wv 1.1s ease-in-out infinite;
      }
      @keyframes wv {
        0%,
        100% {
          height: 8px;
        }
        50% {
          height: 36px;
        }
      }

      /* modal */
      .modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(20px + env(safe-area-inset-top, 0px)) 16px
          calc(20px + env(safe-area-inset-bottom, 0px));
        visibility: hidden;
      }
      .modal.open {
        visibility: visible;
      }
      .modal .scrim {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s;
      }
      .modal.open .scrim {
        opacity: 1;
      }
      .modal .panel {
        position: relative;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 20px;
        width: 100%;
        max-width: 620px;
        max-height: 100%;
        overflow: auto;
        padding: clamp(24px, 4vw, 40px);
        transform: translateY(30px) scale(0.98);
        opacity: 0;
        transition:
          transform 0.45s var(--ease),
          opacity 0.3s;
      }
      .modal.wide .panel {
        max-width: 980px;
        padding: 0;
      }
      .modal.open .panel {
        transform: none;
        opacity: 1;
      }
      .modal .x {
        position: absolute;
        right: 16px;
        top: 16px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--card);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: transform 0.35s var(--ease);
      }
      .modal .x:hover {
        transform: rotate(90deg);
      }
      .modal h2 {
        font-size: clamp(28px, 3.4vw, 38px);
        margin-bottom: 10px;
        padding-right: 40px;
      }
      .form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 26px;
      }
      .field {
        display: grid;
        gap: 7px;
      }
      .field.full {
        grid-column: 1/-1;
      }
      .field label {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
      }
      .field label i {
        font-style: normal;
        color: var(--muted);
        font-weight: 400;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        font: inherit;
        font-size: 15.5px;
        color: var(--ink);
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 13px 14px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        appearance: none;
        -webkit-appearance: none;
      }
      .field select {
        background-image:
          linear-gradient(45deg, transparent 50%, var(--muted) 50%),
          linear-gradient(135deg, var(--muted) 50%, transparent 50%);
        background-position:
          calc(100% - 20px) 55%,
          calc(100% - 15px) 55%;
        background-size: 5px 5px;
        background-repeat: no-repeat;
        padding-right: 40px;
      }
      .field textarea {
        min-height: 120px;
        resize: vertical;
      }
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
      }
      .field.err input,
      .field.err textarea,
      .field.err select {
        border-color: var(--err);
      }
      .field .em {
        font-size: 12.5px;
        color: var(--err);
        min-height: 0;
      }
      .form .btn {
        grid-column: 1/-1;
        justify-content: center;
        height: 54px;
      }
      .form .note {
        grid-column: 1/-1;
        font-size: 13px;
        color: var(--muted);
      }
      @media (max-width: 560px) {
        .form {
          grid-template-columns: 1fr;
        }
      }
      .pre {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 13.5px;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 999px;
        margin-bottom: 14px;
      }
      .pre .ic {
        width: 15px;
        height: 15px;
      }
      .btn.loading {
        pointer-events: none;
        opacity: 0.8;
      }
      .btn.loading::after {
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: spin 0.7s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .done {
        text-align: center;
        padding: 30px 0 10px;
      }
      .done .ok {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        animation: pop 0.6s var(--ease);
      }
      .done .ok .ic {
        width: 34px;
        height: 34px;
        stroke-width: 2.4;
        stroke-dasharray: 30;
        stroke-dashoffset: 30;
        animation: draw 0.5s 0.25s forwards;
      }
      @keyframes pop {
        from {
          transform: scale(0.4);
          opacity: 0;
        }
        to {
          transform: none;
          opacity: 1;
        }
      }
      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }
      .done p {
        color: var(--muted);
        max-width: 40ch;
        margin: 10px auto 26px;
      }
      .pjm {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
      }
      .pjm .img {
        background: var(--fog);
        border-right: 1px solid var(--line);
        display: flex;
        align-items: center;
      }
      .pjm .img svg {
        width: 100%;
      }
      .pjm .bd {
        padding: 40px 34px;
      }
      .pjm h2 {
        font-size: 30px;
      }
      @media (max-width: 800px) {
        .pjm {
          grid-template-columns: 1fr;
        }
        .pjm .img {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
      }
      .lightbox .panel {
        max-width: 1100px;
        padding: 0;
        background: var(--fog);
      }

      /* float quote */
      .fq {
        position: fixed;
        right: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 52px;
        padding: 0 20px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        border: 0;
        font-weight: 600;
        font-size: 15px;
        box-shadow: 0 14px 34px -12px
          color-mix(in srgb, var(--accent) 80%, transparent);
        transition:
          transform 0.4s var(--ease),
          opacity 0.3s;
      }
      .fq:hover {
        transform: translateY(-3px);
      }
      .fq .ic {
        width: 18px;
        height: 18px;
      }
      .fq.hide {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
      }

      /* contact */
      .ct {
        display: grid;
        grid-template-columns: 1.3fr 0.7fr;
        gap: clamp(30px, 5vw, 70px);
      }
      .ct .form {
        margin-top: 0;
      }
      .ct-info > div {
        padding: 22px 0;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px;
      }
      .ct-info > div:first-child {
        padding-top: 0;
      }
      .ct-info .ic {
        color: var(--accent);
        margin-top: 3px;
      }
      .ct-info b {
        display: block;
        color: var(--ink);
        font-size: 14px;
        margin-bottom: 3px;
      }
      .ct-info span,
      .ct-info a {
        color: var(--muted);
        font-size: 15.5px;
      }
      .ct-info a:hover {
        color: var(--accent);
      }
      @media (max-width: 900px) {
        .ct {
          grid-template-columns: 1fr;
        }
      }

      /* careers */
      .job {
        display: grid;
        grid-template-columns: 1.2fr 1fr auto;
        gap: 24px;
        align-items: start;
      }
      .job .kv {
        display: grid;
        gap: 4px;
        font-size: 14px;
      }
      .job .kv span {
        color: var(--muted);
      }
      @media (max-width: 900px) {
        .job {
          grid-template-columns: 1fr;
        }
      }
      .job details summary {
        cursor: pointer;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--accent);
        list-style: none;
        margin-top: 14px;
      }
      .job details summary::-webkit-details-marker {
        display: none;
      }
      .job details ul {
        margin: 12px 0 0;
        padding-left: 18px;
        color: var(--muted);
        font-size: 14.5px;
        display: grid;
        gap: 4px;
      }

      .prose {
        max-width: 72ch;
      }
      .prose h2 {
        font-size: 26px;
        margin: 40px 0 12px;
      }
      .prose p {
        color: var(--muted);
        margin-bottom: 12px;
      }
      .notice {
        border: 1px dashed var(--line);
        border-radius: 12px;
        padding: 16px 18px;
        font-size: 14px;
        color: var(--muted);
        display: flex;
        gap: 12px;
        align-items: flex-start;
      }
      .notice .ic {
        width: 18px;
        height: 18px;
        color: var(--accent);
        margin-top: 2px;
      }

      main {
        transition:
          opacity 0.22s,
          transform 0.3s var(--ease);
      }
      main.leave {
        opacity: 0;
        transform: translateY(8px);
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001s !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001s !important;
        }
        .rv {
          opacity: 1;
          transform: none;
        }
        .mq-t {
          animation: none;
        }
      }

      /* theme toggle */
      .tt {
        margin-left: 10px;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        flex: none;
        transition:
          border-color 0.25s,
          background 0.25s;
      }
      .tt:hover {
        border-color: var(--ink);
      }
      .tt .ic {
        position: absolute;
        width: 19px;
        height: 19px;
        transition:
          transform 0.5s var(--ease),
          opacity 0.3s;
      }
      .tt .sun {
        transform: rotate(-90deg) scale(0.4);
        opacity: 0;
      }
      .tt .moon {
        transform: none;
        opacity: 1;
      }
      .dark-on .tt .sun {
        transform: none;
        opacity: 1;
      }
      .dark-on .tt .moon {
        transform: rotate(90deg) scale(0.4);
        opacity: 0;
      }
      @media (max-width: 1240px) {
        .tt {
          margin-left: auto;
        }
        .burger {
          margin-left: 10px;
        }
      }
      html.theming,
      html.theming *,
      html.theming *::before,
      html.theming *::after {
        transition:
          background-color 0.35s ease,
          color 0.35s ease,
          border-color 0.35s ease,
          fill 0.35s ease,
          stroke 0.35s ease,
          box-shadow 0.35s ease !important;
      }
      /* dark refinements */
      .dark-on .fcta {
        border: 1px solid var(--band-line);
      }
      .dark-on .pc.feat {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--band-line));
        background: linear-gradient(
          160deg,
          color-mix(in srgb, var(--accent) 10%, var(--band)),
          var(--band) 60%
        );
      }
      .dark-on .band {
        border-top: 1px solid var(--band-line);
        border-bottom: 1px solid var(--band-line);
      }
      .dark-on .hero-bg {
        opacity: 0.45;
      }
      .dark-on .modal .scrim {
        background: rgba(0, 0, 0, 0.7);
      }
      .dark-on .pj .ov {
        background: rgba(0, 0, 0, 0.55);
      }
      .dark-on .cell.lit {
        background: #262a33;
      }
      .dark-on .cell.lit b,
      .dark-on .cell.lit .ic {
        color: #fff;
      }
      .dark-on .cell.lit small {
        color: var(--muted);
      }
      .dark-on .ind:hover {
        background: #262a33;
      }
      .dark-on .ind:hover b,
      .dark-on .ind:hover .ic {
        color: #fff;
      }
      /* careers */
      .sr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      .jobs-bar {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
      }
      .jobs-bar .filters {
        margin: 0;
      }
      .filters .cnt {
        display: inline-block;
        margin-left: 8px;
        font-size: 12px;
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--fog);
        color: var(--muted);
        text-align: center;
      }
      .filters button.on .cnt {
        background: color-mix(in srgb, var(--paper) 20%, transparent);
        color: var(--paper);
      }
      .search {
        position: relative;
        flex: 1 1 280px;
        max-width: 400px;
        display: block;
      }
      .search .ic {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--muted);
        pointer-events: none;
      }
      .search input {
        width: 100%;
        height: 48px;
        font: inherit;
        font-size: 15.5px;
        color: var(--ink);
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 18px 0 44px;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .search input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
      }
      .jobcount {
        font-size: 14px;
        color: var(--muted);
        margin: 0 0 22px;
      }
      .jc {
        display: flex;
        flex-direction: column;
      }
      .jc-top {
        margin-bottom: 18px;
      }
      .jc p {
        margin-bottom: 20px;
      }
      .meta2 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        font-size: 14px;
        color: var(--graphite);
        padding-top: 18px;
        border-top: 1px solid var(--line);
      }
      .meta2 span {
        display: flex;
        gap: 7px;
        align-items: center;
      }
      .meta2 .ic {
        width: 16px;
        height: 16px;
        color: var(--accent);
      }
      .jc .foot {
        margin-top: 22px;
      }
      .empty {
        text-align: center;
        border: 1px dashed var(--line);
        border-radius: 16px;
        padding: clamp(40px, 6vw, 64px) 24px;
        background: var(--card);
      }
      .empty .ibx {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--fog);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: var(--accent);
      }
      .empty h3 {
        margin-bottom: 10px;
      }
      .empty p {
        color: var(--muted);
        max-width: 52ch;
        margin: 0 auto 24px;
      }
      .gen {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        flex-wrap: wrap;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--card);
        padding: clamp(24px, 4vw, 40px);
      }
      .gen h3 {
        font-size: clamp(22px, 2.4vw, 28px);
        margin-bottom: 6px;
      }
      .modal.mid .panel {
        max-width: 720px;
      }
      .jd-meta {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        margin: 24px 0 8px;
      }
      .jd-meta div {
        background: var(--card);
        padding: 14px 16px;
      }
      .jd-meta dt {
        font-size: 12.5px;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .jd-meta dd {
        margin: 0;
        font-weight: 600;
        color: var(--ink);
        font-size: 14.5px;
      }
      .jd-h {
        margin: 26px 0 12px;
      }
      @media (max-width: 640px) {
        .jd-meta {
          grid-template-columns: 1fr 1fr;
        }
      }
      /* combobox */
      .combo {
        position: relative;
      }
      .combo .cb {
        padding-right: 46px;
      }
      .combo .chev {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 38px;
        height: 38px;
        border: 0;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        border-radius: 8px;
      }
      .combo .chev .ic {
        width: 18px;
        height: 18px;
        transition: transform 0.3s var(--ease);
      }
      .combo.open .chev .ic {
        transform: rotate(180deg);
      }
      .lb {
        position: absolute;
        z-index: 6;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        max-height: 260px;
        overflow: auto;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 6px;
        margin: 0;
        list-style: none;
        display: none;
      }
      .combo.open .lb {
        display: block;
        animation: fadeIn 0.2s var(--ease);
      }
      .lb .grp {
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        padding: 10px 10px 4px;
      }
      .lb [role="option"] {
        padding: 9px 10px;
        border-radius: 8px;
        font-size: 15px;
        color: var(--ink);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }
      .lb [role="option"]:hover,
      .lb .act {
        background: var(--fog);
      }
      .lb [aria-selected="true"] {
        color: var(--accent);
        font-weight: 600;
      }
      .lb [role="option"] .ic {
        width: 16px;
        height: 16px;
      }
      .lb mark {
        background: none;
        color: var(--accent);
        font-weight: 600;
      }
      /* resume drop */
      .drop {
        display: flex;
        align-items: center;
        gap: 14px;
        border: 1.5px dashed var(--line);
        border-radius: 12px;
        padding: 16px 18px;
        background: var(--card);
        cursor: pointer;
        transition:
          border-color 0.2s,
          background 0.2s;
        min-height: 78px;
      }
      .drop:hover,
      .drop.over {
        border-color: var(--accent);
        background: var(--accent-soft);
      }
      .drop:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      .drop .ibx {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--fog);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        color: var(--accent);
      }
      .drop .ibx .ic {
        width: 20px;
        height: 20px;
      }
      .drop .fn {
        display: grid;
        gap: 2px;
        min-width: 0;
        flex: 1;
      }
      .drop b {
        color: var(--ink);
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .drop small {
        color: var(--muted);
        font-size: 13px;
      }
      .drop u {
        color: var(--accent);
        text-decoration: none;
      }
      .drop.has {
        border-style: solid;
        cursor: default;
      }
      .drop.has:hover {
        background: var(--card);
        border-color: var(--line);
      }
      .drop .fa {
        display: flex;
        gap: 8px;
        flex: none;
      }
      .drop .fa .btn {
        height: 36px;
        padding: 0 12px;
        font-size: 13.5px;
      }
      .drop .fa .rm {
        width: 36px;
        padding: 0;
        justify-content: center;
      }
      .drop .fa .ic {
        width: 16px;
        height: 16px;
      }
      .field.err .drop {
        border-color: var(--err);
      }
      @media (max-width: 480px) {
        .drop.has {
          flex-wrap: wrap;
        }
        .drop .fa {
          width: 100%;
        }
        .drop .fa .btn:first-child {
          flex: 1;
          justify-content: center;
        }
      }
      .hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .prog {
        grid-column: 1/-1;
        height: 3px;
        border-radius: 2px;
        background: var(--line);
        overflow: hidden;
        display: none;
      }
      .prog i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--accent);
        transition: width 0.25s var(--ease);
      }
      .form.busy .prog {
        display: block;
      }
      .form.busy .field {
        opacity: 0.7;
        transition: opacity 0.2s;
      }
      .ferr {
        grid-column: 1/-1;
        color: var(--err);
        font-size: 14px;
        margin: 0;
      }
      .ferr:empty {
        display: none;
      }
      .form .btn:disabled {
        cursor: progress;
      }
      .done .ref {
        display: table;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        background: var(--fog);
        padding: 6px 12px;
        border-radius: 999px;
        margin: -10px 0 24px;
      }
      .field[hidden] {
        display: none;
      }
      .apply-wrap {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: start;
      }
      .apply-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: clamp(22px, 3.5vw, 40px);
        box-shadow: var(--shadow);
      }
      .apply-card .form {
        margin-top: 0;
      }
      @media (max-width: 900px) {
        .apply-wrap {
          grid-template-columns: 1fr;
        }
      }
      /* product screenshots */
      .pc-shot {
        display: block;
        position: relative;
        margin: -28px -28px 22px;
        aspect-ratio: 16/9.4;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background: var(--fog);
      }
      .pc-shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        display: block;
        transition: transform 0.9s var(--ease);
      }
      .card:hover .pc-shot img {
        transform: scale(1.045);
      }
      .pc.feat .pc-shot {
        border-color: var(--band-line);
      }
      .shot-tag {
        position: absolute;
        left: 12px;
        bottom: 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 10px;
      }
      .pd-hero .shot img {
        display: block;
        width: 100%;
        height: auto;
      }
      .gallery button img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
        transition: transform 0.8s var(--ease);
      }
      .gallery button:hover img {
        transform: scale(1.04);
      }
      .svc-shot {
        grid-column: 2;
        display: block;
        position: relative;
        margin-top: 22px;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--shadow);
        max-width: 720px;
      }
      .svc-shot img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.9s var(--ease);
      }
      .svc-shot:hover img {
        transform: scale(1.03);
      }
      @media (max-width: 900px) {
        .svc-shot {
          grid-column: 1;
        }
      }
      .zoomfig {
        margin: 0;
      }
      .zoomfig img {
        display: block;
        width: 100%;
        height: auto;
      }
      .zoomfig figcaption {
        padding: 12px 18px;
        font-size: 13.5px;
        color: var(--muted);
        background: var(--card);
        border-top: 1px solid var(--line);
      }
      /* ================= FX layer styles (additive) ================= */
      /* 7. scroll reveal: translate/rotate properties keep `transform` free for tilt */
      .grid,
      .ind-grid,
      .mods {
        perspective: 1600px;
      }
      :is(.card, .pj, .ind).rv:not(.in) {
        rotate: x 9deg;
      }
      :is(.card, .pj, .ind, .tslot).rv {
        transition:
          opacity 0.8s var(--ease) var(--d, 0s),
          translate 0.9s var(--ease) var(--d, 0s),
          rotate 0.9s var(--ease) var(--d, 0s),
          transform 0.45s var(--ease),
          border-color 0.3s,
          box-shadow 0.45s var(--ease),
          background 0.35s,
          color 0.3s;
      }
      .fx-t3 :is(.card, .pj, .ind, .tslot) {
        transition:
          opacity 0.8s var(--ease) var(--d, 0s),
          translate 0.9s var(--ease) var(--d, 0s),
          rotate 0.9s var(--ease) var(--d, 0s),
          border-color 0.3s,
          box-shadow 0.45s var(--ease),
          background 0.35s,
          color 0.3s;
      }
      .fx-t3 :is(.card, .pj, .ind, .tslot) {
        will-change: transform;
      }

      /* 10. depth + border glow on cards */
      .fx .card:hover {
        box-shadow:
          var(--shadow),
          0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
      }
      .fx .ind:hover {
        box-shadow: 0 22px 44px -26px
          color-mix(in srgb, var(--accent) 60%, transparent);
      }

      /* 12. buttons: lift, light sweep, glow, press */
      .btn {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition:
          background 0.25s,
          color 0.25s,
          border-color 0.25s,
          box-shadow 0.3s,
          translate 0.3s var(--ease),
          scale 0.15s,
          transform 0.35s var(--ease);
      }
      .fx-t3 .btn {
        transition:
          background 0.25s,
          color 0.25s,
          border-color 0.25s,
          box-shadow 0.3s,
          translate 0.3s var(--ease),
          scale 0.15s;
      }
      .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(
          105deg,
          transparent 35%,
          rgba(255, 255, 255, 0.3) 50%,
          transparent 65%
        );
        translate: -120% 0;
        transition: translate 0.75s var(--ease);
        pointer-events: none;
      }
      .btn-line::before {
        background: linear-gradient(
          105deg,
          transparent 35%,
          color-mix(in srgb, var(--accent) 16%, transparent) 50%,
          transparent 65%
        );
      }
      .btn:hover::before {
        translate: 120% 0;
      }
      .btn:hover {
        translate: 0 -2px;
      }
      .btn:active {
        scale: 0.97;
        translate: 0 0;
      }
      .btn-ink:hover,
      .btn-acc:hover {
        box-shadow: 0 12px 28px -14px
          color-mix(in srgb, var(--accent) 85%, transparent);
      }
      .btn:disabled,
      .btn.loading {
        translate: 0 0;
      }

      /* 1. hero stage: canvas core behind a glass module grid */
      .fx-stage {
        position: relative;
      }
      .fx-cv {
        position: absolute;
        left: -30%;
        top: -24%;
        width: 160%;
        height: 148%;
        pointer-events: none;
        z-index: 0;
        will-change: transform;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%);
        mask-image: linear-gradient(90deg, transparent 0, #000 13%);
        opacity: 0;
        animation: fxIn 1.4s 0.3s var(--ease) forwards;
      }
      .fx-cv canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
      @keyframes fxIn {
        to {
          opacity: 1;
        }
      }
      .fx-tilt {
        position: relative;
        z-index: 1;
        will-change: transform;
      }
      .fx-stage .mgrid {
        background: transparent;
        box-shadow: 0 40px 90px -50px
          color-mix(in srgb, var(--accent) 55%, transparent);
      }
      .fx-stage .cell:not(.core):not(.lit) {
        background: color-mix(in srgb, var(--card) 50%, transparent);
        -webkit-backdrop-filter: blur(2.5px) saturate(1.2);
        backdrop-filter: blur(2.5px) saturate(1.2);
      }
      .fx-stage .cell.core {
        background: radial-gradient(
          circle at 50% 50%,
          transparent 40%,
          color-mix(in srgb, var(--accent) 16%, transparent) 100%
        );
      }
      .fx-stage .cell.core > .ic {
        opacity: 0;
      }
      .fx-stage .cell.core > div {
        align-self: flex-start;
        background: color-mix(in srgb, var(--paper) 74%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        padding: 5px 9px;
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      }
      .fx-stage .cell.core b {
        color: var(--ink);
      }
      .fx-stage .cell.core small {
        color: var(--muted);
      }
      .fx-stage .cell.core .pulse,
      .fx-stage .cell.core .pulse::after {
        background: var(--accent);
        border-color: var(--accent);
      }
      .fx-t1 .fx-stage .cell:not(.core):not(.lit) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: color-mix(in srgb, var(--card) 86%, transparent);
      }
      @media (max-width: 900px) {
        .fx-cv {
          left: -12%;
          top: -16%;
          width: 124%;
          height: 132%;
          -webkit-mask-image: none;
          mask-image: none;
        }
      }

      /* 3. service tiles */
      .t3 {
        display: block;
        width: 56px;
        height: 56px;
        perspective: 260px;
        flex: none;
        animation: t3f 6s ease-in-out infinite alternate;
      }
      .svc a .t3 {
        grid-row: span 2;
      }
      .svc a:nth-child(3n + 2) .t3 {
        animation-delay: -2s;
      }
      .svc a:nth-child(3n) .t3 {
        animation-delay: -4s;
      }
      .svc a.has-t3 > .ic,
      .svc-block.has-t3 .ibox > .ic {
        display: none;
      }
      .svc a.has-t3 {
        align-items: center;
      }
      .svc-block.has-t3 .ibox {
        background: none;
      }
      .t3i {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(14deg) rotateY(-18deg);
        transition: transform 0.7s var(--ease);
      }
      .t3 .l {
        position: absolute;
        inset: 0;
        transition:
          transform 0.7s var(--ease),
          filter 0.5s;
      }
      .t3 .l svg {
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .t3 .l1 {
        transform: translateZ(5px);
      }
      .t3 .l2 {
        transform: translateZ(10px);
      }
      :is(.svc a, .svc-block):hover .t3i {
        transform: rotateX(22deg) rotateY(-30deg) translateY(-2px);
      }
      :is(.svc a, .svc-block):hover .t3 .l1 {
        transform: translateZ(12px);
      }
      :is(.svc a, .svc-block):hover .t3 .l2 {
        transform: translateZ(24px);
        filter: drop-shadow(
          0 6px 8px color-mix(in srgb, var(--accent) 45%, transparent)
        );
      }
      :is(.svc a, .svc-block):hover .t3 .l0 {
        filter: drop-shadow(
          0 10px 14px color-mix(in srgb, var(--accent) 25%, transparent)
        );
      }
      .t3 path {
        fill: none;
      }
      .t3 .pl {
        fill: var(--fog);
        stroke: var(--line);
        stroke-width: 1;
      }
      .t3 .fc {
        fill: var(--card);
      }
      .t3 .fs {
        fill: var(--accent-soft);
      }
      .t3 .fa {
        fill: var(--accent);
      }
      .t3 .fm {
        fill: var(--line);
      }
      .t3 .fk {
        fill: var(--ink);
        opacity: 0.75;
      }
      .t3 .fw {
        fill: #fff;
      }
      .t3 .o6 {
        opacity: 0.6;
      }
      .t3 .k {
        stroke: var(--ink);
        stroke-width: 1.3;
        stroke-linejoin: round;
        stroke-linecap: round;
      }
      .t3 .kl {
        stroke-width: 0.8;
        opacity: 0.35;
      }
      .t3 .ka {
        stroke: var(--accent);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .t3 .kw {
        stroke: #fff;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .t3 .gear {
        fill: none;
        stroke-width: 5;
        stroke-dasharray: 3.2 3.4;
      }
      .t3 .tx {
        font: 700 9px var(--f-body);
        fill: var(--accent);
        text-anchor: middle;
      }
      .t3 .fly {
        animation: t3fly 2.2s ease-in-out infinite alternate;
      }
      .t3 .pulse {
        transform-box: fill-box;
        transform-origin: center;
        animation: t3pulse 1.6s ease-in-out infinite;
      }
      .t3 .blink {
        animation: t3blink 1s steps(2, jump-none) infinite;
      }
      .t3 .flow {
        stroke-dasharray: 3 3;
        animation: t3flow 1s linear infinite;
      }
      .t3 .bar {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: t3bar 1.3s ease-in-out infinite alternate;
      }
      .t3 .spin {
        transform-box: fill-box;
        transform-origin: center;
        animation: t3spin 6s linear infinite;
      }
      .t3 .slide {
        animation: t3slide 1.5s ease-in-out infinite alternate;
      }
      .t3 .d2 {
        animation-delay: -0.45s;
      }
      .t3 .d3 {
        animation-delay: -0.9s;
      }
      .t3 .an {
        animation-play-state: paused;
      }
      :is(.svc a, .svc-block):hover .t3 .an {
        animation-play-state: running;
      }
      @keyframes t3f {
        to {
          translate: 0 -3px;
        }
      }
      @keyframes t3fly {
        to {
          translate: 0 -3px;
        }
      }
      @keyframes t3pulse {
        50% {
          transform: scale(1.25);
          opacity: 0.75;
        }
      }
      @keyframes t3blink {
        50% {
          opacity: 0;
        }
      }
      @keyframes t3flow {
        to {
          stroke-dashoffset: -12;
        }
      }
      @keyframes t3bar {
        from {
          transform: scaleY(0.55);
        }
      }
      @keyframes t3spin {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes t3slide {
        from {
          translate: -8px 0;
        }
      }

      /* 4. process: glowing nodes + travelling light */
      .proc .track {
        overflow: visible;
      }
      .proc .fill {
        box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
      }
      .proc .beam {
        position: absolute;
        top: -3px;
        left: -90px;
        width: 90px;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(
          90deg,
          transparent,
          color-mix(in srgb, var(--accent) 80%, transparent)
        );
        pointer-events: none;
        animation: beamX 4.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }
      .proc .beam::after {
        content: "";
        position: absolute;
        right: -3px;
        top: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 10px 3px var(--accent);
      }
      @keyframes beamX {
        0% {
          left: -90px;
          opacity: 0;
        }
        12%,
        88% {
          opacity: 1;
        }
        100% {
          left: 100%;
          opacity: 0;
        }
      }
      .proc .st.on::before {
        box-shadow:
          0 0 0 5px var(--accent-soft),
          0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
      }
      .proc .st::after {
        content: "";
        position: absolute;
        top: -32px;
        left: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid var(--accent);
        opacity: 0;
        pointer-events: none;
      }
      .proc .st.on::after {
        animation: nodePing 2.8s var(--ease) infinite;
      }
      @keyframes nodePing {
        0% {
          transform: scale(1);
          opacity: 0.8;
        }
        100% {
          transform: scale(2.6);
          opacity: 0;
        }
      }
      @media (max-width: 900px) {
        .proc .beam {
          top: -90px;
          left: -3px;
          width: 8px;
          height: 90px;
          background: linear-gradient(
            180deg,
            transparent,
            color-mix(in srgb, var(--accent) 80%, transparent)
          );
          animation-name: beamY;
        }
        .proc .beam::after {
          right: 0;
          top: auto;
          bottom: -3px;
        }
        .proc .st::after {
          top: 4px;
          left: -34px;
        }
        @keyframes beamY {
          0% {
            top: -90px;
            opacity: 0;
          }
          12%,
          88% {
            opacity: 1;
          }
          100% {
            top: 100%;
            opacity: 0;
          }
        }
      }

      /* 5. portfolio: depth, glass reflection */
      .pj .ov {
        z-index: 2;
      }
      .pj .img::after {
        content: "";
        position: absolute;
        inset: -30%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          115deg,
          transparent 42%,
          rgba(255, 255, 255, 0.4) 50%,
          transparent 58%
        );
        translate: -60% 0;
        opacity: 0;
        transition:
          translate 1s var(--ease),
          opacity 0.45s;
      }
      .pj:hover .img::after {
        translate: 60% 0;
        opacity: 0.9;
      }
      .fx .pj:hover {
        box-shadow:
          0 34px 60px -32px rgba(10, 20, 60, 0.5),
          0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
      }
      .dark-on .pj .img::after {
        background: linear-gradient(
          115deg,
          transparent 42%,
          rgba(255, 255, 255, 0.14) 50%,
          transparent 58%
        );
      }

      /* 6. tech ecosystem */
      .eco {
        position: relative;
        height: clamp(440px, 40vw, 500px);
        margin: 0 0 56px;
        opacity: 0;
        translate: 0 24px;
        transition:
          opacity 1s var(--ease),
          translate 1s var(--ease);
      }
      .eco.in {
        opacity: 1;
        translate: 0 0;
      }
      .eco svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .eco line {
        stroke: var(--line);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
        transition: stroke 0.25s;
      }
      .eco line.f {
        stroke: color-mix(in srgb, var(--accent) 50%, transparent);
        stroke-dasharray: 4 6;
        animation: ecoDash 2.2s linear infinite;
      }
      .eco line.hl {
        stroke: var(--accent);
        stroke-width: 1.5;
      }
      .eco .eco-glow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 46%;
        aspect-ratio: 1;
        translate: -50% -50%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--accent) 14%, transparent),
          transparent 65%
        );
        pointer-events: none;
      }
      .eco .n {
        position: absolute;
        translate: -50% -50%;
        z-index: 1;
      }
      .eco .n > span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        padding: 7px 13px;
        border-radius: 999px;
        background: var(--card);
        border: 1px solid var(--line);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
        box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.3);
        animation: ecoF var(--du, 6s) ease-in-out var(--de, 0s) infinite
          alternate;
        transition:
          border-color 0.25s,
          box-shadow 0.25s;
      }
      .eco .n > span > i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        flex: none;
      }
      .eco .n.ai > span > i {
        background: var(--accent);
      }
      .eco .n.cat > span {
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
        font-weight: 600;
      }
      .eco .n.cat > span > i {
        background: var(--accent);
      }
      .eco .n.hub > span {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        padding: 11px 18px;
        font: 600 15px var(--f-display);
        box-shadow:
          0 0 0 8px var(--accent-soft),
          0 16px 34px -14px var(--accent);
      }
      .eco .hm {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5px;
        width: 12px;
        height: 12px;
      }
      .eco .hm i {
        background: #fff;
      }
      .eco .hm i:nth-child(4) {
        background: rgba(255, 255, 255, 0.45);
      }
      .eco .n:hover > span {
        border-color: var(--accent);
        box-shadow: 0 10px 26px -12px var(--accent);
      }
      @keyframes ecoF {
        from {
          translate: 0 -4px;
        }
        to {
          translate: 0 4px;
        }
      }
      @keyframes ecoDash {
        to {
          stroke-dashoffset: -20;
        }
      }
      @media (max-width: 640px) {
        .eco {
          height: 320px;
          margin-bottom: 36px;
        }
        .eco .n > span {
          font-size: 12px;
          padding: 6px 10px;
        }
        .eco .n.hub > span {
          font-size: 13.5px;
          padding: 9px 14px;
        }
      }

      /* 8/9. network canvases + perspective floor */
      .fx-host {
        position: relative;
        overflow: hidden;
      }
      .fx-host > .wrap {
        position: relative;
        z-index: 1;
      }
      .fx-net {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
      }
      footer .fx-net {
        opacity: 0.8;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
        mask-image: linear-gradient(180deg, transparent, #000 45%);
      }
      .fx-floor {
        position: absolute;
        left: -25%;
        right: -25%;
        bottom: -8%;
        height: 50%;
        pointer-events: none;
        z-index: 0;
        background-image:
          linear-gradient(
            color-mix(in srgb, var(--accent) 40%, transparent) 1px,
            transparent 1px
          ),
          linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 40%, transparent) 1px,
            transparent 1px
          );
        background-size: 56px 56px;
        transform: perspective(520px) rotateX(64deg);
        transform-origin: 50% 100%;
        -webkit-mask-image: radial-gradient(
          ellipse 60% 90% at 50% 100%,
          #000 10%,
          transparent 75%
        );
        mask-image: radial-gradient(
          ellipse 60% 90% at 50% 100%,
          #000 10%,
          transparent 75%
        );
        opacity: 0.2;
        animation: floor 9s linear infinite;
      }
      @keyframes floor {
        to {
          background-position: 0 56px;
        }
      }
      .fx .ai-cards {
        background: color-mix(in srgb, var(--band-line) 85%, transparent);
      }
      .fx .ai-cards a {
        background: color-mix(in srgb, var(--band) 82%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }

      /* 13. CTA orb */
      .fcta > :is(h2, p, .row) {
        position: relative;
        z-index: 2;
      }
      .fx-orb {
        position: absolute;
        right: 4%;
        top: 50%;
        width: min(36%, 340px);
        aspect-ratio: 1;
        translate: 0 -50%;
        pointer-events: none;
        z-index: 1;
        display: none;
      }
      .fx-orb canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
      @media (min-width: 1180px) {
        .fx-orb {
          display: block;
        }
        .fcta.has-orb .cells {
          opacity: 0.3;
        }
      }

      /* 11. cursor */
      .cur-dot,
      .cur-ring {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 300;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
      }
      .cur-dot {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent);
      }
      .cur-ring {
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
      }
      .cur-ring i {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
        transition:
          scale 0.3s var(--ease),
          background 0.3s,
          border-color 0.3s;
      }
      .cur-ring.hot i {
        scale: 1.55;
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
      }
      .cur-ring.down i {
        scale: 0.8;
      }
      html.fx-cursor,
      html.fx-cursor * {
        cursor: none !important;
      }
      html.fx-cursor :is(input, textarea, select, [contenteditable]) {
        cursor: auto !important;
      }
      html.fx-text .cur-dot,
      html.fx-text .cur-ring {
        opacity: 0 !important;
      }

      /* 15. page transitions */
      main {
        transition:
          opacity 0.24s,
          transform 0.32s var(--ease),
          filter 0.28s;
      }
      main.leave {
        opacity: 0;
        transform: translateY(10px) scale(0.995);
        filter: blur(6px);
      }

      @media (prefers-reduced-motion: reduce) {
        .eco {
          opacity: 1;
          translate: none;
        }
        .t3,
        .eco .n > span,
        .fx-floor,
        .proc .beam {
          animation: none !important;
        }
        .proc .beam {
          display: none;
        }
      }

      .nav-cta {
        flex: none;
      }
      .mgrid-cap {
        gap: 14px;
      }
      /* ================= Home v2 styles ================= */
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .eyebrow i {
        width: 8px;
        height: 8px;
        background: var(--accent);
        border-radius: 2px;
      }

      /* ---- intro ---- */
      .intro {
        position: fixed;
        inset: 0;
        z-index: 400;
        background: var(--paper);
        overflow: hidden;
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1);
      }
      .intro.s5 {
        clip-path: inset(0 0 100% 0);
      }
      .in-words {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        display: flex;
        gap: 0.28em;
        font: 800 clamp(38px, 8.4vw, 128px)/1 var(--f-display);
        letter-spacing: -0.05em;
        color: var(--ink);
        white-space: nowrap;
      }
      .in-words span {
        display: inline-block;
        opacity: 0;
        translate: 0 60%;
        transition:
          opacity 0.45s,
          translate 0.6s var(--ease),
          filter 0.45s,
          scale 0.45s;
      }
      .in-words span:nth-child(2) {
        transition-delay: 0.08s;
      }
      .in-words span:nth-child(3) {
        transition-delay: 0.16s;
        color: var(--accent);
      }
      .intro.s1 .in-words span {
        opacity: 1;
        translate: 0 0;
      }
      .intro.s2 .in-words span {
        opacity: 0;
        scale: 0.6;
        filter: blur(8px);
        transition-delay: 0s;
      }
      .in-mods span {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        scale: 0.4;
        opacity: 0;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--card);
        font: 700 clamp(13px, 1.4vw, 18px)/1 var(--f-display);
        letter-spacing: 0.02em;
        color: var(--ink);
        transition:
          translate 0.65s var(--ease) var(--d),
          scale 0.55s var(--ease) var(--d),
          opacity 0.35s var(--d),
          background 0.3s,
          color 0.3s,
          border-color 0.3s;
      }
      .intro.s2 .in-mods span {
        opacity: 1;
        scale: 1;
        translate: calc(-50% + var(--x)) calc(-50% + var(--y));
      }
      .intro.s3 .in-mods span {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
      }
      .intro.s4 .in-mods span {
        translate: -50% -50%;
        scale: 0.3;
        opacity: 0;
        transition-duration: 0.5s, 0.5s, 0.4s;
      }
      .in-lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .in-lines line {
        stroke: var(--accent);
        stroke-width: 1.2;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        transition: stroke-dashoffset 0.55s var(--ease);
      }
      .intro.s3 .in-lines line {
        stroke-dashoffset: 0;
      }
      .intro.s4 .in-lines line {
        stroke-dashoffset: 100;
        transition-duration: 0.4s;
      }
      .in-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 14px;
        margin: -7px;
        border-radius: 50%;
        background: var(--accent);
        scale: 0;
        transition: scale 0.45s var(--ease);
        box-shadow:
          0 0 0 10px var(--accent-soft),
          0 0 40px var(--accent);
      }
      .intro.s3 .in-core {
        scale: 1;
      }
      .intro.s4 .in-core {
        scale: 0;
      }
      .in-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        display: flex;
        align-items: center;
        gap: 0.4em;
        font: 800 clamp(34px, 7vw, 104px)/1 var(--f-display);
        letter-spacing: 0.3em;
        color: var(--ink);
        opacity: 0;
        scale: 0.92;
        transition:
          opacity 0.45s,
          letter-spacing 0.7s var(--ease),
          scale 0.7s var(--ease);
      }
      .in-brand svg {
        height: clamp(90px, 16vw, 180px);
        width: auto;
      }
      .in-brand .mk {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        width: 0.62em;
        height: 0.62em;
      }
      .in-brand .mk i {
        background: var(--ink);
      }
      .in-brand .mk i:nth-child(4) {
        background: var(--accent);
      }
      .intro.s4 .in-brand {
        opacity: 1;
        letter-spacing: -0.03em;
        scale: 1;
      }
      .in-skip {
        position: absolute;
        right: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        background: none;
        border: 1px solid var(--line);
        color: var(--muted);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
      }
      .in-skip:hover {
        color: var(--ink);
        border-color: var(--ink);
      }
      html.intro-on .hero h1 .ln > span,
      html.intro-on .hero .lead,
      html.intro-on .hero .row,
      html.intro-on .hero-meta {
        animation-play-state: paused;
      }
      html.intro-on {
        overflow: hidden;
      }

      /* ---- hero architecture ---- */
      .h2-hero {
        padding-bottom: clamp(40px, 6vw, 80px);
      }
      .h2-hero h1 {
        font-size: clamp(44px, 4.6vw, 74px);
      }
      .h2-hero h1 .ln {
        overflow: visible;
        overflow-y: clip;
        overflow-clip-margin: 0;
      }
      .h2-hero .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }
      .arch-wrap {
        opacity: 0;
        animation: fadeIn 1s 0.45s var(--ease) forwards;
      }
      html.intro-on .arch-wrap {
        animation-play-state: paused;
      }
      .arch {
        position: relative;
        width: 100%;
        max-width: 540px;
        aspect-ratio: 1;
        margin-left: auto;
      }
      .arch-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .arch .ring {
        fill: none;
        stroke: var(--line);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
        stroke-dasharray: 2 5;
      }
      .arch .ring.r2 {
        stroke-dasharray: none;
        opacity: 0.6;
      }
      .arch .sp {
        stroke: var(--line);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
        transition:
          stroke 0.3s,
          stroke-width 0.3s;
      }
      .arch .sp.on {
        stroke: var(--accent);
        stroke-width: 2;
      }
      .arch .pk {
        fill: var(--accent);
        opacity: 0.8;
      }
      .arch.focus .sp:not(.on) {
        opacity: 0.45;
      }
      .arch-core {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 32%;
        aspect-ratio: 1;
        translate: -50% -50%;
        border-radius: 50%;
        background: #07080a;
        overflow: hidden;
        box-shadow:
          0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent),
          0 30px 60px -20px color-mix(in srgb, var(--accent) 55%, transparent);
        display: grid;
        place-items: center;
      }
      .arch-core canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .arch-core::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
        animation: spin 26s linear infinite;
      }
      .ac-l {
        position: relative;
        text-align: center;
        color: #fff;
        margin-top: 58%;
      }
      .ac-l b {
        display: block;
        font: 800 clamp(10px, 1.05vw, 14px)/1 var(--f-display);
        letter-spacing: 0.05em;
      }
      .ac-l span {
        font-size: 10px;
        letter-spacing: 0.32em;
        color: #9db1ff;
      }
      .ac-st {
        position: absolute;
        left: 50%;
        bottom: -4%;
        translate: -50% 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        color: var(--muted);
        white-space: nowrap;
      }
      .ac-st i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #1db954;
        box-shadow: 0 0 0 3px color-mix(in srgb, #1db954 20%, transparent);
        animation: blinkDot 2s infinite;
      }
      @keyframes blinkDot {
        50% {
          opacity: 0.4;
        }
      }
      .nd {
        position: absolute;
        translate: -50% -50%;
        cursor: pointer;
        z-index: 2;
        outline: none;
      }
      .nd-in {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border-radius: 12px;
        background: var(--card);
        border: 1px solid var(--line);
        font: 700 12.5px/1 var(--f-display);
        letter-spacing: 0.04em;
        color: var(--ink);
        white-space: nowrap;
        box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.35);
        transition:
          background 0.25s,
          color 0.25s,
          border-color 0.25s,
          scale 0.35s var(--ease),
          box-shadow 0.3s;
      }
      .nd-in .ic {
        width: 16px;
        height: 16px;
        color: var(--accent);
        transition: color 0.25s;
      }
      .nd-in .cv {
        display: none;
      }
      .nd:hover .nd-in,
      .nd.on .nd-in,
      .nd:focus-visible .nd-in {
        border-color: var(--accent);
        scale: 1.06;
        box-shadow: 0 12px 28px -14px var(--accent);
      }
      .arch.focus .nd.on .nd-in {
        background: var(--ink);
        color: var(--paper);
      }
      .arch.focus .nd.on .nd-in .ic {
        color: var(--accent);
      }
      .nd:focus-visible .nd-in {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      .nd-desc {
        display: none;
      }
      .arch-panel {
        position: absolute;
        z-index: 3;
        width: min(230px, 46%);
        padding: 14px 16px;
        border-radius: 14px;
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        opacity: 0;
        translate: 0 8px;
        pointer-events: none;
        transition:
          opacity 0.25s,
          translate 0.35s var(--ease);
      }
      .arch-panel.show {
        opacity: 1;
        translate: 0 0;
        pointer-events: auto;
      }
      .arch-panel small {
        font-size: 11px;
        letter-spacing: 0.12em;
        color: var(--accent);
        font-weight: 700;
      }
      .arch-panel b {
        display: block;
        font: 700 17px/1.25 var(--f-display);
        color: var(--ink);
        margin: 4px 0 6px;
      }
      .arch-panel p {
        font-size: 13.5px;
        color: var(--muted);
        margin-bottom: 10px;
      }
      .ap-act {
        display: flex;
        gap: 3px;
        align-items: flex-end;
        height: 20px;
        margin-bottom: 10px;
      }
      .ap-act i {
        flex: 1;
        background: color-mix(in srgb, var(--accent) 35%, transparent);
        border-radius: 2px;
        animation: apb 1.1s ease-in-out calc(var(--k) * -0.11s) infinite
          alternate;
      }
      @keyframes apb {
        from {
          height: 20%;
        }
        to {
          height: 100%;
        }
      }
      .arch-panel .lnk {
        font-size: 14px;
      }
      @media (max-width: 900px) {
        .arch {
          margin: 10px auto 0;
        }
      }
      @media (max-width: 760px) {
        .arch {
          aspect-ratio: auto;
          max-width: none;
          padding: 0 0 0 0;
        }
        .arch-svg {
          display: none;
        }
        .arch-core {
          position: relative;
          left: auto;
          top: auto;
          translate: none;
          width: 132px;
          margin: 0 auto 18px;
        }
        .ac-st {
          position: static;
          translate: none;
          justify-content: center;
          margin: -6px 0 18px;
        }
        .arch::before {
          content: "";
          position: absolute;
          left: 21px;
          top: 170px;
          bottom: 22px;
          width: 1px;
          background: linear-gradient(var(--accent), var(--line));
        }
        .nd {
          position: relative;
          left: auto !important;
          top: auto !important;
          translate: none;
          display: block;
          margin: 0 0 8px 42px;
        }
        .nd::before {
          content: "";
          position: absolute;
          left: -21px;
          top: 22px;
          width: 16px;
          height: 1px;
          background: var(--line);
        }
        .nd::after {
          content: "";
          position: absolute;
          left: -25px;
          top: 19px;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--paper);
          border: 1.5px solid var(--accent);
        }
        .nd-in {
          display: flex;
          width: 100%;
          padding: 13px 14px;
          font-size: 13px;
        }
        .nd-in .cv {
          display: block;
          margin-left: auto;
          color: var(--muted);
          transition: rotate 0.3s;
        }
        .nd.on[aria-expanded="true"] .nd-in .cv {
          rotate: 180deg;
        }
        .nd.on[aria-expanded="true"] .nd-desc {
          display: grid;
          gap: 4px;
          padding: 12px 14px 4px;
          font-size: 14px;
          color: var(--muted);
          animation: fadeIn 0.3s;
        }
        .nd-desc em {
          font-style: normal;
          font-weight: 700;
          color: var(--ink);
        }
        .arch-panel {
          display: none;
        }
        .arch.focus .nd.on .nd-in {
          background: var(--card);
          color: var(--ink);
        }
        .nd.on[aria-expanded="true"] .nd-in {
          border-color: var(--accent);
        }
      }

      /* ---- trust ---- */
      .trust {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 30px 0 36px;
      }
      .trust .logos-head {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        margin-bottom: 22px;
        font-size: 14.5px;
        color: var(--muted);
      }
      .trust .logos-head b {
        color: var(--ink);
        font-weight: 600;
      }
      .eco-rows {
        position: relative;
        display: grid;
        gap: 12px;
      }
      .eco-rows.wait .mq-t {
        animation-play-state: paused;
      }
      .eco-rows::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 1px dashed var(--line);
      }
      .mq.rev .mq-t {
        animation-direction: reverse;
        animation-duration: 48s;
      }
      .tstats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 30px;
        padding-top: 26px;
        border-top: 1px solid var(--line);
      }
      .tstats b {
        font: 800 clamp(34px, 4vw, 52px)/1 var(--f-display);
        letter-spacing: -0.04em;
        color: var(--ink);
        display: block;
      }
      .tstats span {
        font-size: 14px;
        color: var(--muted);
        display: block;
        margin-top: 8px;
      }
      @media (max-width: 760px) {
        .tstats {
          grid-template-columns: 1fr 1fr;
        }
      }

      /* ---- story (scroll-pinned) ---- */
      .story {
        position: relative;
        height: 240vh;
      }
      .story-pin {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .story-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
        width: 100%;
      }
      .sw {
        position: relative;
        margin: 18px 0 0;
        display: grid;
      }
      .sw > * {
        grid-area: 1/1;
      }
      .sw h2 {
        font-size: clamp(36px, 4.8vw, 68px);
        transition:
          opacity 0.5s,
          translate 0.6s var(--ease),
          filter 0.5s;
      }
      .sw .b {
        opacity: 0;
        translate: 0 24px;
        filter: blur(6px);
      }
      .story.b-on .sw .a {
        opacity: 0;
        translate: 0 -24px;
        filter: blur(6px);
      }
      .story.b-on .sw .b {
        opacity: 1;
        translate: 0 0;
        filter: none;
      }
      .sw.sp {
        margin-top: 22px;
      }
      .sw.sp p {
        transition:
          opacity 0.5s,
          translate 0.6s var(--ease);
      }
      .story-state {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 20px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        background: var(--card);
      }
      .story-state i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--muted);
        transition: background 0.3s;
      }
      .story.live .story-state i {
        background: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
      }
      .story-cta {
        display: flex;
        margin-top: 22px;
      }
      .story-stage {
        position: relative;
        height: min(64vh, 560px);
      }
      .story-stage svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .story-stage .sl {
        stroke: var(--accent);
        stroke-width: 1.3;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
      }
      .story.live .sl {
        stroke-dasharray: 3 5;
        animation: slFlow 1.2s linear infinite;
      }
      @keyframes slFlow {
        to {
          stroke-dashoffset: -16;
        }
      }
      .story-stage .hub {
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
        width: min(250px, 56%);
        padding: 16px;
        border-radius: 18px;
        background: var(--ink);
        color: var(--paper);
        text-align: center;
        box-shadow: 0 30px 60px -24px
          color-mix(in srgb, var(--accent) 60%, transparent);
      }
      .story-stage .hub small {
        display: block;
        font-size: 10.5px;
        letter-spacing: 0.16em;
        color: color-mix(in srgb, var(--paper) 60%, transparent);
        margin-bottom: 10px;
      }
      .story-stage .hub div {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
      }
      .story-stage .hub span {
        font-size: 12.5px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--paper) 12%, transparent);
      }
      .story-stage .hub span:nth-child(3) {
        background: var(--accent);
        color: #fff;
      }
      .sc {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 13px;
        border-radius: 12px;
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.35);
        white-space: nowrap;
        will-change: transform;
      }
      .sc .ic {
        width: 17px;
        height: 17px;
        color: var(--ink);
      }
      .sc b {
        font-size: 14px;
        color: var(--ink);
        font-weight: 600;
      }
      .sc em {
        display: flex;
        align-items: center;
        gap: 5px;
        font-style: normal;
        font-size: 11.5px;
        color: var(--muted);
        margin-left: 4px;
      }
      .sc em i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
      }
      .story.live .sc {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
      }
      .story.live .sc em i {
        background: var(--accent);
      }
      .story.live .sc .ic {
        color: var(--accent);
      }
      @media (max-width: 900px) {
        .story {
          height: 220vh;
        }
        .story-grid {
          grid-template-columns: 1fr;
          gap: 14px;
          align-content: center;
        }
        .sw h2 {
          font-size: clamp(30px, 8vw, 44px);
        }
        .sw.sp {
          margin-top: 12px;
        }
        .sw.sp p {
          font-size: 15.5px;
        }
        .story-cta {
          display: none;
        }
        .story-stage {
          height: min(46vh, 380px);
        }
        .sc {
          padding: 7px 9px;
          gap: 6px;
        }
        .sc b {
          font-size: 12.5px;
        }
        .sc em {
          display: none;
        }
        .sc .ic {
          width: 15px;
          height: 15px;
        }
        .story-stage .hub {
          padding: 12px;
          width: 62%;
        }
        .story-stage .hub span {
          font-size: 11.5px;
          padding: 4px 8px;
        }
      }

      /* ---- services system ---- */
      .svx-grid {
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        gap: clamp(24px, 4vw, 56px);
        align-items: stretch;
      }
      .svx-list {
        display: grid;
        align-content: start;
        border-top: 1px solid var(--line);
      }
      .svx-item {
        display: grid;
        grid-template-columns: 52px 1fr auto;
        align-items: center;
        gap: 10px;
        text-align: left;
        padding: 22px 6px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: none;
        position: relative;
        transition: padding 0.4s var(--ease);
      }
      .svx-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        height: 2px;
        width: 0;
        background: var(--accent);
        transition: width 0.5s var(--ease);
      }
      .svx-item .n {
        font: 700 14px var(--f-display);
        color: var(--muted);
        transition: color 0.3s;
      }
      .svx-item .t {
        font: 700 clamp(19px, 2vw, 26px)/1.15 var(--f-display);
        letter-spacing: -0.02em;
        color: var(--muted);
        transition: color 0.3s;
      }
      .svx-item .go {
        width: 20px;
        height: 20px;
        color: var(--accent);
        opacity: 0;
        translate: -8px 0;
        transition:
          opacity 0.3s,
          translate 0.4s var(--ease);
      }
      .svx-item:hover .t,
      .svx-item.on .t {
        color: var(--ink);
      }
      .svx-item.on .n {
        color: var(--accent);
      }
      .svx-item.on::before {
        width: 100%;
      }
      .svx-item.on .go {
        opacity: 1;
        translate: 0 0;
      }
      .svx-item.on {
        padding-left: 14px;
      }
      .svx-vis {
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--card);
        padding: clamp(22px, 3vw, 34px);
        display: flex;
        flex-direction: column;
        gap: 26px;
        position: relative;
        overflow: hidden;
        min-height: 400px;
      }
      .svx-vis::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          color-mix(in srgb, var(--ink) 9%, transparent) 1px,
          transparent 1px
        );
        background-size: 18px 18px;
        -webkit-mask-image: linear-gradient(
          180deg,
          transparent,
          #000 30%,
          #000 70%,
          transparent
        );
        mask-image: linear-gradient(
          180deg,
          transparent,
          #000 30%,
          #000 70%,
          transparent
        );
        pointer-events: none;
      }
      .sv-top {
        position: relative;
      }
      .sv-n {
        font: 700 13px var(--f-display);
        color: var(--accent);
      }
      .sv-top h3 {
        font-size: clamp(22px, 2.4vw, 30px);
        margin: 6px 0 8px;
        letter-spacing: -0.02em;
      }
      .sv-top p {
        color: var(--muted);
        font-size: 15.5px;
        max-width: 52ch;
      }
      .sv-flow {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 0;
        margin: auto 0;
      }
      .sfn {
        flex: 1 1 0;
        min-width: 0;
        display: grid;
        justify-items: center;
        text-align: center;
        gap: 6px;
        padding: 16px 8px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: var(--paper);
        opacity: 0;
        translate: 0 12px;
        animation: fnIn 0.5s var(--ease) calc(var(--j) * 0.07s) forwards;
        transition:
          border-color 0.3s,
          box-shadow 0.3s,
          background 0.3s;
      }
      @keyframes fnIn {
        to {
          opacity: 1;
          translate: 0 0;
        }
      }
      .sfn .fi {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: var(--fog);
        display: grid;
        place-items: center;
        transition:
          background 0.3s,
          color 0.3s;
      }
      .sfn .fi .ic {
        width: 19px;
        height: 19px;
      }
      .sfn b {
        font-size: 13.5px;
        color: var(--ink);
        line-height: 1.2;
      }
      .sfn small {
        font-size: 11.5px;
        color: var(--muted);
        line-height: 1.3;
      }
      .sfn.is-done {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
      }
      .sfn.is-done .fi {
        color: var(--accent);
      }
      .sfn.on {
        border-color: var(--accent);
        box-shadow:
          0 0 0 4px var(--accent-soft),
          0 16px 30px -18px var(--accent);
      }
      .sfn.on .fi {
        background: var(--accent);
        color: #fff;
      }
      .sfc {
        flex: 0 0 22px;
        align-self: center;
        height: 2px;
        background: var(--line);
        position: relative;
        overflow: hidden;
      }
      .sfc i {
        position: absolute;
        left: -8px;
        top: -2px;
        width: 8px;
        height: 6px;
        border-radius: 3px;
        background: var(--accent);
        animation: fcMove 1.1s linear calc(var(--j) * 0.2s) infinite;
      }
      @keyframes fcMove {
        to {
          left: 100%;
        }
      }
      .sv-foot {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      @media (max-width: 900px) {
        .svx-grid {
          grid-template-columns: 1fr;
        }
        .svx-list {
          display: flex;
          overflow-x: auto;
          gap: 8px;
          border: 0;
          padding-bottom: 6px;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
        }
        .svx-item {
          flex: none;
          grid-template-columns: auto auto;
          border: 1px solid var(--line);
          border-radius: 999px;
          padding: 10px 16px;
          scroll-snap-align: start;
        }
        .svx-item.on {
          padding-left: 16px;
          background: var(--ink);
          border-color: var(--ink);
        }
        .svx-item.on .t,
        .svx-item.on .n {
          color: var(--paper);
        }
        .svx-item::before,
        .svx-item .go {
          display: none;
        }
        .svx-item .t {
          font-size: 15px;
        }
        .svx-item .n {
          font-size: 12px;
        }
        .sv-flow {
          flex-direction: column;
        }
        .sfn {
          grid-template-columns: auto 1fr;
          justify-items: start;
          text-align: left;
          align-items: center;
          column-gap: 12px;
          padding: 10px 12px;
        }
        .sfn .fi {
          grid-row: span 2;
        }
        .sfc {
          flex: 0 0 16px;
          width: 2px;
          height: 16px;
          align-self: flex-start;
          margin-left: 30px;
        }
        .sfc i {
          left: -2px;
          top: -8px;
          width: 6px;
          height: 8px;
          animation-name: fcMoveY;
        }
        @keyframes fcMoveY {
          to {
            top: 100%;
          }
        }
        .svx-vis {
          min-height: 0;
        }
      }

      /* ---- ERP app ---- */
      .erpx-grid {
        display: grid;
        grid-template-columns: 0.62fr 1.38fr;
        gap: clamp(24px, 4vw, 56px);
        align-items: start;
      }
      .erpx-steps {
        display: grid;
      }
      .es {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 6px;
        min-height: 26vh;
        align-content: center;
        cursor: pointer;
        opacity: 0.38;
        transition: opacity 0.4s;
      }
      .es .n {
        font: 700 13px var(--f-display);
        color: var(--muted);
        padding-top: 6px;
      }
      .es h3 {
        font-size: clamp(20px, 2vw, 26px);
        letter-spacing: -0.02em;
        margin-bottom: 6px;
      }
      .es p {
        color: var(--muted);
        font-size: 15px;
      }
      .es.on {
        opacity: 1;
      }
      .es.on .n {
        color: var(--accent);
      }
      .erpx-sticky {
        position: sticky;
        top: calc(96px + env(safe-area-inset-top, 0px));
      }
      .erpx-app {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--card);
        box-shadow: 0 40px 80px -50px rgba(10, 20, 60, 0.45);
        overflow: hidden;
      }
      .ea-top {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
      }
      .ea-top .dots {
        display: flex;
        gap: 5px;
      }
      .ea-top .dots i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--line);
      }
      .ea-top b {
        color: var(--ink);
        font-size: 13.5px;
      }
      .ea-search {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 1;
        max-width: 280px;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--fog);
        color: var(--muted);
        font-size: 12.5px;
      }
      .ea-search .ic {
        width: 14px;
        height: 14px;
      }
      .ea-live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
      }
      .ea-live i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #1db954;
        animation: blinkDot 1.6s infinite;
      }
      .ea-tag {
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 3px 7px;
        margin-left: auto;
      }
      .ea-body {
        display: grid;
        grid-template-columns: 170px 1fr;
        height: 470px;
      }
      .ea-side {
        border-right: 1px solid var(--line);
        padding: 10px;
        display: grid;
        align-content: start;
        gap: 2px;
        background: color-mix(in srgb, var(--fog) 50%, var(--card));
      }
      .ea-side button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border: 0;
        border-radius: 8px;
        background: none;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--muted);
        text-align: left;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .ea-side button .ic {
        width: 17px;
        height: 17px;
      }
      .ea-side button:hover {
        color: var(--ink);
        background: var(--fog);
      }
      .ea-side button.on {
        background: var(--ink);
        color: var(--paper);
      }
      .ea-side button.on .ic {
        color: var(--accent);
      }
      .ea-main {
        padding: 16px;
        overflow: hidden;
        display: grid;
        gap: 12px;
        align-content: start;
      }
      .ea-main.swap {
        animation: swapIn 0.45s var(--ease);
      }
      @keyframes swapIn {
        from {
          opacity: 0;
          translate: 0 10px;
        }
      }
      .ev-kpis {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }
      .kpi {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
      }
      .kpi small {
        font-size: 11.5px;
        color: var(--muted);
      }
      .kpi b {
        display: block;
        font: 700 24px/1.1 var(--f-display);
        color: var(--ink);
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
      }
      .ev-row {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 12px;
      }
      .ev-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        min-width: 0;
      }
      .ev-h {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-size: 13px;
      }
      .ev-h b {
        color: var(--ink);
      }
      .pill {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--fog);
        color: var(--muted);
        font-weight: 600;
      }
      .ev-bars {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        height: 170px;
      }
      .ev-bars i {
        flex: 1;
        height: var(--h);
        border-radius: 3px 3px 0 0;
        background: color-mix(in srgb, var(--accent) 22%, transparent);
        transform-origin: bottom;
        animation: barUp 0.7s var(--ease) calc(var(--i) * 0.04s) both;
      }
      .ev-bars i:last-child {
        background: var(--accent);
      }
      @keyframes barUp {
        from {
          transform: scaleY(0.1);
        }
      }
      .ev-feed {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 2px;
      }
      .ev-feed li {
        display: grid;
        grid-template-columns: 8px 1fr auto;
        gap: 9px;
        align-items: center;
        padding: 8px 2px;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        color: var(--graphite);
      }
      .ev-feed li i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
      }
      .ev-feed time {
        font-size: 11.5px;
        color: var(--muted);
      }
      li.new {
        animation: liIn 0.5s var(--ease);
      }
      @keyframes liIn {
        from {
          opacity: 0;
          translate: 0 -8px;
          background: var(--accent-soft);
        }
      }
      .ev-kb {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .ev-kb .col {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px;
        min-height: 300px;
        background: color-mix(in srgb, var(--fog) 50%, var(--card));
      }
      .deal {
        border: 1px solid var(--line);
        background: var(--card);
        border-radius: 8px;
        padding: 10px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 8px;
        transition: box-shadow 0.3s;
      }
      .deal small {
        display: block;
        font-weight: 400;
        color: var(--muted);
        font-size: 11.5px;
        margin-top: 3px;
      }
      .deal.moving {
        animation: dealIn 0.6s var(--ease);
        box-shadow: 0 0 0 3px var(--accent-soft);
        border-color: var(--accent);
      }
      @keyframes dealIn {
        from {
          opacity: 0;
          translate: -20px 0;
        }
      }
      .ev-t {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .ev-t th {
        text-align: left;
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 600;
        padding: 6px 8px;
        border-bottom: 1px solid var(--line);
      }
      .ev-t td {
        padding: 9px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--graphite);
        font-variant-numeric: tabular-nums;
      }
      .ev-t td:first-child {
        color: var(--ink);
        font-weight: 500;
      }
      .ev-t td b {
        font-weight: 600;
        color: var(--ink);
        margin-left: 8px;
      }
      .ev-t tr {
        transition: background 0.6s;
      }
      .ev-t tr.flash {
        background: var(--accent-soft);
      }
      .lv {
        display: inline-block;
        width: 70px;
        height: 5px;
        border-radius: 3px;
        background: var(--fog);
        vertical-align: middle;
        overflow: hidden;
      }
      .lv i {
        display: block;
        height: 100%;
        width: var(--v);
        background: var(--accent);
        transition: width 0.6s var(--ease);
      }
      .est {
        display: inline-block;
        font-size: 11.5px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 999px;
      }
      .est.ok {
        background: color-mix(in srgb, #1db954 14%, transparent);
        color: #138a3e;
      }
      .est.low {
        background: color-mix(in srgb, #e5484d 14%, transparent);
        color: #c42b30;
      }
      .est.wait {
        background: var(--fog);
        color: var(--muted);
      }
      .dark-on .est.ok {
        color: #3ddc84;
      }
      .dark-on .est.low {
        color: #ff8a8d;
      }
      .ev-att {
        display: grid;
        justify-items: center;
        align-content: start;
      }
      .ev-att .ev-h {
        width: 100%;
      }
      .donut {
        --p: 90;
        width: 150px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(
          var(--accent) calc(var(--p) * 1%),
          var(--fog) 0
        );
        display: grid;
        place-content: center;
        text-align: center;
        position: relative;
      }
      .donut::before {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: 50%;
        background: var(--card);
      }
      .donut b,
      .donut small {
        position: relative;
      }
      .donut b {
        font: 700 28px var(--f-display);
        color: var(--ink);
      }
      .donut small {
        font-size: 11.5px;
        color: var(--muted);
      }
      .leg {
        display: flex;
        gap: 12px;
        margin-top: 14px;
        font-size: 12px;
        color: var(--muted);
        flex-wrap: wrap;
        justify-content: center;
      }
      .leg i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 2px;
        margin-right: 5px;
      }
      .leg .a {
        background: var(--accent);
      }
      .leg .b {
        background: var(--line);
      }
      .leg .c {
        background: var(--muted);
      }
      .ev-staff {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .ev-staff li {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        color: var(--ink);
      }
      .ev-staff .av {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--fog);
      }
      .ev-line {
        width: 100%;
        height: 160px;
      }
      .ev-line {
        clip-path: inset(0 100% 0 0);
        animation: reveal 1.4s var(--ease) forwards;
      }
      .ev-line path {
        fill: none;
        stroke: var(--accent);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
      }
      @keyframes reveal {
        to {
          clip-path: inset(0 0 0 0);
        }
      }
      .ev-rep {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .ev-rep li {
        display: grid;
        grid-template-columns: 34px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        font-size: 13.5px;
        color: var(--ink);
      }
      .ev-rep .ri {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--fog);
        display: grid;
        place-items: center;
      }
      .ev-rep .ri .ic {
        width: 16px;
        height: 16px;
      }
      .pg {
        width: 100px;
        height: 6px;
        border-radius: 3px;
        background: var(--fog);
        overflow: hidden;
      }
      .pg i {
        display: block;
        height: 100%;
        width: var(--v);
        background: var(--accent);
        transition: width 0.8s var(--ease);
      }
      .ev-chain {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 26px 6px;
      }
      .ev-chain .lk {
        display: grid;
        justify-items: center;
        gap: 8px;
        text-align: center;
        flex: 0 0 auto;
      }
      .ev-chain .dot {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid var(--line);
        display: grid;
        place-items: center;
        color: transparent;
        transition: all 0.4s var(--ease);
      }
      .ev-chain .dot .ic {
        width: 18px;
        height: 18px;
      }
      .ev-chain .lk b {
        font-size: 12.5px;
        color: var(--muted);
        transition: color 0.3s;
      }
      .ev-chain .lk.on .dot {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        box-shadow: 0 0 0 5px var(--accent-soft);
      }
      .ev-chain .lk.on b {
        color: var(--ink);
      }
      .ev-chain .ln {
        flex: 1;
        height: 2px;
        background: var(--line);
        margin: 0 6px 24px;
      }
      .ev-log {
        list-style: none;
        margin: 6px 0 0;
        padding: 0;
        display: grid;
        gap: 6px;
      }
      .ev-log li {
        font-size: 13px;
        color: var(--graphite);
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--fog);
      }
      @media (max-width: 900px) {
        .erpx-grid {
          grid-template-columns: 1fr;
        }
        .erpx-steps {
          display: none;
        }
        .erpx-sticky {
          position: static;
        }
        .ea-body {
          grid-template-columns: 1fr;
          height: auto;
        }
        .ea-side {
          display: flex;
          overflow-x: auto;
          border-right: 0;
          border-bottom: 1px solid var(--line);
          gap: 6px;
          padding: 8px;
        }
        .ea-side button {
          flex: none;
          padding: 8px 12px;
        }
        .ea-search,
        .ea-tag {
          display: none;
        }
        .ea-main {
          min-height: 430px;
        }
        .ev-kpis {
          grid-template-columns: 1fr 1fr;
        }
        .ev-row {
          grid-template-columns: 1fr;
        }
        .ev-bars {
          height: 110px;
        }
        .ev-kb {
          grid-template-columns: 1fr 1fr 1fr;
          gap: 6px;
        }
        .ev-kb .col {
          min-height: 220px;
          padding: 6px;
        }
        .deal {
          font-size: 11.5px;
          padding: 7px;
        }
        .ev-chain {
          padding: 16px 0;
        }
        .ev-chain .lk b {
          font-size: 11px;
        }
        .ev-chain .dot {
          width: 30px;
          height: 30px;
        }
      }

      /* ---- AI workflow ---- */
      .aix-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      .aix-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .aix-tabs button {
        border: 1px solid var(--band-line);
        background: transparent;
        color: var(--band-muted);
        border-radius: 999px;
        padding: 9px 15px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.25s;
      }
      .aix-tabs button:hover {
        color: #fff;
        border-color: #5b5f6a;
      }
      .aix-tabs button[aria-selected="true"] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }
      .aix-flow {
        border: 1px solid var(--band-line);
        border-radius: 18px;
        background: color-mix(in srgb, #fff 3%, var(--band));
        padding: 20px;
      }
      .af-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        color: #fff;
        font-size: 14px;
      }
      .af-head .ex {
        font-size: 11px;
        font-weight: 600;
        color: var(--band-muted);
        border: 1px solid var(--band-line);
        border-radius: 6px;
        padding: 3px 7px;
      }
      .af-run {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--band-muted);
      }
      .af-run i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        animation: blinkDot 1.2s infinite;
      }
      .aix-flow ol {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
      }
      .aix-flow ol::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 16px;
        bottom: 16px;
        width: 2px;
        background: var(--band-line);
      }
      .aix-flow li {
        position: relative;
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 14px;
        align-items: center;
        padding: 12px 12px 12px 44px;
        border-radius: 12px;
        transition: background 0.35s;
      }
      .aix-flow li::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 50%;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        border-radius: 50%;
        background: var(--band);
        border: 2px solid var(--band-line);
        transition: all 0.35s var(--ease);
      }
      .aix-flow .k {
        text-align: left;
        font: 700 12px var(--f-display);
        color: #5b5f6a;
        letter-spacing: 0.06em;
        transition: color 0.3s;
      }
      .aix-flow .k em {
        display: block;
        font-style: normal;
        font-size: 13px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-top: 2px;
      }
      .aix-flow .v {
        font-size: 14.5px;
        color: #5b5f6a;
        transition: color 0.35s;
      }
      .aix-flow li.is-done::before {
        background: var(--accent);
        border-color: var(--accent);
      }
      .aix-flow li.is-done .k,
      .aix-flow li.is-done .v {
        color: var(--band-muted);
      }
      .aix-flow li.on {
        background: color-mix(in srgb, var(--accent) 16%, transparent);
      }
      .aix-flow li.on::before {
        background: #fff;
        border-color: var(--accent);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      .aix-flow li.on .k {
        color: #9db1ff;
      }
      .aix-flow li.on .v {
        color: #fff;
      }
      @media (max-width: 900px) {
        .aix-grid {
          grid-template-columns: 1fr;
        }
        .aix-flow li {
          grid-template-columns: 1fr;
          gap: 4px;
        }
        .aix-tabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 6px;
        }
        .aix-tabs button {
          flex: none;
        }
      }

      /* ---- built by ---- */
      .bx-head {
        text-align: center;
        max-width: 780px;
        margin: 0 auto 34px;
      }
      .bx-head .lead {
        margin: 18px auto 0;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        border-radius: 999px;
        padding: 6px 12px;
        margin-bottom: 20px;
      }
      .badge i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        animation: blinkDot 1.6s infinite;
      }
      .bx-head h2 {
        font-size: clamp(34px, 5vw, 72px);
      }
      .bx-canvas {
        position: relative;
        height: clamp(420px, 46vw, 560px);
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--card);
        overflow: hidden;
        touch-action: pan-y;
      }
      .bx-canvas::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 44px 44px;
        opacity: 0.45;
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 30%,
          transparent 75%
        );
        mask-image: radial-gradient(
          ellipse at center,
          #000 30%,
          transparent 75%
        );
        pointer-events: none;
      }
      .bx-canvas canvas {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
      }
      .bx-hint {
        position: absolute;
        left: 16px;
        bottom: 14px;
        font-size: 12.5px;
        color: var(--muted);
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .bx-hint::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
      }
      @media (max-width: 640px) {
        .bx-canvas {
          height: 480px;
        }
      }

      /* ---- projects ---- */
      .prx-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .prx-card {
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--card);
        overflow: hidden;
        transition:
          box-shadow 0.45s var(--ease),
          border-color 0.3s;
      }
      .prx-card:hover,
      .prx-card.open {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
        box-shadow: 0 34px 60px -36px rgba(10, 20, 60, 0.5);
      }
      .prx-prev {
        position: relative;
        height: 300px;
        background: var(--fog);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
      }
      .prx-prev .ph {
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 3;
      }
      .prx-hint {
        position: absolute;
        right: 12px;
        top: 12px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 10px;
        transition: opacity 0.3s;
      }
      .prx-hint .ic {
        width: 13px;
        height: 13px;
      }
      .prx-card:hover .prx-hint,
      .prx-card.open .prx-hint {
        opacity: 0;
      }
      @media (hover: none) {
        .prx-hint {
          display: none;
        }
      }
      .pv {
        position: absolute;
        inset: 44px 22px 0;
        border-radius: 12px 12px 0 0;
        background: var(--card);
        border: 1px solid var(--line);
        border-bottom: 0;
        padding: 16px;
        transition:
          opacity 0.45s,
          transform 0.6s var(--ease);
      }
      .pv.open {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
        pointer-events: none;
      }
      .prx-card:hover .pv.base,
      .prx-card.open .pv.base {
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
      }
      .prx-card:hover .pv.open,
      .prx-card.open .pv.open {
        opacity: 1;
        transform: none;
      }
      .pv-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        font-size: 14px;
      }
      .pv-top b {
        color: var(--ink);
      }
      .pv-kpi {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 14px;
      }
      .pv-kpi div {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 9px;
      }
      .pv-kpi small {
        font-size: 11px;
        color: var(--muted);
      }
      .pv-kpi b {
        display: block;
        font: 700 18px var(--f-display);
        color: var(--ink);
      }
      .pv-bars {
        display: flex;
        gap: 6px;
        align-items: flex-end;
        height: 90px;
      }
      .pv-bars i {
        flex: 1;
        border-radius: 3px 3px 0 0;
        background: color-mix(in srgb, var(--accent) 25%, transparent);
      }
      .pv-bars i:last-child {
        background: var(--accent);
      }
      .pv-mods {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .pv-mods div {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px;
        display: grid;
        gap: 2px;
        opacity: 0;
        translate: 0 10px;
        transition:
          opacity 0.4s calc(var(--j) * 0.06s),
          translate 0.5s var(--ease) calc(var(--j) * 0.06s);
      }
      .prx-card:hover .pv-mods div,
      .prx-card.open .pv-mods div {
        opacity: 1;
        translate: 0 0;
      }
      .pv-mods .ic {
        width: 18px;
        height: 18px;
        color: var(--accent);
      }
      .pv-mods b {
        font-size: 13px;
        color: var(--ink);
      }
      .pv-mods small {
        font-size: 11px;
        color: var(--muted);
      }
      .pv-mods div:nth-child(3) {
        grid-column: span 1;
        background: var(--accent-soft);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      }
      .route {
        position: relative;
        height: 4px;
        margin-top: 6px;
        border-radius: 2px;
        background: color-mix(in srgb, var(--accent) 25%, transparent);
      }
      .route i {
        position: absolute;
        top: -3px;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        animation: bus 3s ease-in-out infinite alternate;
      }
      @keyframes bus {
        to {
          left: calc(100% - 10px);
        }
      }
      .pv-call {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 16px 0 24px;
      }
      .pv-call .ring {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 0 0 0 var(--accent);
        animation: callRing 1.6s infinite;
      }
      @keyframes callRing {
        70% {
          box-shadow: 0 0 0 14px transparent;
        }
      }
      .pv-call small {
        font-size: 12px;
        color: var(--muted);
      }
      .pv-call b {
        display: block;
        color: var(--ink);
        font-size: 16px;
      }
      .pv .wave {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 60px;
      }
      .pv .wave i {
        flex: 1;
        border-radius: 2px;
        background: color-mix(in srgb, var(--accent) 55%, transparent);
        animation: wv 1s ease-in-out calc(var(--j) * -0.07s) infinite alternate;
        height: 20%;
      }
      .pv-flow {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }
      .pv-flow span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px 10px;
        animation: flowLit 2.4s calc(var(--j) * 0.6s) infinite;
      }
      .pv-flow span .ic {
        width: 14px;
        height: 14px;
        color: var(--accent);
      }
      .pv-flow .ar {
        width: 14px;
        height: 1.5px;
        background: var(--line);
      }
      @keyframes flowLit {
        0%,
        25% {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-soft);
        }
        35%,
        100% {
          border-color: var(--line);
          box-shadow: none;
        }
      }
      .pv-tx {
        display: grid;
        gap: 8px;
      }
      .pv-tx p {
        font-size: 12.5px;
        color: var(--graphite);
        background: var(--fog);
        border-radius: 10px;
        padding: 8px 10px;
        max-width: 80%;
      }
      .pv-tx p.me {
        justify-self: end;
        background: var(--accent-soft);
      }
      .pv-tx b {
        display: block;
        font-size: 10.5px;
        color: var(--muted);
      }
      .pv-prog {
        display: grid;
        grid-template-columns: 1fr 120px 40px;
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        color: var(--ink);
      }
      .pv-prog i {
        height: 6px;
        border-radius: 3px;
        background: var(--fog);
        position: relative;
        overflow: hidden;
      }
      .pv-prog i::after {
        content: "";
        position: absolute;
        inset: 0;
        width: var(--v);
        background: var(--accent);
      }
      .pv-prog b {
        font-size: 12.5px;
        text-align: right;
      }
      .pv-dash {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
      }
      .pv-dash > div {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px;
      }
      .pv-dash .c1 {
        grid-row: span 2;
      }
      .pv-dash small {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .pv-bars.two {
        height: 150px;
        gap: 10px;
      }
      .pv-bars.two span {
        flex: 1;
        display: flex;
        gap: 3px;
        align-items: flex-end;
        height: 100%;
      }
      .pv-bars.two span i {
        flex: 1;
        background: var(--line);
      }
      .pv-bars.two span i:last-child {
        background: var(--accent);
      }
      .pv-dash b {
        font-size: 13px;
        color: var(--ink);
        display: block;
      }
      .pv-dash em {
        font-style: normal;
        font-size: 12px;
        color: var(--muted);
      }
      .pv-dash .lv {
        width: 100%;
        margin: 4px 0 8px;
      }
      .pv-login {
        display: grid;
        justify-items: center;
        gap: 10px;
        padding-top: 22px;
      }
      .pv-login .mk {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        width: 22px;
        height: 22px;
      }
      .pv-login .mk i {
        background: var(--ink);
      }
      .pv-login .mk i:nth-child(4) {
        background: var(--accent);
      }
      .pv-login b {
        font-size: 14px;
        color: var(--ink);
      }
      .pv-login .in {
        width: 70%;
        height: 30px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .pv-login .bt {
        width: 70%;
        height: 32px;
        border-radius: 8px;
        background: var(--accent);
      }
      .pv-app .ws {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12.5px;
        color: var(--muted);
        margin-bottom: 12px;
      }
      .pv-app .ws b {
        color: var(--ink);
      }
      .kb {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .kb div {
        background: var(--fog);
        border-radius: 10px;
        padding: 8px;
        display: grid;
        gap: 6px;
        align-content: start;
        min-height: 170px;
      }
      .kb small {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--muted);
      }
      .kb i {
        height: 38px;
        border-radius: 7px;
        background: var(--card);
        border: 1px solid var(--line);
        opacity: 0;
        translate: 0 8px;
        transition:
          opacity 0.4s calc(var(--j) * 0.1s + 0.15s),
          translate 0.5s var(--ease) calc(var(--j) * 0.1s + 0.15s);
      }
      .prx-card:hover .kb i,
      .prx-card.open .kb i {
        opacity: 1;
        translate: 0 0;
      }
      .kb div:last-child i {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
      }
      .prx-bd {
        padding: 22px 24px 24px;
      }
      .prx-bd .meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
      }
      .prx-bd h3 {
        font-size: clamp(20px, 2vw, 24px);
        margin-bottom: 8px;
      }
      .prx-bd p {
        font-size: 15px;
        color: var(--muted);
        margin-bottom: 14px;
      }
      @media (max-width: 900px) {
        .prx-grid {
          grid-template-columns: 1fr;
        }
        .prx-prev {
          height: 270px;
        }
        .pv {
          inset: 40px 14px 0;
        }
      }

      /* ---- final CTA: what should we build ---- */
      .bq {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(24px, 4vw, 56px);
        align-items: center;
        border-radius: 22px;
        background: var(--band);
        color: var(--band-muted);
        padding: clamp(28px, 5vw, 64px);
        position: relative;
        overflow: hidden;
      }
      .bq::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.08) 1px,
          transparent 1px
        );
        background-size: 20px 20px;
        pointer-events: none;
      }
      .bq > * {
        position: relative;
      }
      .bq h2 {
        color: #fff;
        font-size: clamp(32px, 4.4vw, 60px);
        margin-bottom: 14px;
      }
      .bq p {
        font-size: 17px;
        margin-bottom: 24px;
      }
      .bq-opts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 28px;
      }
      .bq-opts button {
        border: 1px solid var(--band-line);
        background: transparent;
        color: #d7d9df;
        border-radius: 999px;
        padding: 10px 16px;
        font-size: 14.5px;
        font-weight: 500;
        transition: all 0.25s;
      }
      .bq-opts button:hover {
        border-color: #6b6f7a;
        color: #fff;
      }
      .bq-opts button[aria-checked="true"] {
        background: #fff;
        color: #000;
        border-color: #fff;
      }
      .bq .btn-ink {
        background: var(--accent);
        color: #fff;
      }
      .bq .btn-ink:hover {
        background: var(--accent-2);
      }
      .bq .btn-line {
        background: transparent;
        color: #fff;
        border-color: var(--band-line);
      }
      .bq-card {
        border: 1px solid var(--band-line);
        border-radius: 18px;
        background: color-mix(in srgb, #fff 4%, transparent);
        padding: 22px;
        animation: swapIn 0.45s var(--ease);
      }
      .bq-h {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
      }
      .bq-h .fi {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
      }
      .bq-h small {
        font-size: 12px;
        color: var(--band-muted);
      }
      .bq-h b {
        display: block;
        font: 700 22px var(--f-display);
        color: #fff;
      }
      .bq-h .ea-live {
        margin-left: auto;
        color: #d7d9df;
      }
      .bq-stack {
        display: grid;
        gap: 8px;
        margin-bottom: 22px;
      }
      .bq-stack span {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        background: color-mix(in srgb, #fff 6%, transparent);
        color: #fff;
        font-size: 14.5px;
        opacity: 0;
        translate: 0 10px;
        animation: fnIn 0.45s var(--ease) calc(var(--j) * 0.08s + 0.1s) forwards;
      }
      .bq-stack span::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--accent);
      }
      .bq-steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .bq-steps li {
        font-size: 12px;
        color: var(--band-muted);
        border: 1px solid var(--band-line);
        border-radius: 999px;
        padding: 4px 10px;
        opacity: 0;
        animation: fnIn 0.4s calc(var(--j) * 0.06s + 0.35s) forwards;
      }
      @media (max-width: 900px) {
        .bq {
          grid-template-columns: 1fr;
        }
      }

      /* ---- nav indicator + progress ---- */
      .menu {
        position: relative;
      }
      .nav-ind {
        position: absolute;
        left: 0;
        top: 50%;
        height: 36px;
        margin-top: -18px;
        border-radius: 9px;
        background: var(--fog);
        z-index: -1;
        opacity: 0;
        transition:
          transform 0.35s var(--ease),
          width 0.35s var(--ease),
          opacity 0.25s;
        pointer-events: none;
      }
      .menu:has(.nav-ind) > a:hover,
      .menu:has(.nav-ind) > .dd > a:hover,
      .menu:has(.nav-ind) a.on {
        background: transparent;
      }
      .menu a.on {
        color: var(--ink);
        font-weight: 600;
      }
      .menu {
        isolation: isolate;
      }
      .nav-prog {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: var(--accent);
        transform-origin: left;
        transform: scaleX(0);
        opacity: 0.85;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .story {
          height: auto;
        }
        .story-pin {
          position: relative;
          height: auto;
          padding: 80px 0;
        }
        .sw .a,
        .sw.sp .a {
          display: none;
        }
        .sw .b {
          position: relative;
          opacity: 1;
          translate: none;
          filter: none;
        }
        .arch-core::after,
        .sfc i,
        .ap-act i {
          animation: none;
        }
        .sfn {
          opacity: 1;
          translate: none;
        }
      }

      .story-grid > *,
      .svx-grid > *,
      .erpx-grid > *,
      .aix-grid > *,
      .bq > *,
      .prx-grid > *,
      .hero-grid > * {
        min-width: 0;
      }
      .aix-flow li {
        text-align: left;
      }
      .navback {
        display: none;
        flex: none;
        width: 40px;
        height: 40px;
        margin-right: -12px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--card);
        color: var(--ink);
        align-items: center;
        justify-content: center;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      .navback.show {
        display: inline-flex;
      }
      .navback:hover {
        border-color: var(--ink);
        background: var(--fog);
      }
      .navback .ic {
        width: 18px;
        height: 18px;
        transform: rotate(180deg);
      }
      .ltile {
        flex: none;
        width: 200px;
        height: 100px;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #fff;
        transition:
          transform 0.35s var(--ease),
          box-shadow 0.35s;
      }
      .ltile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .ltile:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      .logo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 16px;
      }
      .logo-grid .ltile {
        width: auto;
        height: auto;
        aspect-ratio: 2/1;
      }
      @media (max-width: 600px) {
        .logo-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .ltile {
          width: 160px;
          height: 80px;
        }
      }
      .emb-img {
        width: 96px;
        height: auto;
        flex: none;
        background: #fff;
        border-radius: 16px;
        padding: 8px;
      }