@font-face {
      font-family: Inter;
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('../assets/fonts/inter-latin.woff2') format('woff2')
    }

    @font-face {
      font-family: Space Grotesk;
      font-style: normal;
      font-weight: 500 700;
      font-display: swap;
      src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2')
    }

    @font-face {
      font-family: JetBrains Mono;
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2')
    }

    :root {
      --bg: oklch(12% .035 255);
      --bg-deep: oklch(9% .03 255);
      --surface: oklch(17% .035 255);
      --surface-raised: oklch(21% .04 255);
      --fg: oklch(97% .015 235);
      --muted: oklch(73% .035 245);
      --dim: oklch(57% .04 245);
      --border: oklch(32% .045 250);
      --accent: oklch(84% .14 205);
      --accent-dark: oklch(37% .12 220);
      --blue: oklch(48% .15 230);
      --shadow: 0 24px 80px oklch(3% .04 255/.32);
      --ease: cubic-bezier(.2, 0, 0, 1)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: Inter, system-ui, sans-serif;
      line-height: 1.55
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font: inherit;
      color: inherit
    }

    .container {
      width: min(1160px, calc(100% - 48px));
      margin-inline: auto
    }

    .mono {
      font: 600 11px/1.4 'JetBrains Mono', monospace;
      letter-spacing: .09em;
      text-transform: uppercase
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--accent)
    }

    .eyebrow:before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--accent)
    }

    h1,
    h2,
    h3 {
      font-family: 'Space Grotesk', sans-serif;
      letter-spacing: -.02em;
      line-height: 1.08;
      margin: 0
    }

    h1 {
      font-size: clamp(50px, 7.2vw, 94px);
      max-width: 890px
    }

    h2 {
      font-size: clamp(38px, 5vw, 68px);
      max-width: 720px
    }

    h3 {
      font-size: 25px
    }

    p {
      color: var(--muted);
      margin: 0;
      max-width: 65ch
    }

    .skip {
      position: absolute;
      left: 16px;
      top: -80px;
      z-index: 10;
      padding: 12px 16px;
      background: var(--accent);
      color: var(--bg-deep)
    }

    .skip:focus {
      top: 16px
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 5;
      background: oklch(10% .03 255/.86);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(18px)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font: 700 16px 'Space Grotesk', sans-serif
    }

    .mark {
      display: flex;
      gap: 3px
    }

    .mark span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      background: var(--blue);
      color: var(--fg);
      font-size: 14px
    }

    .mark span:last-child {
      background: var(--accent);
      color: var(--bg-deep)
    }

    .nav-links {
      display: flex;
      gap: 30px;
      color: var(--muted);
      font-size: 13px
    }

    .nav-links a {
      position: relative;
      padding: 26px 0
    }

    .nav-links a:hover,
    .nav-links a[aria-current="true"] {
      color: var(--fg)
    }

    .nav-links a[aria-current="true"]:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--accent)
    }

    .nav-cta,
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 18px;
      border: 1px solid var(--accent);
      font-weight: 600;
      letter-spacing: .02em
    }

    .nav-cta {
      min-height: 40px;
      padding: 0 14px;
      font-size: 13px
    }

    .nav-cta:hover,
    .btn:hover {
      background: var(--accent);
      color: var(--bg-deep)
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px
    }

    .hero {
      position: relative;
      min-height: calc(100vh - 72px);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--bg-deep)
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg-deep) 0%, oklch(9% .03 255/.86) 45%, oklch(9% .03 255/.12) 100%), radial-gradient(circle at 78% 48%, oklch(45% .13 220/.24), transparent 32%)
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .19;
      background-image: linear-gradient(oklch(84% .14 205/.12) 1px, transparent 1px), linear-gradient(90deg, oklch(84% .14 205/.12) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 78% 48%, black, transparent 66%)
    }

    .orb {
      position: absolute;
      width: 520px;
      height: 520px;
      right: 7%;
      top: 16%;
      border: 1px solid oklch(84% .14 205/.18);
      border-radius: 50%;
      box-shadow: 0 0 0 42px oklch(84% .14 205/.025), 0 0 0 130px oklch(84% .14 205/.018);
      transform: rotate(-17deg)
    }

    .orb:before,
    .orb:after {
      content: "";
      position: absolute;
      background: var(--accent);
      box-shadow: 0 0 24px var(--accent)
    }

    .orb:before {
      width: 9px;
      height: 9px;
      left: 18%;
      top: 24%
    }

    .orb:after {
      width: 13px;
      height: 13px;
      right: 20%;
      bottom: 28%
    }

    .hero-content {
      position: relative;
      z-index: 1;
      padding: 106px 0 84px
    }

    .hero-kicker {
      max-width: 500px;
      color: var(--dim);
      margin: 24px 0 28px
    }

    .hero h1 span {
      color: var(--accent)
    }

    .hero-deck {
      max-width: 570px;
      font-size: 19px
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 38px
    }

    .text-link {
      color: var(--accent);
      border-bottom: 1px solid var(--accent);
      padding-bottom: 3px
    }

    .text-link:hover {
      color: var(--fg);
      border-color: var(--fg)
    }

    .proof-strip {
      display: flex;
      gap: 0;
      margin-top: 70px;
      border-top: 1px solid var(--border);
      max-width: 700px
    }

    .proof {
      padding: 16px 28px 0 0;
      margin-right: 28px;
      border-right: 1px solid var(--border);
      color: var(--muted)
    }

    .proof:last-child {
      border-right: 0
    }

    .proof strong {
      display: block;
      color: var(--fg);
      font: 600 14px 'Space Grotesk', sans-serif;
      margin-bottom: 4px
    }

    .proof span {
      font-size: 12px;
      color: var(--dim)
    }

    .section {
      padding: 124px 0;
      border-top: 1px solid var(--border);
      scroll-margin-top: 72px
    }

    .section-intro {
      max-width: 540px;
      font-size: 18px
    }

    .section-head {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 72px;
      align-items: end;
      margin-bottom: 54px
    }

    .section-head h2 {
      margin-top: 20px
    }

    .case {
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow)
    }

    .case-bar {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
      color: var(--dim)
    }

    .case-bar strong {
      color: var(--fg);
      font: 600 15px 'Space Grotesk', sans-serif
    }

    .case-main {
      display: grid;
      grid-template-columns: 1.15fr .85fr
    }

    .case-copy {
      padding: 38px;
      border-right: 1px solid var(--border)
    }

    .case-copy h3 {
      margin-bottom: 14px
    }

    .case-copy>p {
      max-width: 580px
    }

    .owned {
      display: grid;
      gap: 0;
      margin: 32px 0 0;
      padding: 0;
      list-style: none
    }

    .owned li {
      padding: 14px 0;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 14px
    }

    .owned li:before {
      content: "+";
      color: var(--accent);
      font: 600 17px 'JetBrains Mono', monospace;
      margin-right: 12px
    }

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

    .metric {
      padding: 24px;
      border-bottom: 1px solid var(--border)
    }

    .metric-context {
      grid-column: span 2;
      padding: 16px 24px 0;
      color: var(--dim);
      font-size: 12px
    }

    .metric:nth-child(odd) {
      border-right: 1px solid var(--border)
    }

    .metric.featured {
      grid-column: span 2;
      min-height: 185px;
      background: var(--accent-dark)
    }

    .metric-value {
      display: block;
      color: var(--fg);
      font: 600 clamp(34px, 4vw, 58px)/1 'Space Grotesk', sans-serif;
      margin-bottom: 10px
    }

    .metric.featured .metric-value {
      font-size: clamp(48px, 6vw, 82px)
    }

    .metric-label {
      display: block;
      color: var(--muted);
      font-size: 12px
    }

    .architecture {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      margin-top: 1px;
      background: var(--border);
      border-top: 1px solid var(--border)
    }

    .arch-node {
      min-height: 112px;
      padding: 20px;
      background: var(--surface)
    }

    .arch-node span {
      display: block;
      color: var(--accent);
      margin-bottom: 28px
    }

    .arch-node strong {
      font: 600 15px 'Space Grotesk', sans-serif
    }

    .arch-node p {
      font-size: 12px;
      margin-top: 6px
    }

    .capabilities {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 1px solid var(--border)
    }

    .capability {
      min-height: 190px;
      padding: 26px 28px;
      border-bottom: 1px solid var(--border);
      transition: background .2s var(--ease), transform .2s var(--ease)
    }

    .capability:nth-child(odd) {
      border-right: 1px solid var(--border)
    }

    .capability:hover,
    .capability:focus-within {
      background: var(--surface);
      transform: translateY(-3px)
    }

    .capability b {
      color: var(--accent);
      font: 500 12px 'JetBrains Mono', monospace
    }

    .capability h3 {
      margin: 36px 0 8px
    }

    .capability p {
      font-size: 14px
    }

    .capability small {
      display: block;
      margin-top: 18px;
      color: var(--dim);
      font: 500 11px 'JetBrains Mono', monospace
    }

    .projects {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .project {
      display: flex;
      flex-direction: column;
      min-height: 330px;
      padding: 26px;
      background: var(--surface);
      border: 1px solid var(--border);
      transition: border-color .2s var(--ease), transform .2s var(--ease)
    }

    .project:hover {
      border-color: var(--accent);
      transform: translateY(-5px)
    }

    .project-top {
      display: flex;
      justify-content: space-between;
      color: var(--accent)
    }

    .status {
      color: var(--dim)
    }

    .project h3 {
      margin: 52px 0 12px
    }

    .project p {
      font-size: 14px
    }

    .terminal {
      margin-top: auto;
      padding: 12px 14px;
      border: 1px solid var(--border);
      background: var(--bg-deep);
      color: var(--muted);
      font: 11px/1.8 'JetBrains Mono', monospace
    }

    .terminal i {
      color: var(--accent);
      font-style: normal
    }

    .project-link {
      display: block;
      margin-top: 18px;
      color: var(--accent);
      font: 500 12px 'JetBrains Mono', monospace
    }

    .project-link:hover {
      color: var(--fg)
    }

    .work-layout {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 90px
    }

    .profile-chip {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 32px
    }

    .profile-mark {
      display: grid;
      place-items: center;
      width: 62px;
      height: 62px;
      background: var(--accent);
      color: var(--bg-deep);
      font: 700 17px 'Space Grotesk', sans-serif
    }

    .profile-chip strong {
      display: block;
      font: 600 16px 'Space Grotesk', sans-serif
    }

    .profile-chip span span {
      display: block;
      margin-top: 4px;
      color: var(--dim);
      font-size: 12px
    }

    .work-note {
      font-size: 19px;
      margin-top: 20px
    }

    .availability {
      display: inline-block;
      color: var(--accent);
      margin-top: 28px
    }

    .principles {
      border-top: 1px solid var(--border)
    }

    .principle {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 24px;
      padding: 22px 0;
      border-bottom: 1px solid var(--border)
    }

    .principle b {
      color: var(--accent);
      font: 500 11px 'JetBrains Mono', monospace;
      text-transform: uppercase
    }

    .principle p {
      font-size: 14px
    }

    .engagement {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 50px;
      background: var(--border);
      border: 1px solid var(--border)
    }

    .engagement-step {
      padding: 24px;
      background: var(--surface)
    }

    .engagement-step b {
      display: block;
      color: var(--accent);
      font: 500 11px 'JetBrains Mono', monospace
    }

    .engagement-step h3 {
      font-size: 21px;
      margin: 24px 0 8px
    }

    .engagement-step p {
      font-size: 13px
    }

    .stack-wrap {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 80px
    }

    .stack-groups {
      display: grid;
      gap: 24px
    }

    .stack-group-label {
      color: var(--dim);
      margin-bottom: 10px
    }

    .stack-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .stack-tag {
      cursor: pointer;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font: 500 12px 'JetBrains Mono', monospace;
      transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease)
    }

    .stack-tag:hover,
    .stack-tag[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--accent-dark);
      color: var(--fg)
    }

    .stack-output {
      min-height: 190px;
      padding: 24px;
      background: var(--surface);
      border-left: 2px solid var(--accent)
    }

    .stack-output .mono {
      color: var(--accent)
    }

    .stack-output h3 {
      margin: 18px 0 10px
    }

    .stack-output p {
      font-size: 15px
    }

    .contact {
      padding: 64px;
      background: var(--accent-dark);
      border: 1px solid var(--blue)
    }

    .contact h2 {
      max-width: 760px;
      margin: 20px 0
    }

    .contact p {
      max-width: 560px
    }

    .contact-links {
      display: flex;
      align-items: center;
      gap: 26px;
      margin-top: 34px
    }

    .contact .btn {
      background: var(--accent);
      color: var(--bg-deep)
    }

    .contact .btn:hover {
      background: var(--fg)
    }

    footer {
      padding: 28px 0 42px;
      color: var(--dim);
      font-size: 12px
    }

    footer .container {
      display: flex;
      justify-content: space-between;
      gap: 20px
    }

    @media(max-width:800px) {
      .container {
        width: min(100% - 32px, 620px)
      }

      .nav {
        flex-wrap: wrap;
        padding: 10px 0
      }

      .nav-links {
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 10px
      }

      .nav-links a {
        min-height: 42px;
        padding: 12px 0
      }

      .nav-cta {
        display: none
      }

      .hero {
        min-height: auto
      }

      .hero-content {
        padding: 76px 0 58px
      }

      .hero h1 {
        font-size: clamp(46px, 13vw, 72px)
      }

      .hero-deck {
        font-size: 17px
      }

      .orb {
        width: 380px;
        height: 380px;
        right: -180px;
        top: 32%;
        opacity: .45
      }

      .proof-strip {
        margin-top: 54px;
        display: grid;
        grid-template-columns: 1fr 1fr
      }

      .proof {
        margin: 0;
        padding-right: 12px;
        border-right: 0
      }

      .proof:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
        padding-bottom: 14px;
        margin-bottom: 14px
      }

      .proof:nth-child(odd) {
        border-right: 1px solid var(--border)
      }

      .section {
        padding: 82px 0
      }

      .section-head,
      .case-main,
      .work-layout,
      .stack-wrap {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .section-head {
        margin-bottom: 34px
      }

      .section-intro {
        font-size: 16px
      }

      .case-copy {
        padding: 26px;
        border-right: 0;
        border-bottom: 1px solid var(--border)
      }

      .metric {
        padding: 18px
      }

      .metric.featured {
        min-height: 150px
      }

      .architecture {
        grid-template-columns: 1fr 1fr
      }

      .arch-node {
        min-height: 102px;
        padding: 15px
      }

      .arch-node span {
        margin-bottom: 20px
      }

      .capabilities,
      .projects {
        grid-template-columns: 1fr
      }

      .capability {
        min-height: 170px
      }

      .capability:nth-child(odd) {
        border-right: 0
      }

      .project {
        min-height: 290px
      }

      .work-layout {
        gap: 42px
      }

      .principle {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .engagement {
        grid-template-columns: 1fr;
        margin-top: 36px
      }

      .contact {
        padding: 38px 24px
      }

      .contact-links {
        flex-wrap: wrap
      }

      .contact h2 {
        font-size: 40px
      }

      footer .container {
        flex-direction: column
      }
    }

    .stack-tag {
      cursor: pointer
    }

    .stack-tag:hover,
    .stack-tag:focus-visible,
    .stack-tag[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--accent-dark);
      color: var(--fg)
    }

    .stack-tag:focus-visible {
      outline-offset: 3px
    }

    .project:focus-visible {
      border-color: var(--accent)
    }

    .stack-tag {
      min-width: 44px
    }

    .stack-output {
      margin-top: 18px
    }

    .hero-actions .btn,
    .contact .btn {
      transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease)
    }

    .hero-actions .text-link,
    .contact-links .text-link {
      display: inline-flex;
      align-items: center;
      min-height: 44px
    }

    .hero-actions .btn:hover,
    .contact .btn:hover {
      transform: translateY(-2px)
    }

    .vortex-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      opacity: .46;
      pointer-events: none
    }

    .operating-model {
      margin-top: 48px;
      border: 1px solid var(--border);
      background: var(--surface)
    }

    .operating-model-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border)
    }

    .operating-model-head strong {
      font: 600 14px 'Space Grotesk', sans-serif
    }

    .operating-model-head span {
      color: var(--accent)
    }

    .operating-flow {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border)
    }

    .operating-step {
      min-height: 116px;
      padding: 18px;
      background: var(--surface)
    }

    .operating-step b {
      display: block;
      color: var(--accent);
      font: 500 11px 'JetBrains Mono', monospace;
      margin-bottom: 25px
    }

    .operating-step b:after {
      color: var(--accent)
    }


    .operating-step strong {
      display: block;
      font: 600 16px 'Space Grotesk', sans-serif
    }

    .operating-step p {
      font-size: 12px;
      margin-top: 5px
    }

    @media(max-width:800px) {
      .operating-flow {
        grid-template-columns: 1fr
      }

      .operating-step {
        min-height: 92px;
        padding: 18px
      }

      .operating-step b {
        margin-bottom: 12px
      }

      .hero-actions {
        gap: 16px
      }

      .proof-strip {
        grid-template-columns: 1fr
      }

      .proof {
        border-right: 0 !important;
        margin: 0
      }

      .proof:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
        padding-bottom: 14px;
        margin-bottom: 14px
      }

    }

    .work-layout {
      align-items: start
    }

    .principles {
      display: grid;
      gap: 0
    }

    .principle {
      padding: 18px 0;
      border-bottom: 1px solid var(--border)
    }

    .principle:first-child {
      border-top: 1px solid var(--border)
    }

    .principle b {
      font: 600 15px 'Space Grotesk', sans-serif
    }

    .principle p {
      font-size: 14px;
      margin-top: 6px
    }

    .engagement {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 50px;
      background: var(--border);
      border: 1px solid var(--border)
    }

    @media(max-width:800px) {
      .engagement {
        grid-template-columns: 1fr
      }
    }

    .engagement-step {
      padding: 24px;
      background: var(--surface)
    }

    .engagement-step b {
      display: block;
      color: var(--accent);
      font: 500 11px 'JetBrains Mono', monospace
    }

    .engagement-step b:after {
      color: var(--accent)
    }


    .engagement-step h3 {
      font-size: 21px;
      margin: 24px 0 8px
    }

    .engagement-step p {
      font-size: 13px
    }

    .capability>b {
      display: block
    }

    .architecture .arch-node span {
      margin-bottom: 16px
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        animation: none !important;
        transition: none !important
      }

    }