@layer reset, base, layout, components, motion, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  ul {
    margin: 0;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  button,
  a {
    color: inherit;
  }

  button {
    padding: 0;
    border: 0;
    font: inherit;
  }

  a {
    text-decoration: none;
  }

  svg {
    display: block;
  }
}

@layer base {
  :root {
    --ink: #08060f;
    --ink-soft: #110b1a;
    --surface: #171020;
    --paper: #f5f1f7;
    --paper-deep: #ece5f0;
    --primary: #a970ff;
    --secondary: #d95cff;
    --violet-deep: #6e32d9;
    --violet-soft: #d5b4ff;
    --focus: #9d5cff;
    --white: #fcfaff;
    --muted: #9c9da2;
    --line-dark: rgba(255, 255, 255, 0.15);
    --line-light: rgba(7, 8, 12, 0.16);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --page-x: max(clamp(1.25rem, 3.1vw, 3.75rem), calc(var(--safe-left) + 0.5rem), calc(var(--safe-right) + 0.5rem));
    --header-h: 5.75rem;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
  }

  html {
    background: var(--ink);
  }

  body {
    min-width: 20rem;
    overflow-x: clip;
    background: var(--ink);
    color: var(--paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  body.menu-open {
    overflow: hidden;
  }

  ::selection {
    background: var(--primary);
    color: var(--ink);
  }

  /* Browser scrollbars — Firefox */
  html,
  * {
    scrollbar-width: thin;
    scrollbar-color: #a970ff #0b0812;
  }

  /* Browser scrollbars — Chromium, Edge and Safari */
  *::-webkit-scrollbar {
    width: 0.78rem;
    height: 0.78rem;
  }

  *::-webkit-scrollbar-track {
    background:
      linear-gradient(180deg, rgba(169, 112, 255, 0.055), transparent 28%, transparent 72%, rgba(217, 92, 255, 0.045)),
      #0b0812;
  }

  *::-webkit-scrollbar-thumb {
    min-height: 3.5rem;
    border: 0.2rem solid #0b0812;
    border-radius: 100vmax;
    background: linear-gradient(180deg, #c89cff 0%, #a970ff 48%, #7540cf 100%);
    background-clip: padding-box;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.42),
      inset 0 -1px rgba(42, 17, 80, 0.6),
      0 0 0.8rem rgba(169, 112, 255, 0.35);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ddbdff 0%, #bb87ff 46%, #8e53eb 100%);
    background-clip: padding-box;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.55),
      0 0 1.1rem rgba(185, 128, 255, 0.58);
  }

  *::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #b87eff, #8145db);
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-corner {
    background: #0b0812;
  }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 5px;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 500;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: var(--ink);
    font-weight: 700;
    transform: translateY(-180%);
    transition: transform 0.25s ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .brand-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .grid-shell {
    width: min(100% - (var(--page-x) * 2), 112rem);
    margin-inline: auto;
  }

  .section-dark,
  .section-light,
  .section-warm,
  .section-primary {
    position: relative;
    z-index: 2;
  }

  .section-light {
    background: var(--paper);
    color: var(--ink);
  }

  .section-warm {
    background: var(--paper-deep);
    color: var(--ink);
  }

  .section-primary {
    background: var(--primary);
    color: var(--ink);
  }

  .section-kicker {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
  }

  .section-kicker span {
    color: var(--primary);
  }

  .section-kicker--dark {
    color: rgba(7, 8, 12, 0.68);
  }

  .section-kicker--dark span {
    color: var(--ink);
  }

  .display-heading {
    font-size: clamp(3.25rem, 7.25vw, 9rem);
    font-weight: 500;
    letter-spacing: -0.068em;
    line-height: 0.91;
  }

  .display-heading em {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .display-heading--dark em {
    color: var(--violet-deep);
  }
}

@layer layout {
  #webgl {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .scene-fallback {
    position: fixed;
    top: 50%;
    right: 9vw;
    z-index: 0;
    display: none;
    width: min(42vw, 38rem);
    aspect-ratio: 1;
    pointer-events: none;
    transform:
      translate3d(
        var(--fallback-shift-x, 0),
        calc(-50% + var(--fallback-shift-y, 0)),
        0
      );
    transform-style: preserve-3d;
    will-change: transform;
  }

  .no-webgl .scene-fallback {
    display: block;
  }

  .fallback-core,
  .fallback-orbit {
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(169, 112, 255, 0.45);
    border-radius: 43% 57% 56% 44% / 48% 44% 56% 52%;
  }

  .fallback-core {
    background:
      radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.9), transparent 8%),
      radial-gradient(circle at 60% 65%, var(--secondary), transparent 56%),
      linear-gradient(145deg, var(--primary), var(--ink-soft) 72%);
    box-shadow: 0 0 6rem rgba(217, 92, 255, 0.38);
    transform: rotate(-24deg);
    animation: fallback-core-breathe 5.8s ease-in-out infinite;
  }

  .fallback-orbit--one {
    inset: 5%;
    transform: rotateX(64deg) rotateZ(20deg);
    animation: fallback-orbit-one 14s linear infinite;
  }

  .fallback-orbit--two {
    inset: 1%;
    border-color: rgba(217, 92, 255, 0.3);
    transform: rotateY(67deg) rotateZ(-18deg);
    animation: fallback-orbit-two 17s linear infinite reverse;
  }

  .noise {
    position: fixed;
    inset: -50%;
    z-index: 60;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    animation: noise-shift 0.22s steps(2) infinite;
  }

  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
  }

  .scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left;
  }
}

@layer components {
  .loader {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    align-content: space-between;
    padding: clamp(1.25rem, 3vw, 3.5rem);
    overflow: hidden;
    background: var(--primary);
    color: var(--ink);
    transition: clip-path 1s var(--ease-smooth) 0.15s, visibility 0s 1.2s;
    clip-path: inset(0 0 0 0);
  }

  .loader.is-complete {
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }

  .loader__top {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
  }

  .loader__word {
    align-self: center;
    overflow: hidden;
    font-size: clamp(4.5rem, 15vw, 17rem);
    font-weight: 800;
    letter-spacing: -0.09em;
    line-height: 0.7;
  }

  .loader__word span {
    display: block;
    transform: translateY(110%);
    animation: loader-word 0.7s var(--ease-out) 0.05s forwards;
  }

  .loader__track {
    height: 2px;
    overflow: hidden;
    background: rgba(7, 8, 12, 0.22);
  }

  .loader__track span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ink);
    transform: scaleX(var(--loader-progress, 0));
    transform-origin: left;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: calc(var(--header-h) + var(--safe-top));
    padding: 0 var(--page-x);
    padding-top: var(--safe-top);
    color: var(--paper);
    opacity: 0;
    transform: translateY(-1rem);
    transition:
      color 0.35s ease,
      background 0.35s ease,
      backdrop-filter 0.35s ease,
      transform 0.8s var(--ease-out),
      opacity 0.8s ease;
  }

  body.is-ready .site-header {
    opacity: 1;
    transform: translateY(0);
  }

  .site-header.is-scrolled {
    background: rgba(7, 8, 12, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.58rem;
    width: max-content;
  }

  .brand__mark {
    display: block;
    width: 3.05rem;
    height: 2.5rem;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 0.7rem rgba(169, 112, 255, 0.16));
    transition: filter 0.45s ease, transform 0.45s var(--ease-out);
  }

  .brand__mark svg,
  .brand__name svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .brand__name {
    display: block;
    width: clamp(7.55rem, 8.6vw, 8.25rem);
    aspect-ratio: 270 / 34;
    color: var(--paper);
    transition: color 0.35s ease, transform 0.45s var(--ease-out);
  }

  .brand:hover .brand__mark {
    filter: drop-shadow(0 0 0.85rem rgba(169, 112, 255, 0.4));
    transform: translateY(-0.08rem) rotate(-1.5deg);
  }

  .brand:hover .brand__name {
    transform: translateX(0.12rem);
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.3vw, 2.75rem);
  }

  .desktop-nav a {
    position: relative;
    display: flex;
    gap: 0.42rem;
    align-items: baseline;
    padding: 0.75rem 0;
    font-size: clamp(0.875rem, 0.82vw, 0.9375rem);
    font-weight: 600;
  }

  .desktop-nav a::after {
    position: absolute;
    right: 0;
    bottom: 0.45rem;
    left: 0;
    height: 1px;
    content: "";
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out);
  }

  .desktop-nav a:hover::after,
  .desktop-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .desktop-nav span {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
  }

  .header-tools {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.85rem;
  }

  .header-mobile-tools {
    display: none;
  }

  .language-switch {
    position: relative;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .language-switch__toggle {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    justify-content: center;
    min-width: 3.55rem;
    min-height: 2.18rem;
    padding: 0.28rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100vmax;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  }

  .language-switch__toggle:hover,
  .language-switch__toggle[aria-expanded="true"] {
    border-color: rgba(169, 112, 255, 0.8);
    background: var(--primary);
    color: var(--ink);
  }

  .language-switch__flag {
    display: block;
    width: 1.45rem;
    height: auto;
    overflow: hidden;
    border-radius: 0.12rem;
    box-shadow: 0 0 0 1px rgba(7, 8, 12, 0.16);
  }

  .language-switch__chevron {
    width: 0.78rem;
    height: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform 0.2s ease;
  }

  .language-switch__toggle[aria-expanded="true"] .language-switch__chevron {
    transform: rotate(180deg);
  }

  .language-switch__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 2;
    display: grid;
    min-width: 9.5rem;
    max-height: min(30rem, calc(100vh - 5rem));
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.7rem;
    background: rgba(17, 11, 26, 0.96);
    box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
  }

  .language-switch__menu[hidden] {
    display: none;
  }

  .language-switch__link {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    color: rgba(255, 255, 255, 0.82);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .language-switch__link:hover,
  .language-switch__link:focus-visible {
    background: rgba(169, 112, 255, 0.2);
    color: var(--white);
  }

  .language-switch__link small {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .language-switch__link.is-unavailable {
    color: rgba(255, 255, 255, 0.52);
    cursor: not-allowed;
  }

  .mobile-menu .language-switch {
    width: max-content;
  }

  .mobile-menu .language-switch__toggle {
    border-color: rgba(7, 8, 12, 0.24);
    background: rgba(255, 255, 255, 0.3);
    color: var(--ink);
  }

  .mobile-menu .language-switch__toggle:hover,
  .mobile-menu .language-switch__toggle[aria-expanded="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  .mobile-menu .language-switch__menu {
    border-color: rgba(7, 8, 12, 0.2);
    background: var(--paper);
    box-shadow: 0 0.85rem 2rem rgba(7, 8, 12, 0.18);
  }

  .mobile-menu .language-switch__link {
    color: rgba(7, 8, 12, 0.82);
  }

  .mobile-menu .language-switch__link:hover,
  .mobile-menu .language-switch__link:focus-visible {
    background: rgba(7, 8, 12, 0.08);
    color: var(--ink);
  }

  .mobile-menu .language-switch__link small,
  .mobile-menu .language-switch__link.is-unavailable {
    color: rgba(7, 8, 12, 0.46);
  }

  .header-cta {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.6rem;
    min-height: 2.85rem;
    padding: 0 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 100vmax;
    font-size: 0.875rem;
    font-weight: 650;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
  }

  .header-cta:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .status-dot {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0.8rem rgba(169, 112, 255, 0.8);
    animation: status-pulse 2.2s ease-in-out infinite;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    align-content: center;
    padding: calc(var(--header-h) + var(--safe-top) + 2rem) var(--page-x) max(2rem, var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    background: var(--primary);
    color: var(--ink);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.75s var(--ease-smooth), visibility 0s 0.8s;
  }

  .mobile-menu.is-open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.75s var(--ease-smooth), visibility 0s;
  }

  .mobile-menu nav {
    display: grid;
  }

  .mobile-menu nav a {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: clamp(2.7rem, 10vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.07em;
    line-height: 1;
  }

  .mobile-menu nav span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.65rem;
    letter-spacing: 0;
  }

  .mobile-menu :focus-visible,
  body.menu-open .menu-toggle:focus-visible {
    outline-color: var(--ink);
  }

  .mobile-menu__meta {
    position: absolute;
    right: var(--page-x);
    bottom: 2rem;
    left: var(--page-x);
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(7, 8, 12, 0.22);
    padding-top: 1rem;
    font-size: 0.72rem;
  }

  .eyebrow {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  .eyebrow__line {
    width: 2.8rem;
    height: 1px;
    background: var(--primary);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 3.6rem;
    padding: 0 1.55rem;
    border-radius: 100vmax;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .button--solid {
    background: var(--primary);
    color: var(--ink);
  }

  .button--contact {
    gap: 1rem;
    padding: 0.3rem 0.35rem 0.3rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  }

  .button--contact .button__icon {
    display: grid;
    width: 2.75rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.35s var(--ease-out), background 0.25s ease;
  }

  .button--contact:hover {
    border-color: var(--primary);
    background: rgba(169, 112, 255, 0.14);
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 2rem rgba(169, 112, 255, 0.16);
  }

  .button--contact:hover .button__icon {
    transform: translateY(0.18rem);
    background: var(--white);
  }

  .button svg {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform 0.35s var(--ease-out);
  }

  .button:hover svg {
    transform: translateX(0.3rem);
  }

  .text-link {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.73rem;
    font-weight: 650;
    white-space: nowrap;
  }

  .text-link span {
    color: var(--primary);
  }

  /*
   * Pointer-reactive surfaces
   *
   * The extra layer is injected by app.js. Keeping it separate avoids
   * stealing ::before/::after from components that already use them.
   */
  .fx-surface,
  .fx-control {
    --fx-accent: var(--primary);
    --fx-hot: rgba(255, 255, 255, 0.98);
    --fx-border-width: 1px;
    --fx-orbit-speed: 10.6s;
    --fx-snake-length: clamp(4.5rem, 7vw, 7rem);
    --fx-snake-thickness: 0.42rem;
    position: relative;
    isolation: isolate;
  }

  .fx-control {
    --fx-border-width: 2px;
    --fx-orbit-speed: 5.8s;
    --fx-snake-length: 2.8rem;
    --fx-snake-thickness: 0.36rem;
  }

  .fx-layer {
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    box-shadow:
      inset 0 0 0 var(--fx-border-width)
      color-mix(in srgb, var(--fx-accent) 18%, transparent);
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .fx-layer::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
  }

  .fx-layer__orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fx-snake-length);
    height: var(--fx-snake-thickness);
    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--fx-accent) 18%, transparent) 24%,
        var(--fx-accent) 72%,
        var(--fx-hot)
      );
    box-shadow:
      0 0 0.38rem color-mix(in srgb, var(--fx-accent) 78%, transparent),
      0 0 0.9rem color-mix(in srgb, var(--fx-accent) 42%, transparent);
    offset-anchor: 100% 50%;
    offset-distance: 0%;
    offset-path: border-box;
    offset-rotate: auto;
    pointer-events: none;
  }

  .fx-surface > .fx-layer::after {
    background:
      radial-gradient(
        circle 13rem at var(--fx-local-x, 50%) var(--fx-local-y, 50%),
        color-mix(in srgb, var(--fx-accent) 13%, transparent),
        color-mix(in srgb, var(--fx-accent) 4%, transparent) 36%,
        transparent 72%
      );
  }

  .fx-control > .fx-layer::after {
    display: none;
  }

  .fx-surface:is(:hover, :focus-within) > .fx-layer,
  .fx-control:is(:hover, :focus-visible, :focus-within) > .fx-layer {
    opacity: 1;
  }

  .fx-surface:is(:hover, :focus-within) > .fx-layer > .fx-layer__orbit,
  .fx-control:is(:hover, :focus-visible, :focus-within) > .fx-layer > .fx-layer__orbit {
    animation: fx-border-orbit var(--fx-orbit-speed) linear infinite;
    will-change: offset-distance;
  }

  .audience-card.fx-surface {
    --fx-accent: var(--audience-accent);
  }

  .project-card.fx-surface,
  .review-card.fx-surface {
    --fx-accent: var(--violet-deep);
  }

  .project-card--secondary.fx-surface {
    --fx-accent: var(--white);
  }

  .project-card--ink.fx-surface,
  .career-lesson-card.fx-surface,
  .contact-form.fx-surface,
  .contact-hub.fx-surface {
    --fx-accent: var(--primary);
  }

  .career-card.fx-surface {
    --fx-accent: var(--event-color);
  }

  .button.fx-control,
  .contact-form__submit.fx-control {
    --fx-accent: var(--white);
    --fx-hot: var(--ink);
  }

  .header-cta.fx-control,
  .career-lessons__toggle.fx-control {
    --fx-accent: var(--primary);
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(7, 8, 12, 0.98) 0%, rgba(7, 8, 12, 0.84) 42%, rgba(7, 8, 12, 0.04) 78%),
      linear-gradient(180deg, rgba(7, 8, 12, 0.25), rgba(7, 8, 12, 0.92));
  }

  .hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(90deg, black, transparent 73%);
  }

  .hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(21rem, 0.7fr);
    min-height: calc(100svh - 8rem);
    padding-top: calc(var(--header-h) + var(--safe-top) + clamp(2.2rem, 7vh, 6.5rem));
    padding-bottom: 8.5rem;
  }

  .hero__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 75rem;
  }

  .hero__eyebrow {
    margin-bottom: clamp(1.8rem, 4vh, 3.5rem);
    color: rgba(255, 255, 255, 0.66);
  }

  .hero__title {
    font-size: clamp(4rem, 8.35vw, 10.5rem);
    font-weight: 520;
    letter-spacing: -0.082em;
    line-height: 0.78;
  }

  .hero__title--projects .title-line--accent > span {
    font-size: 0.78em;
  }

  .title-line {
    display: block;
    padding-right: 0.1em;
    padding-bottom: 0.12em;
    overflow: hidden;
  }

  .title-line > span {
    display: block;
    transform: translateY(115%) rotate(2deg);
  }

  body.is-ready .title-line > span {
    transform: translateY(0) rotate(0);
    transition: transform 1.1s var(--ease-out);
  }

  body.is-ready .title-line:nth-child(1) > span { transition-delay: 0.08s; }
  body.is-ready .title-line:nth-child(2) > span { transition-delay: 0.16s; }
  body.is-ready .title-line:nth-child(3) > span { transition-delay: 0.24s; }

  .title-line--accent {
    padding-left: clamp(2.5rem, 8vw, 10rem);
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.075em;
  }

  .hero__bottom {
    display: grid;
    grid-template-columns: minmax(17rem, 29rem) auto;
    gap: clamp(1.5rem, 4vw, 5rem);
    align-items: end;
    margin-top: clamp(2rem, 5vh, 4rem);
    padding-left: clamp(0rem, 8vw, 10rem);
  }

  .hero__lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.92rem, 1.2vw, 1.15rem);
    line-height: 1.65;
  }

  .hero__actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }

  [data-hero-reveal] {
    opacity: 0;
    transform: translateY(1.2rem);
  }

  body.is-ready [data-hero-reveal] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease 0.45s, transform 0.9s var(--ease-out) 0.45s;
  }

  .hero__scene-meta {
    position: absolute;
    top: 18%;
    right: 1rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .scene-index {
    display: flex;
    gap: 0.4rem;
    align-items: center;
  }

  .scene-index span:first-child {
    color: var(--primary);
  }

  .scene-index i {
    width: 2.4rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
  }

  .hero__side-note {
    position: absolute;
    right: 0;
    bottom: 10rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.57rem;
    letter-spacing: 0.1em;
    line-height: 1.7;
    text-transform: uppercase;
  }

  .hero__side-note .status-dot {
    margin-top: 0.3rem;
  }

  .hero__scroll {
    position: absolute;
    bottom: 2.1rem;
    left: 0;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-90deg) translateY(-100%);
    transform-origin: left bottom;
  }

  body.is-ready .hero__scroll {
    transform: rotate(-90deg) translateY(-100%);
  }

  .hero__scroll i {
    position: relative;
    width: 4rem;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
  }

  .hero__scroll b {
    position: absolute;
    width: 45%;
    height: 100%;
    background: var(--primary);
    animation: scroll-line 1.8s ease-in-out infinite;
  }

  .hero__metrics {
    position: absolute;
    right: var(--page-x);
    bottom: 0;
    left: var(--page-x);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 7.4rem;
    border-top: 1px solid var(--line-dark);
  }

  .hero__metrics > div {
    display: flex;
    gap: 1rem;
    align-items: center;
    border-right: 1px solid var(--line-dark);
    padding: 0 clamp(1rem, 2vw, 2.25rem);
  }

  .hero__metrics > div:first-child { padding-left: 0; }
  .hero__metrics > div:last-child { border-right: 0; }

  .metric__value {
    color: var(--primary);
    font-size: clamp(1.8rem, 2.6vw, 3.25rem);
    font-weight: 530;
    letter-spacing: -0.06em;
  }

  .metric__label {
    color: rgba(255, 255, 255, 0.48);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.57rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Statement & capabilities */
  .statement {
    padding: clamp(8rem, 16vw, 15rem) 0 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 85% 10%, rgba(217, 92, 255, 0.12), transparent 28%),
      var(--ink);
  }

  .statement__orbital-label {
    position: absolute;
    top: 6rem;
    right: -4rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    transform: rotate(90deg);
  }

  .statement__orbital-label i {
    width: 2.5rem;
    height: 1px;
    background: currentColor;
  }

  .statement__inner {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 2rem;
  }

  .statement__heading .display-heading {
    max-width: 85rem;
  }

  .statement__body {
    max-width: 37rem;
    margin-top: clamp(2.5rem, 6vw, 6rem);
    margin-left: min(13vw, 13rem);
    color: rgba(255, 255, 255, 0.62);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    line-height: 1.65;
  }

  .capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(6rem, 11vw, 11rem);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .capability {
    position: relative;
    min-height: 31rem;
    padding: 1.3rem clamp(1.2rem, 2vw, 2rem) 2rem;
    border-right: 1px solid var(--line-dark);
    overflow: hidden;
    transition: background 0.45s ease, color 0.45s ease;
  }

  .capability:last-child { border-right: 0; }

  .capability::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--primary);
    transform: translateY(101%);
    transition: transform 0.6s var(--ease-smooth);
  }

  .capability:hover {
    color: var(--ink);
  }

  .capability:hover::before {
    transform: translateY(0);
  }

  .capability > * {
    position: relative;
    z-index: 1;
  }

  .capability__number {
    color: rgba(255, 255, 255, 0.62);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }

  .capability:hover .capability__number { color: rgba(7, 8, 12, 0.72); }

  .capability__icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin-top: 3.5rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: var(--primary);
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.5s var(--ease-out);
  }

  .capability:hover .capability__icon {
    border-color: rgba(7, 8, 12, 0.22);
    color: var(--ink);
    transform: rotate(-8deg) scale(1.07);
  }

  .capability__icon svg {
    width: 2.6rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.15;
  }

  .capability h3 {
    margin-top: 3.1rem;
    font-size: clamp(1.5rem, 2.1vw, 2.25rem);
    font-weight: 540;
    letter-spacing: -0.045em;
    line-height: 1.04;
  }

  .capability p {
    position: relative;
    max-width: 26rem;
    margin-top: 1.15rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    line-height: 1.68;
  }

  .capability:hover p { color: rgba(7, 8, 12, 0.82); }

  .ticker {
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 5rem) 0;
  }

  .ticker__track {
    display: flex;
    width: max-content;
    gap: 2rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.11);
    font-size: clamp(3.5rem, 8vw, 8.5rem);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 0.85;
    white-space: nowrap;
    animation: ticker-move 28s linear infinite;
  }

  .ticker__track i {
    width: 0.18em;
    height: 0.18em;
    border-radius: 50%;
    background: var(--primary);
  }

  /* Collaboration fit */
  .audience-fit {
    position: relative;
    padding: clamp(7rem, 11vw, 11rem) 0 clamp(7rem, 10vw, 10rem);
    overflow: hidden;
    background:
      radial-gradient(circle at 20% 44%, rgba(155, 92, 255, 0.13), transparent 30rem),
      radial-gradient(circle at 82% 68%, rgba(255, 106, 154, 0.07), transparent 28rem),
      var(--ink);
  }

  .audience-fit::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
    pointer-events: none;
  }

  .audience-fit__inner {
    position: relative;
    z-index: 1;
  }

  .audience-fit__head {
    display: grid;
    grid-template-columns: 0.75fr minmax(0, 4.4fr) minmax(16rem, 1.35fr);
    gap: clamp(1.5rem, 3vw, 4rem);
    align-items: end;
  }

  .audience-fit__head .display-heading {
    font-size: clamp(3.1rem, 5.7vw, 7rem);
  }

  .audience-fit__head > p:last-child {
    max-width: 25rem;
    padding-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.9rem, 1vw, 1.05rem);
    line-height: 1.72;
  }

  .audience-fit__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.5vw, 1.5rem);
    margin-top: clamp(4rem, 7vw, 7rem);
  }

  .audience-card {
    --audience-accent: #78e8b7;
    position: relative;
    min-height: 32rem;
    padding: clamp(1.4rem, 2.4vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(16px);
    overflow: hidden;
  }

  .audience-card--no {
    --audience-accent: #ff86a8;
  }

  .audience-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--audience-accent), transparent 72%);
  }

  .audience-card::after {
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    content: "";
    background: color-mix(in srgb, var(--audience-accent) 12%, transparent);
    filter: blur(3rem);
    pointer-events: none;
  }

  .audience-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 8rem;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .audience-card__status {
    color: var(--audience-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.11em;
  }

  .audience-card h3 {
    max-width: 29rem;
    margin-top: 1rem;
    font-size: clamp(1.8rem, 2.5vw, 3.15rem);
    font-weight: 520;
    letter-spacing: -0.055em;
    line-height: 1.02;
  }

  .audience-card__mark {
    display: grid;
    width: clamp(3.5rem, 5vw, 5.5rem);
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--audience-accent) 48%, transparent);
    border-radius: 50%;
    color: var(--audience-accent);
    font-size: clamp(1.6rem, 2.4vw, 2.7rem);
    box-shadow: inset 0 0 2rem color-mix(in srgb, var(--audience-accent) 8%, transparent);
  }

  .audience-card ul {
    position: relative;
    z-index: 1;
    margin-top: clamp(2rem, 3vw, 3.5rem);
    list-style: none;
  }

  .audience-card li {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.73);
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    line-height: 1.6;
  }

  .audience-card li > span {
    color: var(--audience-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
  }

  /* Scroll journey */
  .system-journey {
    height: 360vh;
    background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 8, 12, 0.46) 22%, rgba(7, 8, 12, 0.38) 75%, var(--ink) 100%);
  }

  .system-journey__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  .system-journey__sticky::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(90deg, rgba(7, 8, 12, 0.92), transparent 44%, transparent 66%, rgba(7, 8, 12, 0.7)),
      linear-gradient(180deg, var(--ink), transparent 24%, transparent 78%, var(--ink));
    pointer-events: none;
  }

  .system-journey__grid {
    position: relative;
    height: 100%;
    transform: translate3d(var(--journey-camera-x, 0), 0, var(--journey-camera-z, 0)) rotateY(var(--journey-camera-yaw, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
  }

  .system-journey__kicker {
    position: absolute;
    top: calc(var(--header-h) + var(--safe-top) + 2rem);
    left: 0;
  }

  .system-journey__title {
    position: absolute;
    top: 24%;
    left: 0;
  }

  .system-journey__title > span {
    color: rgba(255, 255, 255, 0.64);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.13em;
  }

  .journey-titles {
    position: relative;
    min-height: 1.8em;
    margin-top: 1rem;
  }

  .system-journey__title h2 {
    margin: 0;
    font-size: clamp(3rem, 5.8vw, 7rem);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.9;
  }

  .journey-title {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.55s ease, transform 0.7s var(--ease-out);
    pointer-events: none;
  }

  .journey-title.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .system-journey__summary {
    position: absolute;
    right: 0;
    bottom: 12%;
    width: min(34rem, 38vw);
  }

  .journey-summary {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-dark);
  }

  .journey-summary__index,
  .journey-summary__label {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.57rem;
    letter-spacing: 0.13em;
  }

  .journey-summary p:last-child {
    max-width: 29rem;
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .system-journey__meter {
    position: absolute;
    bottom: 10%;
    left: 0;
    display: grid;
    grid-template-columns: auto 1px auto;
    gap: 0.75rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.53rem;
  }

  .system-journey__meter > div {
    position: relative;
    width: 1px;
    height: 5rem;
    background: rgba(255, 255, 255, 0.18);
  }

  .system-journey__meter i {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(var(--journey-progress, 0) * 100%);
    background: var(--primary);
  }

  .journey-meter__value { color: var(--primary); }

  .system-journey__core-label {
    position: absolute;
    top: 23%;
    left: 54%;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.38);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.47rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  .system-journey__core-label i {
    width: 4rem;
    height: 1px;
    margin-top: 0.3rem;
    background: rgba(169, 112, 255, 0.52);
  }

  /* Projects */
  .projects {
    padding: clamp(7rem, 12vw, 13rem) 0;
    overflow: hidden;
  }

  .projects__head {
    display: grid;
    grid-template-columns: 1fr 4.7fr 1.35fr;
    gap: clamp(1.5rem, 3vw, 4rem);
    align-items: end;
  }

  .projects__head .display-heading {
    font-size: clamp(3.25rem, 6.5vw, 8rem);
  }

  .projects__head > p:last-child {
    max-width: 23rem;
    padding-bottom: 0.6rem;
    color: rgba(7, 8, 12, 0.62);
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .projects__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(5rem, 9vw, 9rem);
    perspective: 110rem;
  }

  .project-card {
    position: relative;
    min-height: 45rem;
    overflow: hidden;
    background: #e2dce8;
    color: var(--ink);
    transform: perspective(110rem) translate3d(0, var(--card-scroll-y, 0), var(--card-scroll-z, 0)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.65s var(--ease-out), box-shadow 0.65s ease;
  }

  .project-card:hover {
    box-shadow: 0 2.5rem 5rem rgba(7, 8, 12, 0.16);
  }

  .project-card.is-pointer-active {
    transition: box-shadow 0.35s ease;
  }

  .project-card--featured {
    grid-column: 1 / -1;
    min-height: min(53rem, 78vw);
    max-height: 53rem;
    background: #d8d0e2;
  }

  .project-card--secondary {
    background: linear-gradient(145deg, #c88bff, #ae68f3 55%, #d77af6);
  }

  .project-card--secondary .project-card__meta,
  .project-card--secondary .project-card__main > p:last-child,
  .project-card--secondary .project-card__tags li {
    opacity: 0.86;
  }

  .project-card--ink {
    background: #120b1d;
    color: var(--paper);
  }

  .project-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
    padding: clamp(1.3rem, 2.6vw, 3rem);
    pointer-events: none;
    transform: translateZ(2.25rem);
  }

  .project-card__meta {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid currentColor;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    opacity: 0.65;
  }

  .project-card__main {
    max-width: 38rem;
    margin-top: auto;
    margin-bottom: clamp(5rem, 10vw, 9rem);
  }

  .project-card--half .project-card__main {
    margin-bottom: 6rem;
  }

  .project-card__eyebrow {
    margin-bottom: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.13em;
  }

  .project-card h3 {
    font-size: clamp(3rem, 5vw, 6.5rem);
    font-weight: 520;
    letter-spacing: -0.075em;
    line-height: 0.9;
  }

  .project-card--half h3 {
    font-size: clamp(2.3rem, 3.7vw, 4.5rem);
  }

  .project-card__main > p:last-child {
    max-width: 32rem;
    margin-top: 1.5rem;
    font-size: 0.83rem;
    line-height: 1.65;
    opacity: 0.67;
  }

  .project-card__tags {
    position: absolute;
    right: clamp(1.3rem, 2.6vw, 3rem);
    bottom: clamp(1.3rem, 2.6vw, 3rem);
    left: clamp(1.3rem, 2.6vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-card__tags li {
    padding: 0.5rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 100vmax;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.48rem;
    letter-spacing: 0.09em;
    opacity: 0.66;
  }

  .project-visual {
    position: absolute;
    pointer-events: none;
    transform-style: preserve-3d;
  }

  .project-visual--commerce {
    top: 12%;
    right: 4%;
    width: min(50%, 48rem);
    height: 72%;
    transform: rotateX(58deg) rotateZ(-31deg) translateZ(1rem);
  }

  .visual-grid {
    position: absolute;
    inset: -18%;
    background-image:
      linear-gradient(rgba(7, 8, 12, 0.13) 1px, transparent 1px),
      linear-gradient(90deg, rgba(7, 8, 12, 0.13) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    mask-image: radial-gradient(circle, black 20%, transparent 72%);
  }

  .commerce-plane {
    position: absolute;
    display: grid;
    border: 1px solid rgba(7, 8, 12, 0.55);
    background: rgba(242, 240, 233, 0.16);
    box-shadow: 1rem 1rem 2rem rgba(7, 8, 12, 0.08);
    backdrop-filter: blur(2px);
  }

  .commerce-plane--back {
    top: 2%;
    right: 10%;
    width: 58%;
    height: 45%;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    transform: translateZ(-3rem);
  }

  .commerce-plane--back span {
    border: 1px solid rgba(7, 8, 12, 0.28);
    background: linear-gradient(145deg, rgba(217, 92, 255, 0.5), rgba(169, 112, 255, 0.45));
  }

  .commerce-plane--mid {
    top: 28%;
    left: 0;
    width: 64%;
    height: 50%;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    padding: 0.8rem;
    transform: translateZ(2rem);
  }

  .commerce-plane--mid i {
    background: rgba(7, 8, 12, 0.08);
    border: 1px solid rgba(7, 8, 12, 0.18);
  }

  .commerce-plane--front {
    right: 0;
    bottom: 0;
    width: 45%;
    height: 36%;
    align-content: end;
    padding: 1.2rem;
    background: var(--primary);
    transform: translateZ(6rem);
  }

  .commerce-plane--front b {
    font-size: 3.5rem;
    letter-spacing: -0.08em;
    line-height: 1;
  }

  .commerce-plane--front span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.45rem;
    letter-spacing: 0.12em;
  }

  .commerce-plane--front i {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 0.4rem rgba(7, 8, 12, 0.12);
  }

  .data-pulse {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 1.5rem var(--secondary);
    animation: data-pulse 3s ease-in-out infinite;
  }

  .data-pulse--one { top: 25%; left: 45%; }
  .data-pulse--two { right: 28%; bottom: 23%; animation-delay: -1.4s; }

  .project-visual--network {
    top: 3%;
    right: -5%;
    width: 23rem;
    max-width: 55%;
    aspect-ratio: 1;
    transform: translateZ(1rem) rotateX(62deg) rotateZ(-18deg);
  }

  .network-ring,
  .network-core,
  .network-node {
    position: absolute;
    border-radius: 50%;
  }

  .network-ring {
    border: 1px solid rgba(7, 8, 12, 0.43);
  }

  .network-ring--one { inset: 8%; animation: spin 11s linear infinite; }
  .network-ring--two { inset: 23%; border-style: dashed; animation: spin 7s linear infinite reverse; }

  .network-core {
    inset: 36%;
    display: grid;
    place-items: center;
    background: var(--primary);
    font-size: 2.2rem;
    font-weight: 700;
    box-shadow: 0 1rem 2rem rgba(7, 8, 12, 0.22);
  }

  .network-node {
    width: 1.4rem;
    aspect-ratio: 1;
    border: 0.3rem solid var(--secondary);
    background: var(--ink);
    box-shadow: 0 0 0 1px rgba(7, 8, 12, 0.5);
  }

  .network-node--one { top: 8%; left: 48%; }
  .network-node--two { right: 8%; bottom: 29%; }
  .network-node--three { bottom: 12%; left: 17%; }

  .project-visual--terminal {
    top: 7%;
    right: -7%;
    width: min(63%, 30rem);
    transform: translateZ(1rem) rotateY(-18deg) rotateZ(7deg);
  }

  .project-visual--leetgg {
    top: 8%;
    right: -16%;
    width: min(84%, 42rem);
    opacity: 0.82;
    transform: translateZ(1rem) rotateY(-13deg) rotateZ(3deg);
  }

  .leetgg-project-preview {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.8rem;
    background: #080b10;
    box-shadow: -2rem 2.5rem 6rem rgba(0, 0, 0, 0.5);
    mask-image: linear-gradient(90deg, transparent 0%, black 18%, black 100%);
  }

  .leetgg-project-preview img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.92) brightness(0.86);
  }

  .terminal-window {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(23, 27, 36, 0.86);
    box-shadow: -2rem 2rem 5rem rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
  }

  .terminal-window__head {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    height: 2.3rem;
    padding: 0 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .terminal-window__head i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.7;
  }

  .terminal-window__head i:nth-child(2) { background: var(--secondary); }
  .terminal-window__head i:nth-child(3) { background: var(--paper); }

  .terminal-window__head span {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.45rem;
  }

  .terminal-window__body { padding: 1rem; }

  .terminal-window__body p {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: 0.5rem;
    padding: 0.68rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.52rem;
  }

  .terminal-window__body b { color: rgba(255, 255, 255, 0.25); }
  .terminal-window__body em { color: var(--primary); font-style: normal; }

  /* Spatial system journey */
  .spatial-journey {
    --space-progress: 0;
    --space-x: 0px;
    --space-depth: -180px;
    --space-yaw: 0deg;
    --space-pitch: 0deg;
    --space-roll: 0deg;
    position: relative;
    height: 480vh;
    min-height: 180rem;
    overflow: visible;
    background: #07040d;
  }

  .spatial-journey__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 42%, rgba(169, 112, 255, 0.08), transparent 34%),
      linear-gradient(180deg, #090511, #050309);
  }

  .spatial-journey__sticky::after {
    position: absolute;
    inset: 0;
    z-index: 8;
    content: "";
    background:
      linear-gradient(90deg, rgba(5, 3, 9, 0.45), transparent 9%, transparent 91%, rgba(5, 3, 9, 0.45)),
      linear-gradient(180deg, rgba(5, 3, 9, 0.82), transparent 19%, transparent 80%, rgba(5, 3, 9, 0.78));
    pointer-events: none;
  }

  .spatial-journey__atmosphere,
  .spatial-viewport,
  .spatial-camera {
    position: absolute;
    inset: 0;
  }

  .spatial-journey__atmosphere {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(calc(var(--space-progress) * -3vw), 0, 0) scale(1.06);
  }

  .spatial-stars {
    position: absolute;
    inset: -15%;
    opacity: 0.6;
    background-image:
      radial-gradient(circle, rgba(213, 180, 255, 0.9) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(217, 92, 255, 0.7) 0 1px, transparent 1.4px),
      radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.7px, transparent 1px);
    background-position: 0 0, 5rem 7rem, 9rem 3rem;
    background-size: 13rem 13rem, 17rem 17rem, 8rem 8rem;
  }

  .spatial-stars--far {
    opacity: 0.24;
    transform: translate3d(calc(var(--space-progress) * -5vw), 0, -20rem) scale(1.25);
  }

  .spatial-stars--near {
    opacity: 0.34;
    transform: translate3d(calc(var(--space-progress) * -13vw), 0, 6rem);
  }

  .spatial-floor {
    position: absolute;
    right: -20%;
    bottom: -62%;
    left: -20%;
    height: 96%;
    opacity: 0.34;
    background-image:
      linear-gradient(rgba(169, 112, 255, 0.25) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 112, 255, 0.25) 1px, transparent 1px);
    background-position: center;
    background-size: 5rem 5rem;
    mask-image: linear-gradient(180deg, transparent, black 18%, black 55%, transparent 92%);
    transform: perspective(42rem) rotateX(66deg) translate3d(calc(var(--space-progress) * -7vw), -8%, 0);
    transform-origin: top;
  }

  .spatial-viewport {
    z-index: 2;
    perspective: clamp(55rem, 90vw, 105rem);
    perspective-origin: 50% 48%;
  }

  .spatial-camera {
    transform: translate3d(0, 0, var(--space-depth)) rotateX(var(--space-pitch)) rotateY(var(--space-yaw)) rotateZ(var(--space-roll));
    transform-style: preserve-3d;
  }

  .spatial-world {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 300vw;
    height: 100%;
    transform: translate3d(var(--space-x), 0, 0);
    transform-style: preserve-3d;
  }

  .spatial-journey.is-scroll-active .spatial-camera,
  .spatial-journey.is-scroll-active .spatial-world {
    will-change: transform;
  }

  .space-room {
    position: relative;
    flex: 0 0 100vw;
    height: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
  }

  .space-room::before,
  .space-room::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
  }

  .space-room::after {
    opacity: 0.2;
    background-image:
      linear-gradient(rgba(213, 180, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(213, 180, 255, 0.09) 1px, transparent 1px);
    background-size: clamp(4rem, 7vw, 8rem) clamp(4rem, 7vw, 8rem);
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    transform: translateZ(-8rem) scale(1.12);
  }

  .space-room--architecture::before {
    background:
      radial-gradient(circle at 74% 48%, rgba(169, 112, 255, 0.18), transparent 24%),
      radial-gradient(circle at 73% 48%, rgba(217, 92, 255, 0.08), transparent 42%),
      linear-gradient(105deg, rgba(13, 8, 22, 0.98) 0%, rgba(8, 5, 15, 0.85) 56%, rgba(22, 10, 33, 0.92));
  }

  .space-room--flow::before {
    background:
      radial-gradient(circle at 31% 50%, rgba(217, 92, 255, 0.17), transparent 18%),
      radial-gradient(circle at 32% 50%, rgba(169, 112, 255, 0.13), transparent 36%),
      linear-gradient(90deg, #090511, rgba(17, 8, 27, 0.96) 48%, #07040d);
  }

  .space-room--scale::before {
    background:
      radial-gradient(circle at 72% 45%, rgba(169, 112, 255, 0.22), transparent 20%),
      linear-gradient(112deg, #07040d 0%, #10081a 55%, #08050f 100%);
  }

  .space-room__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    gap: clamp(3rem, 7vw, 9rem);
    align-items: center;
    width: min(100% - (var(--page-x) * 2), 112rem);
    height: 100%;
    margin-inline: auto;
    padding: calc(var(--header-h) + var(--safe-top) + 4rem) 0 7rem;
    transform-style: preserve-3d;
  }

  .space-room__copy {
    position: relative;
    z-index: 4;
    max-width: 57rem;
    opacity: var(--room-opacity, 0.24);
    transform: translate3d(var(--room-copy-x, 3rem), var(--room-copy-y, 0), 5rem) scale(var(--room-scale, 0.96));
    transform-origin: left center;
  }

  .space-room__copy--right {
    grid-column: 2;
    justify-self: end;
    transform-origin: right center;
  }

  .space-room__index {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.52);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.56rem;
    font-weight: 650;
    letter-spacing: 0.14em;
  }

  .space-room__index::before {
    width: 2.8rem;
    height: 1px;
    content: "";
    background: currentColor;
  }

  .space-room__index span { color: var(--primary); }

  .space-room h2,
  .space-room h3 {
    margin-top: clamp(1.6rem, 3vw, 3rem);
    font-size: clamp(3.6rem, 6.8vw, 8.4rem);
    font-weight: 510;
    letter-spacing: -0.078em;
    line-height: 0.88;
  }

  .space-room h2 em,
  .space-room h3 em {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .space-room__copy > p:not(.space-room__index) {
    max-width: 34rem;
    margin-top: clamp(1.8rem, 3vw, 3rem);
    color: rgba(255, 255, 255, 0.66);
    font-size: clamp(0.82rem, 1vw, 1rem);
    line-height: 1.75;
  }

  .space-room__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    margin-top: 2.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .space-room__signals li { display: flex; gap: 0.5rem; align-items: center; }

  .space-room__signals i {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0.8rem var(--secondary);
  }

  .space-room__frame {
    position: absolute;
    inset: clamp(5rem, 9vw, 9rem) clamp(1rem, 3vw, 4rem) clamp(4rem, 7vw, 7rem);
    z-index: 3;
    border: 1px solid rgba(213, 180, 255, 0.12);
    pointer-events: none;
    transform: translateZ(8rem);
    transform-style: preserve-3d;
  }

  .space-room__frame i {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-color: rgba(213, 180, 255, 0.52);
    border-style: solid;
  }

  .space-room__frame i:nth-child(1) { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
  .space-room__frame i:nth-child(2) { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
  .space-room__frame i:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
  .space-room__frame i:nth-child(4) { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }

  .space-gate {
    position: absolute;
    top: 10%;
    z-index: 12;
    width: clamp(3rem, 5vw, 5.5rem);
    height: 80%;
    border: 1px solid rgba(213, 180, 255, 0.5);
    background: linear-gradient(90deg, rgba(169, 112, 255, 0.06), rgba(217, 92, 255, 0.2), rgba(169, 112, 255, 0.06));
    box-shadow:
      0 0 1rem rgba(169, 112, 255, 0.35),
      0 0 5rem rgba(217, 92, 255, 0.22),
      inset 0 0 2rem rgba(169, 112, 255, 0.18);
    transform: translateX(-50%) translateZ(13rem) rotateY(-8deg);
    transform-style: preserve-3d;
  }

  .space-gate--one { left: 100vw; }
  .space-gate--two { left: 200vw; transform: translateX(-50%) translateZ(13rem) rotateY(8deg); }

  .space-gate i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(213, 180, 255, 0.2);
  }

  .space-gate i:nth-child(1) { inset: 0.6rem; }
  .space-gate i:nth-child(2) { inset: 1.2rem; }
  .space-gate i:nth-child(3) { inset: 1.8rem; }
  .space-gate i:nth-child(4) { inset: 2.4rem; }

  .space-gate span {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(255, 255, 255, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.45rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .architecture-model {
    position: relative;
    width: min(37vw, 39rem);
    aspect-ratio: 1;
    justify-self: end;
    perspective: 70rem;
    opacity: var(--room-visual-opacity, 0.4);
    transform: translate3d(var(--room-visual-x, 3rem), 0, 7rem) rotateX(-6deg) rotateY(-9deg);
    transform-style: preserve-3d;
  }

  .architecture-slab {
    position: absolute;
    top: 25%;
    left: 20%;
    display: grid;
    width: 62%;
    height: 44%;
    place-items: center;
    border: 1px solid rgba(213, 180, 255, 0.4);
    background:
      linear-gradient(135deg, rgba(169, 112, 255, 0.18), rgba(10, 6, 16, 0.82)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2rem);
    box-shadow: inset 0 0 2rem rgba(169, 112, 255, 0.08), 0 1.5rem 4rem rgba(0, 0, 0, 0.24);
    transform-style: preserve-3d;
  }

  .architecture-slab span {
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.48rem;
    letter-spacing: 0.18em;
    transform: translateZ(1rem);
  }

  .architecture-slab--one { transform: rotateX(61deg) rotateZ(-31deg) translateZ(-5rem); }
  .architecture-slab--two { transform: rotateX(61deg) rotateZ(-31deg) translateZ(0); }
  .architecture-slab--three { border-color: rgba(217, 92, 255, 0.62); transform: rotateX(61deg) rotateZ(-31deg) translateZ(5rem); }

  .architecture-model__axis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(169, 112, 255, 0.48), transparent);
    transform-origin: center;
  }

  .architecture-model__axis--x { transform: translate(-50%, -50%) rotate(-31deg); }
  .architecture-model__axis--y { transform: translate(-50%, -50%) rotate(59deg); }
  .architecture-model__axis--z { transform: translate(-50%, -50%) rotate(90deg); }

  .architecture-model__core {
    position: absolute;
    top: 45%;
    left: 47%;
    width: 4.5rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: radial-gradient(circle at 32% 28%, white, var(--primary) 18%, var(--violet-deep) 52%, #130923 78%);
    box-shadow: 0 0 4rem rgba(169, 112, 255, 0.62);
    transform: translate(-50%, -50%) translateZ(9rem) rotate(45deg);
    animation: spatial-core-pulse 4s ease-in-out infinite;
  }

  .architecture-model__core i {
    position: absolute;
    inset: 28%;
    border: 1px solid rgba(255, 255, 255, 0.7);
  }

  .architecture-callout,
  .scale-monolith__label {
    position: absolute;
    color: rgba(255, 255, 255, 0.48);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.46rem;
    letter-spacing: 0.14em;
  }

  .architecture-callout::before {
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 1px;
    content: "";
    background: rgba(213, 180, 255, 0.38);
  }

  .architecture-callout--one { top: 16%; left: 2%; }
  .architecture-callout--one::before { left: calc(100% + 0.6rem); }
  .architecture-callout--two { top: 47%; right: 0; }
  .architecture-callout--two::before { right: calc(100% + 0.6rem); }
  .architecture-callout--three { bottom: 15%; left: 8%; }
  .architecture-callout--three::before { left: calc(100% + 0.6rem); }

  .flow-nexus {
    position: relative;
    width: min(42vw, 43rem);
    aspect-ratio: 1;
    perspective: 68rem;
    opacity: var(--room-visual-opacity, 0.4);
    transform: translate3d(var(--room-visual-x, -3rem), 0, 8rem) rotateX(3deg) rotateY(8deg);
    transform-style: preserve-3d;
  }

  .flow-nexus::before,
  .flow-nexus::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
  }

  .flow-nexus::before {
    width: 36%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(217, 92, 255, 0.38), rgba(169, 112, 255, 0.12) 35%, transparent 68%);
    filter: blur(0.4rem);
  }

  .flow-nexus::after {
    width: 82%;
    aspect-ratio: 1;
    border: 1px dashed rgba(213, 180, 255, 0.16);
  }

  .flow-nexus__ring {
    position: absolute;
    border: 1px solid rgba(213, 180, 255, 0.34);
    border-radius: 50%;
    transform-style: preserve-3d;
  }

  .flow-nexus__ring--one { inset: 9%; transform: rotateX(68deg) rotateZ(18deg); animation: spatial-orbit-one 14s linear infinite; }
  .flow-nexus__ring--two { inset: 17%; border-color: rgba(217, 92, 255, 0.48); transform: rotateY(70deg) rotateZ(-20deg); animation: spatial-orbit-two 11s linear infinite reverse; }
  .flow-nexus__ring--three { inset: 27%; border-style: dashed; transform: rotateX(46deg) rotateY(48deg); animation: spin 20s linear infinite; }

  .flow-nexus__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 22%;
    aspect-ratio: 1;
    place-content: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff, var(--secondary) 14%, var(--primary) 43%, #130923 72%);
    box-shadow: 0 0 5rem rgba(217, 92, 255, 0.46), inset -1rem -1rem 2rem rgba(8, 6, 15, 0.62);
    color: white;
    text-align: center;
    transform: translate(-50%, -50%) translateZ(8rem);
  }

  .flow-nexus__core span { font-size: clamp(1.5rem, 3vw, 3.5rem); font-weight: 680; letter-spacing: -0.08em; line-height: 0.9; }
  .flow-nexus__core small { margin-top: 0.45rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.4rem; letter-spacing: 0.14em; }

  .flow-node {
    position: absolute;
    z-index: 4;
    width: 0.65rem;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 1.6rem var(--secondary);
  }

  .flow-node--one { top: 17%; left: 33%; animation: spatial-node 3.6s ease-in-out infinite; }
  .flow-node--two { top: 44%; right: 7%; animation: spatial-node 4.4s ease-in-out -1s infinite; }
  .flow-node--three { right: 29%; bottom: 12%; animation: spatial-node 3.9s ease-in-out -2s infinite; }
  .flow-node--four { bottom: 29%; left: 10%; animation: spatial-node 4.8s ease-in-out -0.6s infinite; }

  .scale-monolith {
    position: relative;
    width: min(36vw, 35rem);
    aspect-ratio: 0.9;
    justify-self: center;
    perspective: 70rem;
    opacity: var(--room-visual-opacity, 0.4);
    transform: translate3d(var(--room-visual-x, 3rem), 0, 8rem) rotateX(-2deg) rotateY(-8deg);
    transform-style: preserve-3d;
  }

  .scale-monolith__shell {
    position: absolute;
    inset: 7% 13% 9%;
    z-index: 2;
    border: 1px solid rgba(213, 180, 255, 0.68);
    border-radius: 1.1rem;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 26%),
      linear-gradient(155deg, rgba(169, 112, 255, 0.18), rgba(10, 5, 18, 0.74) 52%, rgba(217, 92, 255, 0.09));
    box-shadow:
      inset 0 0 5rem rgba(169, 112, 255, 0.12),
      0 0 0 0.35rem rgba(169, 112, 255, 0.035),
      0 2.8rem 7rem rgba(3, 1, 8, 0.72),
      0 0 7rem rgba(169, 112, 255, 0.2);
    transform: translateZ(5rem);
    transform-style: preserve-3d;
  }

  .scale-monolith__shell > span {
    position: absolute;
    z-index: 6;
    width: 18%;
    height: 14%;
    border-color: rgba(255, 255, 255, 0.72);
    border-style: solid;
    filter: drop-shadow(0 0 0.65rem rgba(213, 180, 255, 0.55));
  }

  .scale-monolith__shell > span:nth-child(1) { top: -2px; left: -2px; border-width: 2px 0 0 2px; border-radius: 1.1rem 0 0; }
  .scale-monolith__shell > span:nth-child(2) { top: -2px; right: -2px; border-width: 2px 2px 0 0; border-radius: 0 1.1rem 0 0; }
  .scale-monolith__shell > span:nth-child(3) { right: -2px; bottom: -2px; border-width: 0 2px 2px 0; border-radius: 0 0 1.1rem; }
  .scale-monolith__shell > span:nth-child(4) { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; border-radius: 0 0 0 1.1rem; }

  .scale-monolith__mesh {
    position: absolute;
    inset: 3%;
    border-radius: 0.85rem;
    background-image:
      linear-gradient(rgba(213, 180, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(213, 180, 255, 0.08) 1px, transparent 1px);
    background-size: 2rem 2rem;
    mask-image: radial-gradient(ellipse, black 18%, transparent 72%);
    opacity: 0.64;
    transform: translateZ(0.5rem);
  }

  .scale-monolith__core {
    position: absolute;
    inset: 10% 9%;
    z-index: 4;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.7rem;
    padding: 1.25rem 1.35rem 1.1rem;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 24%),
      radial-gradient(circle at 50% 38%, rgba(217, 92, 255, 0.25), transparent 38%),
      linear-gradient(180deg, rgba(18, 9, 29, 0.86), rgba(7, 4, 13, 0.96));
    box-shadow:
      inset 0 0 3rem rgba(169, 112, 255, 0.1),
      inset 0 1px rgba(255, 255, 255, 0.16),
      0 0 4.5rem rgba(217, 92, 255, 0.24);
    color: white;
    text-align: center;
    transform: translateZ(4rem);
  }

  .scale-monolith__core::before {
    position: absolute;
    right: 0;
    left: 0;
    content: "";
    pointer-events: none;
  }

  .scale-monolith__core::before {
    top: 0;
    height: 36%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent);
    clip-path: polygon(0 0, 100% 0, 59% 100%, 16% 72%);
  }

  .scale-monolith__status {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem;
    align-items: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.48);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.43rem;
    letter-spacing: 0.12em;
    text-align: left;
  }

  .scale-monolith__status i {
    width: 0.38rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d5ff8a;
    box-shadow: 0 0 1rem rgba(213, 255, 138, 0.9);
    animation: status-pulse 2.2s ease-in-out infinite;
  }

  .scale-monolith__status b {
    color: #d5ff8a;
    font-size: inherit;
    font-weight: 650;
  }

  .scale-monolith__infinity {
    position: absolute;
    top: 11%;
    right: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.9), var(--violet-soft) 30%, var(--secondary) 64%, rgba(169, 112, 255, 0.2));
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 1.4rem rgba(217, 92, 255, 0.5));
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(7rem, 10vw, 10rem);
    font-weight: 400;
    line-height: 1;
    opacity: 0.7;
    transform: scaleX(1.08);
  }

  .scale-monolith__core > strong {
    position: relative;
    z-index: 2;
    margin-top: auto;
    font-size: clamp(2.25rem, 4vw, 4.25rem);
    font-weight: 620;
    letter-spacing: 0.04em;
    line-height: 0.9;
    text-shadow: 0 0 2.2rem rgba(217, 92, 255, 0.45);
  }

  .scale-monolith__core > small {
    position: relative;
    z-index: 2;
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.62);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.39rem;
    letter-spacing: 0.17em;
  }

  .scale-monolith__metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 0.9rem;
  }

  .scale-monolith__metrics > span {
    display: grid;
    gap: 0.12rem;
    text-align: left;
  }

  .scale-monolith__metrics > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 1rem;
  }

  .scale-monolith__metrics b {
    color: var(--violet-soft);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 520;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .scale-monolith__metrics small {
    color: rgba(255, 255, 255, 0.42);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.36rem;
    letter-spacing: 0.14em;
  }

  .scale-monolith__orbit {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(217, 92, 255, 0.48);
    border-radius: 50%;
    filter: drop-shadow(0 0 0.7rem rgba(217, 92, 255, 0.2));
    animation: scale-orbit-glow 4.8s ease-in-out infinite;
  }

  .scale-monolith__orbit--wide {
    inset: 36% -8% 33%;
    transform: rotate(-8deg);
  }

  .scale-monolith__orbit--tall {
    inset: 3% 34%;
    border-color: rgba(213, 180, 255, 0.3);
    border-style: dashed;
    transform: rotate(8deg);
    animation-delay: -2.4s;
  }

  .scale-monolith__orbit i {
    position: absolute;
    width: 0.48rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 1.2rem var(--secondary), 0 0 0 0.3rem rgba(217, 92, 255, 0.12);
    animation: spatial-node 3.2s ease-in-out infinite;
  }

  .scale-monolith__orbit--wide i:nth-child(1) { top: 2%; left: 28%; }
  .scale-monolith__orbit--wide i:nth-child(2) { top: 52%; right: -0.2rem; animation-delay: -1.1s; }
  .scale-monolith__orbit--wide i:nth-child(3) { bottom: 5%; left: 16%; width: 0.32rem; animation-delay: -2.1s; }
  .scale-monolith__orbit--tall i:nth-child(1) { top: 10%; right: 15%; animation-delay: -0.7s; }
  .scale-monolith__orbit--tall i:nth-child(2) { bottom: 8%; left: 12%; width: 0.34rem; animation-delay: -1.8s; }

  .scale-monolith__orbit::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: white;
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.9);
  }

  .scale-monolith__shadow {
    position: absolute;
    right: 1%;
    bottom: -3%;
    left: 1%;
    height: 17%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(217, 92, 255, 0.5), rgba(169, 112, 255, 0.16) 48%, transparent 72%);
    filter: blur(2rem);
    opacity: 0.78;
    transform: rotateX(74deg) translateZ(-7rem);
  }

  .scale-monolith__label {
    z-index: 5;
    padding-left: 3.8rem;
  }

  .scale-monolith__label::before,
  .scale-monolith__label::after {
    position: absolute;
    top: 50%;
    content: "";
  }

  .scale-monolith__label::before {
    left: 0;
    width: 3.15rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(213, 180, 255, 0.12), rgba(213, 180, 255, 0.58));
  }

  .scale-monolith__label::after {
    left: 3.05rem;
    width: 0.24rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--violet-soft);
    box-shadow: 0 0 0.65rem var(--primary);
    transform: translateY(-50%);
  }

  .scale-monolith__label--top { top: 1%; right: -2%; }
  .scale-monolith__label--bottom { right: -3%; bottom: 1%; color: var(--primary); }

  .space-room:not(.is-active) .architecture-model__core,
  .space-room:not(.is-active) .flow-nexus__ring,
  .space-room:not(.is-active) .flow-node,
  .space-room:not(.is-active) .scale-monolith__orbit,
  .space-room:not(.is-active) .scale-monolith__status i {
    animation-play-state: paused;
  }

  .spatial-journey:not(.is-scroll-active) .architecture-model__core,
  .spatial-journey:not(.is-scroll-active) .flow-nexus__ring,
  .spatial-journey:not(.is-scroll-active) .flow-node,
  .spatial-journey:not(.is-scroll-active) .scale-monolith__orbit,
  .spatial-journey:not(.is-scroll-active) .scale-monolith__status i {
    animation-play-state: paused;
  }

  .spatial-hud,
  .spatial-progress {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .spatial-hud {
    top: calc(var(--header-h) + var(--safe-top) + 1.25rem);
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.44);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }

  .spatial-hud__mode,
  .spatial-hud__coordinates { display: flex; gap: 1rem; align-items: center; }

  .spatial-hud__mode i {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 1rem var(--secondary);
    animation: status-pulse 1.8s ease-in-out infinite;
  }

  .spatial-hud b { color: var(--violet-soft); font-weight: 500; }

  .spatial-progress {
    bottom: max(2rem, calc(var(--safe-bottom) + 1rem));
    display: grid;
    grid-template-columns: auto minmax(8rem, 20rem) auto 1fr;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
  }

  .spatial-progress__value { color: var(--primary); }

  .spatial-progress__track {
    position: relative;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
  }

  .spatial-progress__track > i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 0 1rem rgba(169, 112, 255, 0.48);
    transform: scaleX(var(--space-progress));
    transform-origin: left;
  }

  .spatial-progress__track b {
    position: absolute;
    top: 50%;
    width: 0.35rem;
    height: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: var(--ink);
    transform: translate(-50%, -50%);
  }

  .spatial-progress__track b:nth-of-type(1) { left: 0; }
  .spatial-progress__track b:nth-of-type(2) { left: 50%; }
  .spatial-progress__track b:nth-of-type(3) { left: 100%; }

  .spatial-progress p { justify-self: end; margin-right: 8.75rem; }
  .spatial-progress p i { margin-left: 0.5rem; color: var(--primary); font-style: normal; }

  /* Stack */
  .stack {
    padding: clamp(8rem, 14vw, 14rem) 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 26% 62%, rgba(217, 92, 255, 0.16), transparent 25%),
      var(--ink);
  }

  .stack__head {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 2rem;
  }

  .stack__head .display-heading {
    font-size: clamp(3.15rem, 6.6vw, 8rem);
  }

  .stack__stage {
    display: grid;
    grid-template-columns: minmax(19rem, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(3rem, 8vw, 10rem);
    align-items: center;
    margin-top: clamp(6rem, 10vw, 10rem);
  }

  .stack-orbit {
    position: relative;
    width: min(38vw, 36rem);
    aspect-ratio: 1;
    margin-inline: auto;
    perspective: 70rem;
    transform: translateZ(var(--orbit-scroll-z, 0)) rotateX(calc(var(--orbit-x, 0deg) + var(--orbit-scroll-x, 0deg))) rotateY(calc(var(--orbit-y, 0deg) + var(--orbit-scroll-y, 0deg)));
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-out);
  }

  .stack-orbit::before {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle at 35% 28%, var(--white), var(--secondary) 20%, var(--ink-soft) 55%, var(--ink) 72%);
    box-shadow: 0 0 5rem rgba(217, 92, 255, 0.35), inset -1.5rem -1.5rem 3rem rgba(0, 0, 0, 0.5);
    animation: core-breathe 5s ease-in-out infinite;
  }

  .stack-orbit__halo {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transform-style: preserve-3d;
  }

  .stack-orbit__halo--one {
    inset: 9%;
    border-color: rgba(169, 112, 255, 0.4);
    transform: rotateX(72deg) rotateZ(15deg);
    animation: orbit-one 12s linear infinite;
  }

  .stack-orbit__halo--two {
    inset: 4%;
    transform: rotateY(72deg) rotateZ(-18deg);
    animation: orbit-two 16s linear infinite reverse;
  }

  .stack-orbit__halo--three {
    inset: 15%;
    border-style: dashed;
    transform: rotateX(52deg) rotateY(28deg);
    animation: spin 18s linear infinite;
  }

  .stack-orbit__core {
    position: absolute;
    inset: 36%;
    z-index: 2;
    display: grid;
    place-content: center;
    color: var(--white);
    text-align: center;
  }

  .stack-orbit__core span {
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 650;
    letter-spacing: -0.08em;
    line-height: 0.8;
  }

  .stack-orbit__core small {
    margin-top: 0.5rem;
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.45rem;
    letter-spacing: 0.18em;
  }

  .stack-chip {
    position: absolute;
    z-index: 3;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 100vmax;
    background: rgba(7, 8, 12, 0.68);
    color: rgba(255, 255, 255, 0.78);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.54rem;
    backdrop-filter: blur(8px);
  }

  .stack-chip--one { top: 10%; left: 30%; }
  .stack-chip--two { top: 35%; right: 0; }
  .stack-chip--three { right: 17%; bottom: 10%; }
  .stack-chip--four { bottom: 3%; left: 21%; }
  .stack-chip--five { top: 48%; left: -1%; }
  .stack-chip--six { top: 15%; right: 8%; }

  .stack-groups { border-top: 1px solid var(--line-dark); }

  .stack-group {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: 1rem;
    align-items: center;
    min-height: 7.1rem;
    border-bottom: 1px solid var(--line-dark);
    transition: padding 0.4s var(--ease-out), background 0.3s ease;
  }

  .stack-group:hover {
    padding-inline: 1rem;
    background: rgba(255, 255, 255, 0.035);
  }

  .stack-group__index,
  .stack-group__state,
  .stack-group p {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5rem;
    letter-spacing: 0.11em;
  }

  .stack-group__index { color: var(--primary); }
  .stack-group p { margin-bottom: 0.45rem; color: rgba(255, 255, 255, 0.64); }
  .stack-group h3 { font-size: clamp(1rem, 1.5vw, 1.45rem); font-weight: 500; letter-spacing: -0.035em; }
  .stack-group__state { color: rgba(255, 255, 255, 0.58); }

  /* Story */
  .about {
    padding: clamp(7rem, 13vw, 14rem) 0;
    overflow: hidden;
  }

  .about__intro {
    display: grid;
    grid-template-columns: 1fr 3.2fr 1.3fr;
    gap: clamp(1.5rem, 4vw, 5rem);
    align-items: start;
  }

  .about__statement {
    position: relative;
    padding-top: 7rem;
  }

  .about__year {
    position: absolute;
    top: -1.5rem;
    left: -0.08em;
    color: rgba(7, 8, 12, 0.075);
    font-size: clamp(7rem, 15vw, 18rem);
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 1;
  }

  .about__statement h2 {
    position: relative;
    z-index: 1;
    max-width: 63rem;
    font-size: clamp(3.2rem, 6.1vw, 7.5rem);
    font-weight: 520;
    letter-spacing: -0.07em;
    line-height: 0.95;
  }

  .about__statement h2 em {
    color: var(--violet-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .about__copy {
    padding-top: 8rem;
    color: rgba(7, 8, 12, 0.65);
    font-size: 0.86rem;
    line-height: 1.7;
  }

  .about__copy p + p { margin-top: 1.4rem; }

  .career-log {
    --career-main: #6e32d9;
    --career-community: #c83de8;
    --career-client: #d35f35;
    position: relative;
    isolation: isolate;
    margin-top: clamp(5rem, 8vw, 8rem);
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.14);
    border-radius: 1.4rem;
    background:
      linear-gradient(rgba(110, 50, 217, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(110, 50, 217, 0.025) 1px, transparent 1px),
      rgba(252, 250, 255, 0.68);
    background-size: 2rem 2rem;
    box-shadow:
      0 2rem 5rem rgba(33, 18, 47, 0.12),
      0 0.3rem 1rem rgba(33, 18, 47, 0.06),
      inset 0 1px rgba(255, 255, 255, 0.9);
  }

  .career-log::before {
    position: absolute;
    top: 4rem;
    right: -12rem;
    z-index: -1;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169, 112, 255, 0.13), transparent 68%);
    content: "";
    pointer-events: none;
  }

  .career-log__toolbar {
    display: flex;
    min-height: 4.4rem;
    padding: 1rem clamp(1.25rem, 2.5vw, 2.25rem);
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background:
      radial-gradient(circle at 15% -120%, rgba(169, 112, 255, 0.55), transparent 35%),
      linear-gradient(110deg, #0d0912, #1b1027 58%, #110a19);
    color: rgba(252, 250, 255, 0.82);
    box-shadow: inset 0 -1px rgba(255, 255, 255, 0.09);
  }

  .career-log__repo,
  .career-log__toolbar-meta,
  .career-log__branch,
  .career-log__count,
  .career-log__range {
    display: flex;
    align-items: center;
  }

  .career-log__repo {
    min-width: 0;
    gap: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .career-log__repo > svg {
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.4rem;
    overflow: visible;
    fill: none;
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
    transition: transform 0.35s var(--ease-out);
  }

  .career-log__repo span {
    color: rgba(252, 250, 255, 0.54);
  }

  .career-log__repo strong {
    overflow: hidden;
    color: var(--white);
    font-weight: 650;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
  }

  .career-log__repo:hover strong {
    color: var(--primary);
  }

  .career-log__repo:hover > svg {
    transform: translateY(-0.08rem) rotate(-5deg);
  }

  .career-log__toolbar-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .career-log__count {
    gap: 0.45rem;
    color: rgba(252, 250, 255, 0.48);
  }

  .career-log__count i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #74dc9e;
    box-shadow: 0 0 0 0.22rem rgba(116, 220, 158, 0.12);
  }

  .career-log__branch,
  .career-log__range {
    min-height: 1.85rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 99rem;
    background: rgba(255, 255, 255, 0.055);
  }

  .career-log__branch {
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    color: var(--white);
  }

  .career-log__branch svg {
    width: 0.9rem;
    fill: none;
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.2;
  }

  .career-log__range {
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    color: rgba(252, 250, 255, 0.58);
  }

  .career-log__range i {
    color: var(--primary);
    font-style: normal;
  }

  .career-log__legend {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 3.7rem;
    padding: 1rem clamp(1.25rem, 2.5vw, 2.25rem);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(38, 25, 51, 0.11);
    background: rgba(255, 255, 255, 0.48);
    color: rgba(7, 8, 12, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.59rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .career-log__legend > span {
    display: flex;
    align-items: center;
    gap: 0.48rem;
  }

  .career-log__legend-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    box-shadow: 0 0 0 0.18rem rgba(7, 8, 12, 0.05);
  }

  .career-log__legend-dot--main { background: var(--career-main); }
  .career-log__legend-dot--community { background: var(--career-community); }
  .career-log__legend-dot--client { background: var(--career-client); }

  .career-tree {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 1.5rem clamp(1.25rem, 3vw, 3rem) 2.5rem;
    list-style: none;
  }

  .career-event {
    --event-color: var(--career-main);
    display: grid;
    grid-template-columns: minmax(8.5rem, 11.5rem) 5.4rem minmax(0, 1fr);
    min-width: 0;
    align-items: stretch;
  }

  .career-event--community { --event-color: var(--career-community); }
  .career-event--client { --event-color: var(--career-client); }

  .career-event__date {
    align-self: center;
    min-width: 0;
    padding: 1rem 1rem 1rem 0;
    text-align: right;
  }

  .career-event__date span,
  .career-event__date small {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
  }

  .career-event__date span {
    color: rgba(7, 8, 12, 0.84);
    font-size: clamp(0.78rem, 1vw, 0.94rem);
    font-weight: 720;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .career-event__date small {
    margin-top: 0.38rem;
    color: rgba(7, 8, 12, 0.4);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.35;
  }

  .career-event--featured .career-event__date span,
  .career-event--head .career-event__date span {
    color: var(--event-color);
  }

  .career-event__graph {
    position: relative;
    min-height: 100%;
    color: var(--event-color);
  }

  .career-event__graph::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 17.44%;
    width: 2px;
    background: linear-gradient(var(--career-main), rgba(110, 50, 217, 0.55));
    content: "";
    transform: translateX(-50%);
  }

  .career-event:first-child .career-event__graph::before {
    top: 50%;
  }

  .career-event:last-child .career-event__graph::before {
    bottom: 50%;
  }

  .career-event__graph svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .career-event__graph path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .career-event__dot {
    position: absolute;
    top: 50%;
    left: 17.44%;
    z-index: 2;
    width: 0.78rem;
    height: 0.78rem;
    border: 0.2rem solid rgba(252, 250, 255, 0.98);
    border-radius: 50%;
    background: var(--event-color);
    box-shadow:
      0 0 0 1px var(--event-color),
      0 0 0 0.38rem rgba(110, 50, 217, 0.08);
    transform: translate(-50%, -50%);
    transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  }

  .career-event--community .career-event__dot { left: 55.81%; }
  .career-event--client .career-event__dot { left: 83.72%; }

  .career-card {
    position: relative;
    min-width: 0;
    margin: 0.55rem 0;
    overflow: hidden;
    padding: clamp(1.25rem, 2.3vw, 2rem);
    border: 1px solid rgba(38, 25, 51, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
      0 0.75rem 2.2rem rgba(33, 18, 47, 0.06),
      inset 0 1px rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(0.8rem);
    transition:
      border-color 0.35s var(--ease-out),
      box-shadow 0.35s var(--ease-out),
      transform 0.35s var(--ease-out);
  }

  .career-card::before {
    position: absolute;
    top: 1.15rem;
    bottom: 1.15rem;
    left: 0;
    width: 2px;
    border-radius: 0 99rem 99rem 0;
    background: var(--event-color);
    content: "";
    opacity: 0.76;
  }

  .career-event:hover .career-card {
    border-color: color-mix(in srgb, var(--event-color) 34%, transparent);
    box-shadow:
      0 1.15rem 3rem rgba(33, 18, 47, 0.1),
      inset 0 1px rgba(255, 255, 255, 0.95);
    transform: translateX(0.24rem);
  }

  .career-event:hover .career-event__dot {
    box-shadow:
      0 0 0 1px var(--event-color),
      0 0 0 0.52rem color-mix(in srgb, var(--event-color) 12%, transparent);
    transform: translate(-50%, -50%) scale(1.12);
  }

  .career-card__meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    color: rgba(7, 8, 12, 0.46);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.55rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .career-card__meta > span:last-child {
    overflow: hidden;
    color: var(--event-color);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .career-card h3 {
    margin-top: 0.85rem;
    font-size: clamp(1.65rem, 2.5vw, 2.75rem);
    font-weight: 560;
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .career-card__company-logo {
    display: flex;
    width: min(100%, 13rem);
    height: 5.15rem;
    margin-top: 0.85rem;
    align-items: center;
    justify-content: center;
  }

  .career-card__company-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .career-card__company-logo.career-card__company-logo--undzwei {
    width: min(100%, 9.25rem);
    height: auto;
    aspect-ratio: 130 / 51;
    justify-content: flex-start;
  }

  .career-card__company-logo--undzwei img {
    object-position: left center;
    filter: drop-shadow(0 0.08rem 0.12rem rgba(7, 8, 12, 0.22));
  }

  .career-card__company-logo.career-card__company-logo--ssinfotech {
    width: min(100%, 17rem);
    height: auto;
    aspect-ratio: 587 / 191;
    justify-content: flex-start;
  }

  .career-card__company-logo--ssinfotech img {
    object-position: left center;
  }

  .career-card__company-logo--meboty {
    width: min(100%, 16rem);
    height: auto;
    aspect-ratio: 300 / 73;
    overflow: hidden;
    border-radius: 0;
    background: #f0008d;
  }

  .career-card__company-logo--meboty img {
    object-fit: cover;
  }

  .career-card__company-logo--amiatex {
    width: min(100%, 17rem);
    height: auto;
    aspect-ratio: 900 / 248;
    padding: 0.42rem 0.75rem;
    overflow: hidden;
    border-radius: 0.55rem;
    background: #fff;
  }

  .career-card__company-logo--amiatex img {
    object-fit: contain;
  }

  .career-card > p {
    max-width: none;
    margin-top: 0.8rem;
    color: rgba(7, 8, 12, 0.62);
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    line-height: 1.68;
  }

  .career-card__video {
    width: min(100%, 46rem);
    aspect-ratio: 16 / 9;
    margin: 1.25rem auto 0;
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.14);
    border-radius: 0.85rem;
    background: #08060f;
    box-shadow: 0 0.8rem 2rem rgba(33, 18, 47, 0.1);
  }

  .career-card__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .career-forfairplay-media {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.85fr);
    max-width: 70rem;
    margin: 1.25rem auto 0;
    align-items: stretch;
    gap: 0.8rem;
  }

  .career-forfairplay-media .career-card__video,
  .career-forfairplay-media .career-widget-partners {
    width: 100%;
    margin: 0;
  }

  .career-forfairplay-media .career-widget-partners--collaboration {
    display: flex;
    flex-direction: column;
  }

  .career-forfairplay-media .career-widget-partners__grid--three {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 4.25rem);
    flex: 1;
    align-content: space-evenly;
  }

  .career-project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 70rem;
    margin: 0.8rem auto 0;
    gap: 0.8rem;
  }

  .career-project-gallery__item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0.3rem;
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.18);
    border-radius: 0.85rem;
    background: #080b10;
    box-shadow: 0 0.8rem 2rem rgba(33, 18, 47, 0.1);
    cursor: zoom-in;
  }

  .career-project-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0.55rem;
    transition: filter 0.35s ease, transform 0.6s var(--ease-out);
  }

  .career-project-gallery__item:hover img {
    filter: brightness(0.72);
    transform: scale(1.012);
  }

  .career-project-gallery__item:hover .career-product-shot__zoom,
  .career-project-gallery__item:focus-visible .career-product-shot__zoom {
    opacity: 1;
    transform: translateY(0);
  }

  .career-project-gallery--leetgg .career-project-gallery__item {
    aspect-ratio: 2.25 / 1;
  }

  .career-project-gallery--leetgg .career-project-gallery__item img {
    object-fit: contain;
    object-position: center;
  }

  .career-card__tags,
  .career-card__brands {
    display: flex;
    margin-top: 1.2rem;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .career-card__tags li,
  .career-card__brands li {
    border: 1px solid rgba(38, 25, 51, 0.11);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 650;
    letter-spacing: 0.08em;
  }

  .career-card__tags li {
    padding: 0.42rem 0.58rem;
    border-radius: 99rem;
    background: rgba(110, 50, 217, 0.045);
    color: rgba(7, 8, 12, 0.6);
  }

  .career-card__brands {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .career-card__brands li {
    min-width: 0;
    padding: 0.72rem 0.65rem;
    overflow-wrap: anywhere;
    border-radius: 0.55rem;
    background: rgba(17, 11, 26, 0.94);
    color: rgba(252, 250, 255, 0.82);
    letter-spacing: 0;
    text-align: center;
    text-transform: lowercase;
  }

  .career-card__brands--logos {
    gap: 0.65rem;
  }

  .career-card__brands--logos .career-card__brand {
    display: flex;
    height: 4.25rem;
    min-height: 4.25rem;
    padding: 0.55rem 0.7rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

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

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

  .career-card__brands--employers .career-card__brand {
    min-height: 4.25rem;
  }

  .career-card__brands--employers .career-card__brand--veolia {
    background: #fff;
  }

  .career-card__brands--employers .career-card__brand--prazdroj {
    background: #fff;
  }

  .career-card__brands--employers .career-card__brand--radegast {
    background: #fff;
  }

  .career-card__brands--employers .career-card__brand--radegast img {
    transform: scale(1.5);
  }

  .career-card__brands--security .career-card__brand--seznam {
    background: #fff;
  }

  .career-card__brands--security .career-card__brand--grunex,
  .career-card__brands--security .career-card__brand--undzwei {
    background: #fff;
  }

  .career-card__brands--employers .career-card__brand img {
    max-width: min(75%, 14rem);
    height: 100%;
  }

  .career-practice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.15rem;
  }

  .career-practice-stack {
    display: grid;
    min-width: 0;
    gap: 0.7rem;
  }

  .career-practice-stack .career-practice__logos {
    margin-top: 1.15rem;
  }

  .career-practice__company {
    min-width: 0;
    padding: 0.78rem;
    border: 1px solid rgba(38, 25, 51, 0.11);
    border-radius: 0.72rem;
    background: rgba(252, 250, 255, 0.76);
  }

  .career-practice__logos {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 14rem);
    gap: 0.55rem;
  }

  .career-practice__logos--brewery {
    width: min(100%, 24rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .career-practice__logo {
    display: flex;
    height: 4.25rem;
    align-items: center;
    justify-content: flex-start;
  }

  .career-practice__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .career-practice__logo--prazdroj img {
    width: 94%;
  }

  .career-practice__logo--radegast img {
    width: 66.666%;
    transform: scale(1.5);
    transform-origin: left center;
  }

  .career-practice__company > p {
    margin-top: 0.78rem;
  }

  .career-practice__company > p strong,
  .career-practice__company > p span {
    display: block;
  }

  .career-practice__company > p strong {
    color: rgba(7, 8, 12, 0.8);
    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1.35;
  }

  .career-practice__company > p span {
    margin-top: 0.28rem;
    color: rgba(7, 8, 12, 0.55);
    font-size: 0.62rem;
    line-height: 1.5;
  }

  .career-card > .career-practice__note {
    margin-top: 0.72rem;
    font-size: 0.72rem;
  }

  .career-card__brand img {
    display: block;
    width: 100%;
    max-width: 10rem;
    height: 100%;
    object-fit: contain;
  }

  .career-card__brand--playzone img {
    max-width: 7.2rem;
  }

  .career-card__brands--logos .career-card__brand--playzone,
  .career-card__brands--logos .career-card__brand--grunex {
    background: #fff;
  }

  .career-card__brand--topgaming img {
    max-width: 11rem;
  }

  .career-card__brands--logos .career-card__brand--csko {
    padding: 0;
  }

  .career-card__brand--csko img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 23% center;
    transform: translateX(14%) scale(1.5);
  }

  .career-widget-partners {
    margin-top: 1.25rem;
    padding: 0.72rem;
    border: 1px solid rgba(38, 25, 51, 0.11);
    border-radius: 0.82rem;
    background:
      linear-gradient(115deg, rgba(110, 50, 217, 0.075), transparent 45%),
      rgba(38, 25, 51, 0.045);
  }

  .career-widget-partners__head {
    display: flex;
    min-height: 1.75rem;
    padding: 0 0.15rem 0.62rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .career-widget-partners__head span,
  .career-widget-partners__head small {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .career-widget-partners__head span {
    color: rgba(7, 8, 12, 0.72);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  .career-widget-partners__head small {
    color: rgba(7, 8, 12, 0.34);
    font-size: 0.47rem;
    letter-spacing: 0.07em;
  }

  .career-widget-partners__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .career-widget-partners__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .career-widget-partner {
    position: relative;
    display: flex;
    height: 4.25rem;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(38, 25, 51, 0.12);
    border-radius: 0.62rem;
    box-shadow:
      0 0.45rem 1rem rgba(33, 18, 47, 0.065),
      inset 0 1px rgba(255, 255, 255, 0.2);
  }

  .career-widget-partner::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    content: "";
    pointer-events: none;
  }

  .career-widget-partner img {
    display: block;
    max-width: 100%;
    object-fit: contain;
  }

  .career-widget-partner--playzone,
  .career-widget-partner--esl {
    background: #fff;
  }

  .career-widget-partner--playzone img {
    width: min(72%, 8rem);
    height: 3.2rem;
  }

  .career-widget-partner--esl img {
    width: min(68%, 8.5rem);
    height: 2.8rem;
    filter: none;
  }

  .career-widget-partner--undzwei {
    background: #fff;
  }

  .career-widget-partner--undzwei img {
    width: min(72%, 8rem);
    height: auto;
  }

  .career-widget-partner--tipsport {
    background: #1f7fe5;
  }

  .career-widget-partner--tipsport img,
  .career-widget-partner--chance img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .career-widget-partner--chance {
    background: #007c4d;
  }

  .career-widget-partner--chance img {
    width: 121%;
    max-width: none;
    height: 121%;
    flex: none;
  }

  .career-widget-partner--fortuna {
    background: #ffdd00;
  }

  .career-widget-partner--fortuna img {
    width: 100%;
    height: auto;
  }

  .career-widget-partner--betano {
    background: #101226;
  }

  .career-widget-partner--betano img {
    width: 76%;
    height: auto;
  }

  .career-widget-partner--mall {
    background: #d91920;
  }

  .career-widget-partner--mall img {
    width: 86%;
    height: auto;
  }

  .career-widget-partner--kaufland,
  .career-widget-partner--emag {
    background: #fff;
  }

  .career-widget-partner--kaufland img {
    width: 84%;
    height: auto;
  }

  .career-widget-partner--emag img {
    width: 68%;
    height: auto;
  }

  .career-security-brands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.25rem;
  }

  .career-security-brand {
    display: grid;
    grid-template-rows: 4.25rem auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.11);
    border-radius: 0.72rem;
    background: rgba(252, 250, 255, 0.78);
  }

  .career-security-brand__logo {
    display: flex;
    min-width: 0;
    height: 4.25rem;
    padding: 0.62rem 1rem;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(38, 25, 51, 0.09);
    background: #fff;
  }

  .career-security-brand__logo--dark {
    background:
      radial-gradient(circle at 50% 20%, rgba(36, 113, 255, 0.18), transparent 60%),
      #090e16;
  }

  .career-security-brand__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .career-security-brand > div:last-child {
    min-width: 0;
    padding: 0.72rem 0.82rem 0.78rem;
  }

  .career-security-brand strong,
  .career-security-brand span {
    display: block;
  }

  .career-security-brand strong {
    font-size: 0.76rem;
    font-weight: 720;
    letter-spacing: -0.025em;
    line-height: 1.3;
  }

  .career-security-brand span {
    margin-top: 0.28rem;
    color: rgba(7, 8, 12, 0.48);
    font-size: 0.58rem;
    line-height: 1.4;
  }

  .career-security-findings {
    margin-top: 0.72rem;
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.11);
    border-radius: 0.72rem;
    background: rgba(38, 25, 51, 0.075);
  }

  .career-product-shot {
    margin-top: 1.25rem;
    padding: 0.35rem;
    overflow: hidden;
    border: 1px solid rgba(38, 25, 51, 0.18);
    border-radius: 0.85rem;
    background: #080b10;
    box-shadow: 0 1rem 2.5rem rgba(33, 18, 47, 0.14);
  }

  .career-product-shot__button {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 0.55rem;
    background: #080b10;
    cursor: zoom-in;
  }

  .career-product-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.55rem;
    transition: filter 0.35s ease, transform 0.6s var(--ease-out);
  }

  .career-product-shot__button:hover img {
    filter: brightness(0.72);
    transform: scale(1.012);
  }

  .career-product-shot__zoom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    min-height: 2.7rem;
    padding: 0 1rem;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100vmax;
    background: rgba(7, 8, 12, 0.82);
    color: var(--paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
    backdrop-filter: blur(12px);
  }

  .career-product-shot__zoom svg {
    width: 1rem;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.6;
  }

  .career-product-shot__button:hover .career-product-shot__zoom,
  .career-product-shot__button:focus-visible .career-product-shot__zoom {
    opacity: 1;
    transform: translateY(0);
  }

  body.gallery-open {
    overflow: hidden;
  }

  .gallery-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    background: rgba(5, 3, 9, 0.97);
    color: var(--paper);
    overflow: hidden;
  }

  .gallery-lightbox::backdrop {
    background: rgba(3, 2, 7, 0.94);
    backdrop-filter: blur(16px);
  }

  .gallery-lightbox__shell {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    height: 100svh;
    padding: clamp(1rem, 2.5vw, 2.5rem);
    gap: 0.9rem;
  }

  .gallery-lightbox__stage {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
  }

  .gallery-lightbox__media {
    display: grid;
    width: min(100%, 118rem);
    height: 100%;
    min-height: 0;
    place-items: center;
  }

  .gallery-lightbox__media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.7rem;
    background: #080b10;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.5);
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.35s var(--ease-out);
    user-select: none;
  }

  .gallery-lightbox__media img.is-changing {
    opacity: 0;
    transform: scale(0.985);
  }

  .gallery-lightbox[data-scroll="true"] .gallery-lightbox__stage {
    overflow-y: auto;
    place-items: start center;
    overscroll-behavior: contain;
    scrollbar-color: #a970ff #0b0812;
    scrollbar-width: thin;
  }

  .gallery-lightbox[data-scroll="true"] .gallery-lightbox__media {
    height: auto;
    min-height: 100%;
    padding: 1rem clamp(0rem, 3vw, 3rem) 2rem;
    place-items: start center;
    align-self: start;
  }

  .gallery-lightbox[data-scroll="true"] .gallery-lightbox__media img {
    width: min(100%, 95rem);
    max-height: none;
    margin-inline: auto;
  }

  .gallery-lightbox__close,
  .gallery-lightbox__arrow {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(12, 8, 19, 0.82);
    color: var(--paper);
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .gallery-lightbox__close:hover,
  .gallery-lightbox__arrow:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--ink);
    transform: scale(1.06);
  }

  .gallery-lightbox__close svg,
  .gallery-lightbox__arrow svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .gallery-lightbox__close {
    position: fixed;
    top: max(1rem, var(--safe-top));
    right: max(1rem, var(--safe-right));
    z-index: 3;
  }

  .gallery-lightbox__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
  }

  .gallery-lightbox__arrow:hover {
    transform: translateY(-50%) scale(1.06);
  }

  .gallery-lightbox__arrow--prev { left: 0; }
  .gallery-lightbox__arrow--next { right: 0; }

  .gallery-lightbox[data-single="true"] .gallery-lightbox__arrow {
    display: none;
  }

  .gallery-lightbox__bar {
    display: flex;
    width: min(100%, 118rem);
    min-height: 2.5rem;
    margin-inline: auto;
    padding-top: 0.8rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .gallery-lightbox__bar p {
    font-size: clamp(0.82rem, 1.1vw, 1rem);
    font-weight: 650;
  }

  .gallery-lightbox__bar span {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .career-security-findings ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .career-security-findings li {
    min-width: 0;
    padding: 0.72rem 0.78rem 0.78rem;
    background: rgba(255, 255, 255, 0.9);
  }

  .career-security-findings li strong {
    display: block;
    color: rgba(7, 8, 12, 0.82);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }

  .career-security-findings li p {
    margin-top: 0.32rem;
    color: rgba(7, 8, 12, 0.52);
    font-size: 0.62rem;
    line-height: 1.5;
  }

  .career-card > .career-security-more {
    display: flex;
    max-width: none;
    margin-top: 0.72rem;
    padding: 0.7rem 0.85rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    border: 1px dashed rgba(200, 61, 232, 0.25);
    border-radius: 0.65rem;
    background: rgba(200, 61, 232, 0.035);
    color: rgba(7, 8, 12, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.55rem;
    line-height: 1.5;
  }

  .career-security-more span {
    padding: 0.24rem 0.46rem;
    border-radius: 99rem;
    background: rgba(200, 61, 232, 0.11);
    color: var(--violet-deep);
    font-weight: 720;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .career-employers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.25rem;
  }

  .career-employer {
    display: flex;
    min-width: 0;
    min-height: 7.25rem;
    overflow: hidden;
    align-items: stretch;
    flex-direction: column;
    border: 1px solid rgba(38, 25, 51, 0.11);
    border-radius: 0.72rem;
    background: rgba(252, 250, 255, 0.76);
  }

  .career-employer__head {
    display: grid;
    grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr);
    height: 100%;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
  }

  .career-employer__logo {
    display: flex;
    width: 100%;
    height: 4.5rem;
    padding: 0.75rem 0.9rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(38, 25, 51, 0.1);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.8),
      0 0.35rem 0.9rem rgba(33, 18, 47, 0.055);
  }

  .career-employer__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .career-employer__identity > strong,
  .career-employer__identity > span,
  .career-employer__identity > small {
    display: block;
    min-width: 0;
  }

  .career-employer__identity > strong {
    font-size: 0.77rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .career-employer__identity > span {
    margin-top: 0.34rem;
    color: rgba(7, 8, 12, 0.56);
    font-size: 0.63rem;
    line-height: 1.45;
  }

  .career-employer__identity > small {
    margin-top: 0.42rem;
    color: rgba(7, 8, 12, 0.38);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.5rem;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .career-employer__roles {
    margin: 0;
    padding: 0.12rem 0.85rem 0.18rem;
    border-top: 1px solid rgba(38, 25, 51, 0.1);
    list-style: none;
  }

  .career-role {
    display: grid;
    grid-template-columns: 5.35rem minmax(0, 1fr);
    min-width: 0;
    padding: 0.62rem 0;
    align-items: start;
    gap: 0.65rem;
  }

  .career-role + .career-role {
    border-top: 1px solid rgba(38, 25, 51, 0.08);
  }

  .career-role__period {
    display: inline-flex;
    min-height: 1.55rem;
    padding: 0.28rem 0.42rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--event-color) 23%, transparent);
    border-radius: 99rem;
    background: color-mix(in srgb, var(--event-color) 7%, transparent);
    color: var(--event-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.47rem;
    font-weight: 720;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }

  .career-role__copy b,
  .career-role__copy span,
  .career-role__copy small {
    display: block;
  }

  .career-role__copy b {
    color: rgba(7, 8, 12, 0.78);
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .career-role__copy span {
    margin-top: 0.2rem;
    color: rgba(7, 8, 12, 0.52);
    font-size: 0.58rem;
    line-height: 1.4;
  }

  .career-role__copy small {
    margin-top: 0.25rem;
    color: rgba(7, 8, 12, 0.35);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.47rem;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .career-card--featured {
    border-color: rgba(211, 95, 53, 0.28);
    background:
      radial-gradient(circle at 100% 0, rgba(211, 95, 53, 0.11), transparent 28%),
      rgba(255, 255, 255, 0.88);
  }

  .career-card--head {
    border-color: rgba(169, 112, 255, 0.34);
    background:
      radial-gradient(circle at 90% -30%, rgba(217, 92, 255, 0.36), transparent 34%),
      linear-gradient(120deg, #120b1b, #20102e 70%, #160b21);
    color: var(--white);
    box-shadow: 0 1.1rem 2.8rem rgba(33, 18, 47, 0.2);
  }

  .career-card--head::before {
    background: var(--primary);
  }

  .career-card--head .career-card__meta {
    color: rgba(252, 250, 255, 0.48);
  }

  .career-card--head > p {
    color: rgba(252, 250, 255, 0.68);
  }

  .career-card__meta .career-card__head-label {
    display: inline-flex;
    min-height: 1.55rem;
    padding: 0.25rem 0.58rem;
    align-items: center;
    overflow: visible;
    border: 1px solid rgba(169, 112, 255, 0.42);
    border-radius: 99rem;
    background: rgba(169, 112, 255, 0.12);
    color: var(--violet-soft);
  }

  /* Lessons learned */
  .career-lessons {
    position: relative;
    padding: clamp(7rem, 11vw, 11rem) 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 22%, rgba(169, 112, 255, 0.12), transparent 28rem),
      radial-gradient(circle at 88% 80%, rgba(217, 92, 255, 0.08), transparent 32rem),
      var(--ink);
  }

  .career-lessons::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 88%, transparent);
    pointer-events: none;
  }

  .career-lessons__inner {
    position: relative;
    z-index: 1;
  }

  .career-lessons__head {
    display: grid;
    grid-template-columns: 0.75fr minmax(0, 4.2fr) minmax(16rem, 1.4fr);
    gap: clamp(1.5rem, 3vw, 4rem);
    align-items: end;
  }

  .career-lessons__head .display-heading {
    font-size: clamp(3.2rem, 6vw, 7.4rem);
  }

  .career-lessons__title {
    min-width: 0;
  }

  .career-lessons__toggle {
    display: inline-flex;
    min-height: 3.7rem;
    margin-top: clamp(2rem, 3.5vw, 3.5rem);
    padding: 0.35rem 0.35rem 0.35rem 1.35rem;
    align-items: center;
    gap: 1.4rem;
    border: 1px solid rgba(169, 112, 255, 0.46);
    border-radius: 100vmax;
    background: rgba(169, 112, 255, 0.09);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 2.5rem rgba(169, 112, 255, 0.08);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  .career-lessons__toggle i {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--ink);
    transition: transform 0.45s var(--ease-out), background 0.25s ease;
  }

  .career-lessons__toggle svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }

  .career-lessons__toggle:hover {
    border-color: rgba(201, 158, 255, 0.9);
    background: rgba(169, 112, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 2.5rem rgba(169, 112, 255, 0.18);
  }

  .career-lessons__toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
  }

  .career-lessons__head > p:last-child {
    max-width: 27rem;
    padding-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.9rem, 1vw, 1.04rem);
    line-height: 1.72;
  }

  .career-lessons__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(4.5rem, 8vw, 8rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.5s ease, transform 0.65s var(--ease-out);
  }

  .career-lessons__grid[hidden] {
    display: none;
  }

  .career-lessons__grid.is-expanded {
    opacity: 1;
    transform: none;
  }

  .career-lesson-card {
    position: relative;
    display: flex;
    min-height: clamp(23rem, 30vw, 30rem);
    padding: clamp(1.4rem, 2.4vw, 2.5rem);
    overflow: hidden;
    flex-direction: column;
    background: rgba(9, 7, 15, 0.94);
    cursor: pointer;
    transition: background 0.45s ease;
  }

  .career-lesson-card::before {
    position: absolute;
    top: -9rem;
    right: -9rem;
    width: 20rem;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(169, 112, 255, 0.17), transparent 68%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }

  .career-lesson-card:hover {
    background: rgba(18, 12, 28, 0.98);
  }

  .career-lesson-card:hover::before {
    opacity: 1;
  }

  .career-lesson-card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.37);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.54rem;
    letter-spacing: 0.11em;
  }

  .career-lesson-card__meta span:first-child {
    color: var(--primary);
  }

  .career-lesson-card h3 {
    position: relative;
    z-index: 1;
    max-width: 25rem;
    margin-top: clamp(3.5rem, 6vw, 6rem);
    font-size: clamp(1.8rem, 2.4vw, 3rem);
    font-weight: 520;
    letter-spacing: -0.055em;
    line-height: 1.02;
  }

  .career-lesson-card > p {
    position: relative;
    z-index: 1;
    max-width: 27rem;
    margin-top: 1.4rem;
    color: rgba(255, 255, 255, 0.57);
    font-size: clamp(0.87rem, 0.95vw, 1rem);
    line-height: 1.66;
  }

  .career-lesson-card > button {
    position: static;
    z-index: 1;
    display: flex;
    width: 100%;
    margin-top: auto;
    padding-top: 1.25rem;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.73);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
  }

  .career-lesson-card > button::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
  }

  .career-lesson-card > button > span {
    position: relative;
    z-index: 3;
    pointer-events: none;
  }

  .career-lesson-card:has(> button:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 4px;
  }

  .career-lesson-card > button:focus-visible {
    outline: none;
  }

  .career-lesson-card > button span:last-child {
    color: var(--primary);
    transition: transform 0.3s var(--ease-out);
  }

  .career-lesson-card > button:hover {
    border-color: rgba(169, 112, 255, 0.5);
    color: #fff;
  }

  .career-lesson-card > button:hover span:last-child {
    transform: translate(0.2rem, -0.2rem);
  }

  body.lesson-dialog-open {
    overflow: hidden;
  }

  .career-lesson-dialog {
    width: min(68rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100svh - 2rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(205, 166, 255, 0.27);
    background: rgba(11, 8, 18, 0.98);
    color: var(--paper);
    box-shadow: 0 3rem 9rem rgba(0, 0, 0, 0.72), 0 0 5rem rgba(169, 112, 255, 0.12);
    opacity: 0;
    transform: translateY(1.5rem) scale(0.985);
    transition: opacity 0.35s ease, transform 0.45s var(--ease-out), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
  }

  .career-lesson-dialog[open] {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .career-lesson-dialog[open] {
      opacity: 0;
      transform: translateY(1.5rem) scale(0.985);
    }
  }

  .career-lesson-dialog::backdrop {
    background: rgba(5, 3, 9, 0.82);
    backdrop-filter: blur(14px);
  }

  .career-lesson-dialog__shell {
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .career-lesson-dialog__topline {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    min-height: 4.5rem;
    padding: 0.7rem clamp(1rem, 2vw, 2rem);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(11, 8, 18, 0.9);
    backdrop-filter: blur(18px);
  }

  .career-lesson-dialog__controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .career-lesson-dialog__controls > span {
    min-width: 4.2rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .career-lesson-dialog__topline > span {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .career-lesson-dialog__topline button {
    display: grid;
    width: 2.7rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  }

  .career-lesson-dialog__topline button:hover {
    border-color: var(--primary);
    background: rgba(169, 112, 255, 0.13);
  }

  .career-lesson-dialog__topline .career-lesson-dialog__close {
    margin-left: 0.55rem;
  }

  .career-lesson-dialog__topline .career-lesson-dialog__close:hover {
    transform: rotate(6deg);
  }

  .career-lesson-dialog__topline svg {
    width: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .career-lesson-dialog__body {
    display: grid;
    grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.35fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.5rem, 4vw, 4rem);
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease, transform 0.22s var(--ease-out);
  }

  .career-lesson-dialog.is-switching .career-lesson-dialog__body {
    opacity: 0;
    transform: translateY(0.7rem);
  }

  .career-lesson-dialog__body h2 {
    position: sticky;
    top: 5.8rem;
    align-self: start;
    color: var(--paper);
    font-size: clamp(2.7rem, 4.6vw, 5.2rem);
    font-weight: 520;
    letter-spacing: -0.07em;
    line-height: 0.94;
  }

  .career-lesson-dialog__copy {
    color: rgba(255, 255, 255, 0.69);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.68;
  }

  .career-lesson-dialog__copy > p + p {
    margin-top: 1.1rem;
  }

  .career-lesson-takeaway {
    position: relative;
    margin-top: clamp(1.7rem, 3vw, 2.8rem);
    padding: clamp(1.15rem, 2vw, 1.7rem);
    border: 1px solid rgba(169, 112, 255, 0.34);
    background: linear-gradient(135deg, rgba(169, 112, 255, 0.13), rgba(217, 92, 255, 0.035));
  }

  .career-lesson-takeaway::before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 35%;
    height: 1px;
    content: "";
    background: var(--primary);
    box-shadow: 0 0 1.2rem rgba(169, 112, 255, 0.8);
  }

  .career-lesson-takeaway > span {
    color: var(--violet-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .career-lesson-takeaway > p {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
  }

  /* Reviews */
  .reviews {
    padding: clamp(5.5rem, 9vw, 9rem) 0;
    overflow: hidden;
  }

  .reviews__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .reviews__head h2 {
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 540;
    letter-spacing: -0.07em;
    line-height: 0.9;
  }

  .reviews__rail {
    margin-top: clamp(4rem, 7vw, 7rem);
    overflow: hidden;
  }

  .reviews__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding-left: var(--page-x);
    animation: reviews-move 36s linear infinite;
  }

  .reviews__track:hover { animation-play-state: paused; }

  .review-card {
    display: grid;
    align-content: space-between;
    width: min(38rem, 75vw);
    min-height: 21rem;
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid rgba(7, 8, 12, 0.35);
  }

  .review-card blockquote {
    max-width: 30rem;
    font-size: clamp(1.7rem, 2.6vw, 3rem);
    font-weight: 520;
    letter-spacing: -0.05em;
    line-height: 1.12;
  }

  .review-card figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(7, 8, 12, 0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  /* Contact */
  .contact {
    min-height: 100svh;
    padding: clamp(7rem, 11vw, 12rem) 0 clamp(6rem, 9vw, 9rem);
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 22%, rgba(217, 92, 255, 0.22), transparent 25%),
      radial-gradient(circle at 8% 75%, rgba(110, 50, 217, 0.16), transparent 26%),
      var(--ink);
  }

  .contact::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0.45) 72%, transparent);
  }

  .contact__inner {
    position: relative;
    z-index: 2;
  }

  .contact__intro {
    position: relative;
  }

  .contact h2 {
    max-width: 82rem;
    margin-top: clamp(3rem, 6vw, 6rem);
    font-size: clamp(3.7rem, 7.6vw, 9.5rem);
    font-weight: 510;
    letter-spacing: -0.08em;
    line-height: 0.86;
  }

  .contact h2 em {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .contact__intro-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    max-width: 83rem;
    margin-top: clamp(2rem, 4vw, 4rem);
  }

  .contact__lead {
    max-width: 35rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    line-height: 1.65;
  }

  .contact__decision {
    position: absolute;
    top: clamp(4rem, 7vw, 7rem);
    right: 0;
    display: grid;
    width: min(33vw, 34rem);
    justify-items: end;
    gap: 1rem;
  }

  .project-triangle {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .project-triangle__choices {
    position: relative;
    width: min(100%, 20rem);
    height: 9.25rem;
    margin: 0 auto;
  }

  .project-triangle__choices > svg {
    position: absolute;
    inset: 0.55rem 2.5rem 0.35rem;
    width: calc(100% - 5rem);
    height: calc(100% - 0.9rem);
    fill: none;
    overflow: visible;
    pointer-events: none;
  }

  .project-triangle__choices > svg path {
    vector-effect: non-scaling-stroke;
  }

  .project-triangle__connection {
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .project-triangle__beam {
    fill: none;
    stroke-linecap: round;
  }

  .project-triangle__beam--glow {
    stroke: rgba(169, 112, 255, 0.56);
    stroke-width: 7;
    filter: blur(1.5px) drop-shadow(0 0 8px rgba(169, 112, 255, 0.62));
  }

  .project-triangle__beam--core {
    stroke: rgba(232, 213, 255, 0.94);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.82));
  }

  .project-triangle__particle {
    fill: #fff;
    stroke: rgba(203, 160, 255, 0.9);
    stroke-width: 0.7;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px rgba(169, 112, 255, 1));
  }

  .project-triangle[data-pair="cheap-quality"] [data-triangle-link="cheap-quality"],
  .project-triangle[data-pair="fast-quality"] [data-triangle-link="fast-quality"],
  .project-triangle[data-pair="cheap-fast"] [data-triangle-link="cheap-fast"] {
    opacity: 1;
  }

  .project-triangle[data-pair="cheap-quality"] [data-triangle-link="cheap-quality"] .project-triangle__beam--glow,
  .project-triangle[data-pair="fast-quality"] [data-triangle-link="fast-quality"] .project-triangle__beam--glow,
  .project-triangle[data-pair="cheap-fast"] [data-triangle-link="cheap-fast"] .project-triangle__beam--glow {
    animation: triangle-connection-breathe 3.2s ease-in-out infinite;
  }

  .project-triangle[data-pair="cheap-quality"] [data-triangle-link="cheap-quality"] .project-triangle__particle,
  .project-triangle[data-pair="fast-quality"] [data-triangle-link="fast-quality"] .project-triangle__particle,
  .project-triangle[data-pair="cheap-fast"] [data-triangle-link="cheap-fast"] .project-triangle__particle {
    animation: triangle-particle-pulse 1.6s ease-in-out infinite;
  }

  .project-triangle__choice {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    user-select: none;
  }

  .project-triangle__choice--quality {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .project-triangle__choice--cheap {
    bottom: 0;
    left: 0;
  }

  .project-triangle__choice--fast {
    right: 0;
    bottom: 0;
  }

  .project-triangle__choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .project-triangle__choice > span {
    display: grid;
    min-width: 5.4rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.85rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 100vmax;
    background: rgba(8, 7, 13, 0.62);
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    backdrop-filter: blur(12px);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  .project-triangle__choice:hover > span {
    color: #fff;
    border-color: rgba(192, 132, 255, 0.65);
    transform: translateY(-2px);
  }

  .project-triangle__choice input:checked + span {
    border-color: rgba(198, 147, 255, 0.8);
    background: linear-gradient(135deg, rgba(178, 104, 255, 0.26), rgba(104, 58, 173, 0.1));
    color: rgba(255, 255, 255, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 1.2rem rgba(169, 112, 255, 0.12),
      0 0 1.5rem rgba(169, 112, 255, 0.23);
  }

  .project-triangle__choice input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .project-triangle__result {
    min-height: 1.15rem;
    margin-top: 0.45rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.035em;
    line-height: 1.45;
    text-align: center;
  }

  .contact__workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(22rem, 0.84fr);
    gap: clamp(0.8rem, 1.4vw, 1.5rem);
    margin-top: clamp(4.5rem, 8vw, 8rem);
    padding: clamp(0.7rem, 1.1vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 3.5rem 9rem rgba(0, 0, 0, 0.34);
    isolation: isolate;
  }

  .contact__workspace::before {
    position: absolute;
    top: -1px;
    right: 12%;
    left: 12%;
    z-index: -1;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
    box-shadow: 0 0 2.5rem rgba(217, 92, 255, 0.7);
  }

  .contact-form,
  .contact-hub {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 10, 25, 0.82);
    backdrop-filter: blur(18px);
  }

  .contact-form {
    padding: clamp(1.5rem, 3.2vw, 3.5rem);
    overflow: visible;
  }

  .contact-form::after {
    position: absolute;
    right: -8rem;
    bottom: -10rem;
    width: 23rem;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(169, 112, 255, 0.13), transparent 68%);
    pointer-events: none;
  }

  .contact-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  .contact-form__head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: start;
    padding-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-form__index,
  .contact-hub__head,
  .contact-hub__meta {
    color: rgba(255, 255, 255, 0.42);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .contact-form__head-content {
    flex: 1;
    min-width: 0;
  }

  .contact-form__direct {
    display: grid;
    margin-top: 0.85rem;
  }

  .contact-form__direct a {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 2rem;
    min-width: 0;
    padding: 0.72rem 0;
    align-items: center;
    gap: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.3s ease, padding 0.35s var(--ease-out);
  }

  .contact-form__direct a:hover {
    padding-left: 0.45rem;
    color: var(--violet-soft);
  }

  .contact-form__direct small {
    color: rgba(255, 255, 255, 0.42);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .contact-form__direct strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.2rem, 2.25vw, 2.35rem);
    font-weight: 520;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .contact-form__direct-phone strong {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.55vw, 1.5rem);
    letter-spacing: -0.025em;
  }

  .contact-form__direct a > span {
    display: grid;
    width: 2rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(169, 112, 255, 0.32);
    border-radius: 50%;
    color: var(--primary);
    font-size: 0.72rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
  }

  .contact-form__direct a:hover > span {
    background: var(--primary);
    color: var(--ink);
    transform: translate(0.1rem, -0.1rem);
  }

  .contact-form__signal {
    display: flex;
    gap: 0.25rem;
    align-items: end;
    height: 2rem;
  }

  .contact-form__signal i {
    width: 2px;
    height: 35%;
    background: var(--primary);
    box-shadow: 0 0 0.8rem var(--primary);
    animation: contact-signal 1.4s ease-in-out infinite alternate;
  }

  .contact-form__signal i:nth-child(2) { height: 80%; animation-delay: -0.45s; }
  .contact-form__signal i:nth-child(3) { height: 55%; animation-delay: -0.9s; }

  .contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.4vw, 2.5rem);
    margin-top: 1rem;
  }

  .contact-field {
    position: relative;
    min-width: 0;
    padding: 1.4rem 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.3s ease;
  }

  .contact-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 1rem 2.5rem -2.2rem rgba(169, 112, 255, 0.95);
  }

  .contact-field--wide {
    grid-column: 1 / -1;
  }

  .contact-field label {
    display: flex;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.54rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .contact-field label span {
    color: var(--primary);
  }

  .contact-field input,
  .contact-field textarea {
    display: block;
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.25rem 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--paper);
    font: inherit;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.45;
    resize: vertical;
  }

  .contact-field input::placeholder,
  .contact-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
    opacity: 1;
  }

  .phone-country-field {
    position: relative;
    display: flex;
    width: 100%;
    margin-top: 0.65rem;
  }

  .phone-country {
    position: relative;
    z-index: 12;
    flex: 0 0 auto;
  }

  .phone-country__toggle {
    display: inline-flex;
    height: 100%;
    min-height: 2.65rem;
    padding: 0.3rem 0.65rem 0.3rem 0;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
  }

  .phone-country__toggle:focus-visible {
    outline-offset: 0.2rem;
  }

  .phone-country-field input {
    min-width: 0;
    margin-top: 0;
    padding-left: 0.8rem;
  }

  .contact-field input[type="hidden"] {
    display: none;
  }

  .phone-country__flag {
    display: block;
    width: 1.5rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.2rem;
    box-shadow: 0 0.2rem 0.65rem rgba(0, 0, 0, 0.24);
  }

  .phone-country__flag svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .phone-country__emoji {
    display: grid;
    width: 100%;
    aspect-ratio: 3 / 2;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    line-height: 1;
  }

  .phone-country__chevron {
    width: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: transform 0.2s ease;
  }

  .phone-country__toggle[aria-expanded="true"] .phone-country__chevron {
    transform: rotate(180deg);
  }

  .phone-country__menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(19rem, calc(100vw - 3rem));
    max-height: 20rem;
    padding: 0.45rem;
    overflow: hidden;
    border: 1px solid rgba(169, 112, 255, 0.3);
    border-radius: 0.85rem;
    background: rgba(17, 11, 26, 0.98);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(20px);
  }

  .phone-country__menu[hidden] {
    display: none;
  }

  .phone-country__search {
    position: relative;
    display: block;
    margin-bottom: 0.35rem;
  }

  .phone-country__search svg {
    position: absolute;
    top: 50%;
    left: 0.72rem;
    width: 1rem;
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-linecap: round;
    stroke-width: 1.7;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .phone-country-field .phone-country__search input {
    width: 100%;
    min-height: 2.55rem;
    margin: 0;
    padding: 0.55rem 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.62rem;
    outline: 0;
    background: rgba(255, 255, 255, 0.07);
    color: var(--paper);
    font: inherit;
    font-size: 0.86rem;
  }

  .phone-country__search input::placeholder {
    color: rgba(255, 255, 255, 0.48);
  }

  .phone-country__search input:focus {
    border-color: rgba(169, 112, 255, 0.75);
    box-shadow: 0 0 0 3px rgba(169, 112, 255, 0.13);
  }

  .phone-country__search input::-webkit-search-cancel-button {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.65;
  }

  .phone-country__options {
    display: grid;
    min-height: 0;
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(169, 112, 255, 0.45) transparent;
    scrollbar-width: thin;
  }

  .phone-country__option {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    width: 100%;
    padding: 0.68rem 0.7rem;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .phone-country__option[hidden] {
    display: none;
  }

  .phone-country__option:hover,
  .phone-country__option:focus-visible,
  .phone-country__option[aria-selected="true"] {
    background: rgba(169, 112, 255, 0.14);
    color: var(--paper);
    outline: 0;
  }

  .phone-country__option strong {
    color: var(--violet-soft);
    font-size: 0.82rem;
  }

  .phone-country__name {
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phone-country__empty {
    margin: 0;
    padding: 1rem 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.86rem;
    text-align: center;
  }

  .phone-country__empty[hidden] {
    display: none;
  }

  .contact-field textarea {
    min-height: 8.5rem;
    max-height: 22rem;
  }

  .contact-field input:-webkit-autofill,
  .contact-field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--paper);
    box-shadow: 0 0 0 1000px #0f0a19 inset;
  }

  .contact-field:has([aria-invalid="true"]) {
    border-color: #ff7f9c;
  }

  .contact-field__error {
    min-height: 1rem;
    margin-top: 0.35rem;
    color: #ff9caf;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.49rem;
    letter-spacing: 0.04em;
  }

  .contact-form__actions {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    margin-top: clamp(1.8rem, 3vw, 3rem);
  }

  .contact-form__submit {
    display: inline-flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    min-width: min(100%, 17rem);
    min-height: 4.25rem;
    padding: 0.35rem 0.4rem 0.35rem 1.5rem;
    border-radius: 100vmax;
    background: var(--primary);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  }

  .contact-form__submit:hover {
    background: var(--secondary);
    box-shadow: 0 0 3rem rgba(217, 92, 255, 0.32);
  }

  .contact-form__submit:disabled {
    opacity: 0.55;
    cursor: wait;
  }

  .contact-form__submit i {
    display: grid;
    flex: 0 0 auto;
    width: 3.45rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
  }

  .contact-form__submit svg {
    width: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .contact-form__note {
    max-width: 11rem;
    color: rgba(255, 255, 255, 0.38);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.48rem;
    letter-spacing: 0.07em;
    line-height: 1.6;
    text-transform: uppercase;
  }

  .contact-form__status {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    font-size: 0.72rem;
  }

  .contact-form__status.is-visible { display: block; }
  .contact-form__status.is-loading { border-color: rgba(169, 112, 255, 0.38); background: rgba(169, 112, 255, 0.09); color: var(--violet-soft); }
  .contact-form__status.is-success { border-color: rgba(111, 239, 181, 0.4); background: rgba(111, 239, 181, 0.09); color: #a9f8d2; }
  .contact-form__status.is-error { border-color: rgba(255, 127, 156, 0.42); background: rgba(255, 127, 156, 0.08); color: #ffb1c1; }

  .contact-hub {
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    background:
      linear-gradient(155deg, rgba(169, 112, 255, 0.12), transparent 35%),
      rgba(13, 8, 22, 0.9);
  }

  .contact-hub__head,
  .contact-hub__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .contact-hub__head {
    padding: 0.45rem 0 1.4rem;
  }

  .contact-hub__head span:first-child,
  .contact-hub__meta span:first-child {
    color: var(--primary);
  }

  .contact-hub__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-hub__links a {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 7.25rem;
    padding: 1rem;
    place-items: center;
    align-content: center;
    gap: 0.62rem;
    text-align: center;
    transition: background 0.3s ease;
  }

  .contact-hub__links a:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-hub__links a:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-hub__links a:hover {
    background: rgba(169, 112, 255, 0.08);
  }

  .contact-hub__social-icon {
    position: static;
    display: grid;
    width: 2.75rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(169, 112, 255, 0.28);
    border-radius: 0.78rem;
    background: rgba(169, 112, 255, 0.08);
    color: var(--violet-soft);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-out);
  }

  .contact-hub__social-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentColor;
  }

  .contact-hub__links strong {
    font-size: 0.7rem;
    font-weight: 620;
    letter-spacing: 0.01em;
  }

  .contact-hub__arrow {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    color: var(--primary);
    font-size: 0.72rem;
    transition: transform 0.3s var(--ease-out);
  }

  .contact-hub__links a:hover .contact-hub__social-icon {
    border-color: transparent;
    background: var(--primary);
    color: var(--ink);
    transform: translateY(-0.15rem) rotate(-3deg);
  }

  .contact-hub__links a:hover .contact-hub__arrow {
    transform: translate(0.1rem, -0.1rem);
  }

  .contact-hub__links a:nth-child(2):hover .contact-hub__social-icon {
    background: #0a66c2;
    color: #fff;
  }

  .contact-hub__links a:nth-child(3):hover .contact-hub__social-icon {
    background: #1877f2;
    color: #fff;
  }

  .contact-hub__links a:nth-child(4):hover .contact-hub__social-icon {
    background: linear-gradient(135deg, #833ab4, #fd1d1d 58%, #fcb045);
    color: #fff;
  }

  .contact-map {
    position: relative;
    flex: 1;
    min-height: 29rem;
    margin-top: 1rem;
    overflow: hidden;
    background: #171020;
    isolation: isolate;
  }

  .contact-map iframe {
    position: absolute;
    top: -4.25rem;
    right: -2%;
    left: -2%;
    width: 104%;
    height: calc(104% + 4.25rem);
    border: 0;
    filter: grayscale(1) invert(0.9) hue-rotate(225deg) saturate(1.5) contrast(1.12) brightness(0.66);
    opacity: 0.82;
    pointer-events: none;
  }

  .contact-map::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
      linear-gradient(180deg, rgba(8, 6, 15, 0.55), transparent 25%, transparent 62%, rgba(8, 6, 15, 0.88)),
      linear-gradient(90deg, rgba(169, 112, 255, 0.12), transparent 50%);
    pointer-events: none;
  }

  .contact-map__scan {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 92, 255, 0.9), transparent);
    box-shadow: 0 0 1.5rem rgba(217, 92, 255, 0.8);
    pointer-events: none;
    animation: map-scan 5s ease-in-out infinite;
  }

  .contact-map__label {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 3;
    display: grid;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.19);
    background: rgba(8, 6, 15, 0.82);
    backdrop-filter: blur(14px);
  }

  .contact-map__label > span {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--violet-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.46rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .contact-map__label > span i {
    width: 0.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0.8rem var(--secondary);
  }

  .contact-map__label strong {
    margin-top: 0.35rem;
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 540;
    letter-spacing: -0.045em;
  }

  .contact-hub__meta {
    padding-top: 1.2rem;
    line-height: 1.5;
  }

  @keyframes contact-signal {
    to { height: 100%; opacity: 0.45; }
  }

  @keyframes map-scan {
    0%, 8% { transform: translateY(0); opacity: 0; }
    18% { opacity: 1; }
    78% { opacity: 0.7; }
    90%, 100% { transform: translateY(29rem); opacity: 0; }
  }

  .privacy {
    min-height: calc(100svh - 9rem);
    padding: calc(var(--header-h) + var(--safe-top) + clamp(5rem, 10vw, 10rem)) 0 clamp(7rem, 12vw, 12rem);
    background:
      radial-gradient(circle at 82% 18%, rgba(169, 112, 255, 0.15), transparent 26rem),
      radial-gradient(circle at 14% 72%, rgba(217, 92, 255, 0.08), transparent 30rem),
      var(--ink);
  }

  .privacy__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 10rem);
    align-items: start;
  }

  .privacy__header {
    position: sticky;
    top: calc(var(--header-h) + var(--safe-top) + 3rem);
  }

  .privacy__header .section-kicker {
    color: rgba(255, 255, 255, 0.58);
  }

  .privacy__header h1 {
    max-width: 9ch;
    margin-top: 2rem;
    font-size: clamp(3.25rem, 6.2vw, 7rem);
    font-weight: 650;
    letter-spacing: -0.075em;
    line-height: 0.94;
  }

  .privacy__content {
    max-width: 52rem;
    padding-top: 0.15rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.85;
  }

  .privacy__content h2 {
    margin-top: clamp(2.7rem, 5vw, 4.6rem);
    margin-bottom: 0.85rem;
    color: var(--paper);
    font-size: clamp(1.35rem, 2.3vw, 2.15rem);
    font-weight: 560;
    letter-spacing: -0.045em;
    line-height: 1.15;
  }

  .privacy__content a {
    color: var(--violet-soft);
    text-decoration: underline;
    text-decoration-color: rgba(213, 180, 255, 0.4);
    text-underline-offset: 0.25em;
  }

  .footer {
    position: relative;
    z-index: 2;
    background: var(--ink);
    color: rgba(255, 255, 255, 0.55);
  }

  .footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 2rem;
    align-items: center;
    min-height: 9rem;
    border-top: 1px solid var(--line-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }

  .brand--footer {
    color: var(--paper);
  }

  .brand--footer .brand__mark {
    width: 4.15rem;
    height: 3.4rem;
  }

  .brand--footer .brand__name {
    width: clamp(9.2rem, 12vw, 11.5rem);
  }

  .footer__legal {
    display: grid;
    min-width: 0;
    gap: 0.4rem;
    justify-self: center;
    line-height: 1.65;
  }

  .footer__legal a {
    width: max-content;
    color: var(--paper);
    font-size: 0.56rem;
    transition: color 0.25s ease;
  }

  .footer__legal p {
    max-width: 52rem;
    font-size: 0.6rem;
    letter-spacing: 0.035em;
  }

  .footer__legal a:hover {
    color: var(--violet-soft);
  }

  .back-top {
    justify-self: end;
    color: var(--paper);
    text-transform: uppercase;
  }

  .back-top span { margin-left: 0.5rem; color: var(--primary); }
  .footer__copyright { display: none; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 0.8s ease, transform 1s var(--ease-out);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .project-card[data-reveal],
  .project-card[data-reveal].is-visible {
    transform: perspective(110rem) translate3d(0, var(--card-scroll-y, 0), var(--card-scroll-z, 0)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
}

@layer motion {
  @keyframes loader-word {
    to { transform: translateY(0); }
  }

  @keyframes noise-shift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(3%, -2%, 0); }
    50% { transform: translate3d(-2%, 3%, 0); }
    75% { transform: translate3d(1%, 2%, 0); }
    100% { transform: translate3d(-3%, -1%, 0); }
  }

  @keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.7); }
  }

  @keyframes fx-border-orbit {
    to { offset-distance: 100%; }
  }

  @keyframes fallback-core-breathe {
    0%, 100% { transform: rotate(-24deg) scale(0.98); filter: saturate(0.92); }
    50% { transform: rotate(-20deg) scale(1.035); filter: saturate(1.14); }
  }

  @keyframes fallback-orbit-one {
    from { transform: rotateX(64deg) rotateZ(20deg); }
    to { transform: rotateX(64deg) rotateZ(380deg); }
  }

  @keyframes fallback-orbit-two {
    from { transform: rotateY(67deg) rotateZ(-18deg); }
    to { transform: rotateY(67deg) rotateZ(342deg); }
  }

  @keyframes triangle-connection-breathe {
    0%, 100% {
      opacity: 0.45;
      filter: blur(1.4px) drop-shadow(0 0 6px rgba(169, 112, 255, 0.42));
    }
    50% {
      opacity: 0.88;
      filter: blur(1.8px) drop-shadow(0 0 12px rgba(183, 128, 255, 0.72));
    }
  }

  @keyframes triangle-particle-pulse {
    0%, 100% { opacity: 0.68; }
    50% { opacity: 1; }
  }

  @keyframes scroll-line {
    0% { left: -45%; }
    100% { left: 100%; }
  }

  @keyframes ticker-move {
    to { transform: translateX(-50%); }
  }

  @keyframes reviews-move {
    to { transform: translateX(calc(-50% - 0.5rem)); }
  }

  @keyframes data-pulse {
    0%, 100% { transform: translate3d(-1rem, 1rem, 5rem) scale(0.7); opacity: 0.4; }
    50% { transform: translate3d(3rem, -2rem, 5rem) scale(1.25); opacity: 1; }
  }

  @keyframes spin {
    to { rotate: 360deg; }
  }

  @keyframes orbit-one {
    from { transform: rotateX(70deg) rotateZ(0); }
    to { transform: rotateX(70deg) rotateZ(360deg); }
  }

  @keyframes orbit-two {
    from { transform: rotateY(70deg) rotateZ(0); }
    to { transform: rotateY(70deg) rotateZ(360deg); }
  }

  @keyframes core-breathe {
    0%, 100% { transform: scale(0.98); filter: saturate(0.9); }
    50% { transform: scale(1.04); filter: saturate(1.2); }
  }

  @keyframes spatial-core-pulse {
    0%, 100% { transform: translate(-50%, -50%) translateZ(9rem) rotate(45deg) scale(0.94); filter: saturate(0.9); }
    50% { transform: translate(-50%, -50%) translateZ(9rem) rotate(45deg) scale(1.06); filter: saturate(1.25); }
  }

  @keyframes spatial-orbit-one {
    from { transform: rotateX(68deg) rotateZ(0deg); }
    to { transform: rotateX(68deg) rotateZ(360deg); }
  }

  @keyframes spatial-orbit-two {
    from { transform: rotateY(70deg) rotateZ(0deg); }
    to { transform: rotateY(70deg) rotateZ(360deg); }
  }

  @keyframes spatial-node {
    0%, 100% { opacity: 0.45; transform: scale(0.72); }
    50% { opacity: 1; transform: scale(1.2); }
  }

  @keyframes scale-orbit-glow {
    0%, 100% { opacity: 0.48; }
    50% { opacity: 0.92; }
  }

}

@layer responsive {
  body.menu-open .site-header,
  body.menu-open .site-header.is-scrolled {
    color: var(--ink);
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }

  body.menu-open .brand__name {
    color: var(--ink);
  }

  body.menu-open .header-mobile-tools .language-switch__toggle {
    color: var(--ink);
    border-color: rgba(7, 8, 12, 0.3);
    background: transparent;
  }

  body.menu-open .header-mobile-tools .language-switch__toggle:hover,
  body.menu-open .header-mobile-tools .language-switch__toggle[aria-expanded="true"] {
    color: var(--paper);
    border-color: var(--ink);
    background: var(--ink);
  }

  @media (max-width: 75rem) {
    :root {
      --header-h: 5rem;
    }

    .desktop-nav {
      gap: 1.2rem;
    }

    .hero__grid {
      grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.6fr);
    }

    .hero__bottom {
      grid-template-columns: minmax(17rem, 27rem) 1fr;
      padding-left: 5vw;
    }

    .hero__actions {
      gap: 1rem;
    }

    .hero__actions .button {
      gap: 1rem;
      padding-inline: 1.2rem;
    }

    .statement__inner,
    .stack__head {
      grid-template-columns: 0.65fr 5fr;
    }

    .audience-fit__head {
      grid-template-columns: 0.65fr minmax(0, 4fr) minmax(15rem, 1.35fr);
    }

    .career-lessons__head {
      grid-template-columns: 0.65fr minmax(0, 4fr) minmax(15rem, 1.35fr);
    }

    .capability {
      min-height: 28rem;
    }

    .projects__head {
      grid-template-columns: 0.7fr 4fr 1.4fr;
    }

    .project-card--featured {
      min-height: 47rem;
    }

    .project-card--half {
      min-height: 41rem;
    }

    .about__intro {
      grid-template-columns: 0.7fr 3.2fr 1.25fr;
    }
  }

  @media (min-width: 62rem) and (max-width: 72rem) {
    .desktop-nav {
      gap: 1rem;
    }

    .desktop-nav span {
      display: none;
    }

    .header-tools {
      gap: 0.6rem;
    }

    .header-cta {
      padding-inline: 0.95rem;
    }
  }

  @media (max-width: 62rem) {
    .site-header {
      grid-template-columns: 1fr auto;
    }

    .desktop-nav,
    .header-tools {
      display: none;
    }

    .header-mobile-tools {
      display: flex;
      align-items: center;
      justify-self: end;
      gap: 0.65rem;
    }

    .menu-toggle {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 0.38rem;
      width: 2.8rem;
      height: 2.8rem;
      place-content: center;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      background: rgba(7, 8, 12, 0.2);
      cursor: pointer;
    }

    .menu-toggle span:not(.sr-only) {
      display: block;
      width: 1rem;
      height: 1px;
      background: currentColor;
      transition: transform 0.35s var(--ease-out);
    }

    .menu-toggle[aria-expanded="true"] {
      color: var(--ink);
      border-color: rgba(7, 8, 12, 0.3);
      background: transparent;
    }

    .menu-toggle[aria-expanded="true"] span:nth-of-type(2) {
      transform: translateY(0.19rem) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-of-type(3) {
      transform: translateY(-0.19rem) rotate(-45deg);
    }

    .hero {
      background:
        linear-gradient(180deg, rgba(7, 8, 12, 0.25), rgba(7, 8, 12, 0.72) 50%, var(--ink) 89%),
        linear-gradient(90deg, rgba(7, 8, 12, 0.95), rgba(7, 8, 12, 0.05));
    }

    .hero__grid {
      display: block;
      min-height: calc(100svh - 7rem);
      padding-top: calc(var(--header-h) + var(--safe-top) + 11vh);
    }

    .hero__copy {
      max-width: 52rem;
    }

    .hero__title {
      font-size: clamp(4.4rem, 11.2vw, 7.5rem);
    }

    .hero__bottom {
      grid-template-columns: minmax(18rem, 31rem);
      gap: 1.5rem;
      padding-left: 12vw;
    }

    .hero__actions {
      align-items: center;
    }

    .hero__scene-meta {
      top: 16%;
      right: 0;
    }

    .hero__side-note {
      display: none;
    }

    .statement__inner,
    .stack__head {
      grid-template-columns: 1fr;
    }

    .audience-fit__head {
      grid-template-columns: 1fr;
    }

    .career-lessons__head {
      grid-template-columns: 1fr;
    }

    .career-lessons__head .display-heading {
      margin-top: 2.5rem;
    }

    .career-lessons__head > p:last-child {
      max-width: 36rem;
      margin-top: 1.5rem;
      margin-left: 12vw;
    }

    .career-lessons__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audience-fit__head .display-heading {
      margin-top: 2.5rem;
    }

    .audience-fit__head > p:last-child {
      max-width: 34rem;
      margin-top: 1.5rem;
      margin-left: 12vw;
    }

    .statement__heading,
    .stack__head .display-heading {
      margin-top: 2.5rem;
    }

    .statement__body {
      margin-left: 12vw;
    }

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

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

    .capability:nth-child(-n + 2) {
      border-bottom: 1px solid var(--line-dark);
    }

    .capability:last-child {
      grid-column: 1 / -1;
    }

    .system-journey__title {
      top: 18%;
    }

    .system-journey__summary {
      right: 0;
      bottom: 9%;
      width: 48vw;
    }

    .system-journey__core-label {
      top: 36%;
      left: 50%;
    }

    .projects__head {
      grid-template-columns: 1fr;
    }

    .projects__head .display-heading {
      margin-top: 2rem;
    }

    .projects__head > p:last-child {
      margin-top: 1rem;
    }

    .projects__list {
      grid-template-columns: 1fr;
    }

    .project-card--featured {
      grid-column: auto;
      min-height: 46rem;
    }

    .project-card--half {
      min-height: 42rem;
    }

    .project-visual--commerce {
      top: 8%;
      right: -3%;
      width: 58%;
      height: 61%;
    }

    .space-room__inner {
      grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 1.1fr);
      gap: 2rem;
    }

    .space-room h2,
    .space-room h3 {
      font-size: clamp(3.3rem, 7vw, 5.4rem);
    }

    .architecture-model,
    .flow-nexus {
      width: min(47vw, 35rem);
    }

    .scale-monolith {
      width: min(37vw, 28rem);
    }

    .spatial-progress {
      grid-template-columns: auto minmax(7rem, 14rem) auto 1fr;
    }

    .stack__stage {
      grid-template-columns: 1fr;
    }

    .stack-orbit {
      width: min(72vw, 35rem);
    }

    .about__intro {
      grid-template-columns: 1fr;
    }

    .about__statement {
      margin-top: 2rem;
    }

    .about__copy {
      max-width: 36rem;
      margin-left: 20vw;
      padding-top: 2rem;
    }

    .career-log__toolbar {
      align-items: flex-start;
    }

    .career-log__toolbar-meta {
      max-width: 22rem;
    }

    .career-event {
      grid-template-columns: 7.5rem 5.1rem minmax(0, 1fr);
    }

    .career-card__brands {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .career-forfairplay-media {
      grid-template-columns: 1fr;
      max-width: none;
    }

    .career-forfairplay-media .career-card__video {
      width: min(100%, 46rem);
      margin-inline: auto;
    }

    .career-forfairplay-media .career-widget-partners__grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: none;
      flex: none;
      align-content: normal;
    }

    .reviews__head {
      display: grid;
      gap: 2rem;
    }

    .contact__workspace {
      grid-template-columns: 1fr;
    }

    .contact-hub__links strong {
      font-size: 1rem;
    }

    .contact-map {
      min-height: 27rem;
    }

    .footer__inner {
      grid-template-columns: 1fr auto;
      min-height: 0;
      padding-block: 2rem;
    }

    .footer__legal {
      grid-row: 2;
      grid-column: 1 / -1;
      justify-self: start;
      max-width: 46rem;
    }

    .back-top {
      grid-row: 1;
      grid-column: 2;
    }

    .privacy__inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .privacy__header {
      position: static;
    }

    .privacy__header h1 {
      max-width: 12ch;
    }
  }

  @media (max-width: 44rem) {
    :root {
      --page-x: 1.15rem;
      --header-h: 4.7rem;
    }

    body {
      font-size: 0.95rem;
    }

    .brand {
      gap: 0.5rem;
    }

    .brand__mark {
      width: 3rem;
      height: 2.46rem;
    }

    .brand__name {
      width: clamp(6.7rem, 32vw, 7.6rem);
    }

    .site-header .brand {
      gap: 0.45rem;
    }

    .site-header .brand__mark {
      width: 2.75rem;
      height: 2.26rem;
    }

    .site-header .brand__name {
      width: clamp(6.35rem, 29.5vw, 7.05rem);
    }

    .brand--footer .brand__mark {
      width: 3.55rem;
      height: 2.9rem;
    }

    .brand--footer .brand__name {
      width: clamp(7.25rem, 34vw, 9rem);
    }

    .mobile-menu__meta {
      display: grid;
      gap: 0.5rem;
    }

    .hero__grid {
      padding-top: calc(var(--header-h) + var(--safe-top) + 8vh);
      padding-bottom: 10rem;
    }

    .hero__eyebrow {
      max-width: 16rem;
      line-height: 1.5;
    }

    .eyebrow__line {
      flex: 0 0 1.7rem;
    }

    .hero__title {
      font-size: clamp(3.55rem, 17.5vw, 5.7rem);
      line-height: 0.83;
    }

    .title-line--accent {
      padding-left: 1.4rem;
    }

    .hero__bottom {
      display: block;
      margin-top: 2rem;
      padding-left: 1.5rem;
    }

    .hero__lead {
      max-width: 23rem;
      font-size: 0.9rem;
    }

    .hero__actions {
      flex-wrap: wrap;
      gap: 0.7rem 1.2rem;
      margin-top: 1.6rem;
    }

    .button {
      min-height: 3.2rem;
      padding: 0 1.2rem;
    }

    .hero__scene-meta,
    .hero__scroll {
      display: none;
    }

    .hero__metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      height: 6.2rem;
    }

    .hero__metrics > div {
      display: grid;
      gap: 0;
      align-content: center;
      padding: 0 0.65rem;
    }

    .hero__metrics > div:first-child {
      padding-left: 0;
    }

    .metric__value {
      font-size: 1.55rem;
    }

    .metric__label {
      font-size: 0.42rem;
      line-height: 1.35;
    }

    .display-heading {
      font-size: clamp(2.85rem, 13.8vw, 4.8rem);
      line-height: 0.94;
    }

    .statement {
      padding-top: 7rem;
    }

    .statement__orbital-label {
      display: none;
    }

    .statement__body {
      margin-top: 2.5rem;
      margin-left: 1.5rem;
      font-size: 0.95rem;
    }

    .capability-grid {
      grid-template-columns: 1fr;
      margin-top: 5rem;
    }

    .capability {
      min-height: 22rem;
      border-right: 0;
      border-bottom: 1px solid var(--line-dark);
    }

    .capability__icon {
      width: 4.2rem;
      height: 4.2rem;
      margin-top: 2.1rem;
    }

    .capability h3 {
      margin-top: 2rem;
    }

    .ticker__track {
      font-size: 3.4rem;
    }

    .audience-fit {
      padding: 6.5rem 0;
    }

    .audience-fit__head > p:last-child {
      margin-left: 1.5rem;
    }

    .audience-fit__grid {
      grid-template-columns: 1fr;
      margin-top: 4rem;
    }

    .audience-card {
      min-height: 0;
      padding: 1.3rem;
    }

    .audience-card__head {
      min-height: 7rem;
    }

    .audience-card li {
      grid-template-columns: 1.35rem minmax(0, 1fr);
      padding: 1rem 0;
    }

    .career-lessons {
      padding: 6.5rem 0;
    }

    .career-lessons__head > p:last-child {
      margin-left: 1.5rem;
    }

    .career-lessons__grid {
      grid-template-columns: 1fr;
      margin-top: 4rem;
    }

    .career-lesson-card {
      min-height: 23rem;
      padding: 1.3rem;
    }

    .career-lesson-card h3 {
      margin-top: 3.5rem;
    }

    .career-lesson-dialog {
      width: calc(100% - 1rem);
      max-height: calc(100svh - 1rem);
    }

    .career-lesson-dialog__shell {
      max-height: calc(100svh - 1rem);
    }

    .career-lesson-dialog__topline {
      min-height: 4.5rem;
      padding-inline: 1rem;
    }

    .career-lesson-dialog__topline button {
      width: 2.35rem;
    }

    .career-lesson-dialog__controls {
      gap: 0.3rem;
    }

    .career-lesson-dialog__controls > span {
      min-width: 3.6rem;
      font-size: 0.48rem;
    }

    .career-lesson-dialog__topline .career-lesson-dialog__close {
      margin-left: 0.2rem;
    }

    .career-lesson-dialog__body {
      grid-template-columns: 1fr;
      gap: 1.25rem;
      padding: 1.4rem 1rem 2rem;
    }

    .career-lesson-dialog__body h2 {
      position: static;
      font-size: clamp(2.7rem, 13vw, 4.25rem);
    }

    .system-journey {
      height: 320vh;
    }

    .system-journey__kicker {
      top: calc(var(--header-h) + var(--safe-top) + 1.5rem);
    }

    .system-journey__title {
      top: max(8rem, 15%);
    }

    .system-journey__title h2 {
      font-size: 3.2rem;
    }

    .system-journey__summary {
      right: 0;
      bottom: 7%;
      left: 0;
      width: auto;
    }

    .journey-summary {
      grid-template-columns: 2rem 1fr;
      gap: 0.75rem;
      background: linear-gradient(180deg, rgba(7, 8, 12, 0.2), rgba(7, 8, 12, 0.92) 35%);
    }

    .system-journey__meter,
    .system-journey__core-label {
      display: none;
    }

    .projects {
      padding: 6rem 0;
    }

    .projects__head .display-heading {
      font-size: 3rem;
    }

    .projects__list {
      margin-top: 3.5rem;
    }

    .project-card,
    .project-card--featured,
    .project-card--half {
      min-height: 38rem;
      max-height: none;
    }

    .project-card__content {
      padding: 1.2rem;
    }

    .project-card__meta {
      font-size: 0.44rem;
    }

    .project-card__main,
    .project-card--half .project-card__main {
      margin-bottom: 6rem;
    }

    .project-card h3,
    .project-card--half h3 {
      font-size: 2.7rem;
    }

    .project-card__main > p:last-child {
      font-size: 0.76rem;
    }

    .project-card__tags {
      right: 1.2rem;
      bottom: 1.2rem;
      left: 1.2rem;
    }

    .project-visual--commerce {
      top: 11%;
      right: -21%;
      width: 85%;
      height: 45%;
      opacity: 0.7;
    }

    .project-visual--network {
      top: 7%;
      right: -12%;
      max-width: 69%;
    }

    .project-visual--terminal {
      top: 9%;
      right: -14%;
      width: 78%;
      opacity: 0.75;
    }

    .project-visual--leetgg {
      top: 10%;
      right: -22%;
      width: 94%;
      opacity: 0.68;
    }

    .spatial-journey {
      height: auto;
      min-height: 0;
    }

    .spatial-journey__sticky {
      position: relative;
      height: auto;
      min-height: 0;
      overflow: hidden;
    }

    .spatial-journey__atmosphere {
      inset: 0;
      transform: none;
    }

    .spatial-floor,
    .spatial-hud,
    .spatial-progress,
    .space-gate {
      display: none;
    }

    .spatial-viewport,
    .spatial-camera,
    .spatial-world {
      position: relative;
      inset: auto;
      width: auto;
      height: auto;
      transform: none !important;
    }

    .spatial-world {
      display: grid;
    }

    .space-room {
      width: 100%;
      min-height: 44rem;
      height: auto;
    }

    .space-room__inner {
      display: grid;
      grid-template-columns: 1fr;
      min-height: inherit;
      padding: 7rem 0 6rem;
    }

    .space-room__copy,
    .space-room__copy--right {
      grid-column: auto;
      justify-self: start;
      opacity: 1 !important;
      transform: none !important;
    }

    .space-room h2,
    .space-room h3 {
      font-size: clamp(3.05rem, 13.5vw, 4.4rem);
      line-height: 0.91;
    }

    .space-room__copy > p:not(.space-room__index) {
      max-width: 25rem;
      font-size: 0.8rem;
    }

    .space-room__frame {
      inset: 3rem 0.6rem;
      transform: none;
    }

    .architecture-model,
    .flow-nexus,
    .scale-monolith {
      position: absolute;
      top: 19%;
      right: -9rem;
      width: 27rem;
      opacity: 0.22 !important;
      transform: rotateX(-4deg) rotateY(-12deg) !important;
    }

    .flow-nexus {
      top: 18%;
      right: -10rem;
    }

    .scale-monolith {
      top: 12%;
      right: -8rem;
      width: 23rem;
    }

    .space-room__signals {
      max-width: 15rem;
    }

    .stack {
      padding: 6rem 0;
    }

    .stack__head .display-heading {
      font-size: 3rem;
    }

    .stack__stage {
      margin-top: 4rem;
    }

    .stack-orbit {
      width: 90vw;
      margin-left: -0.5rem;
    }

    .stack-group {
      grid-template-columns: 2rem 1fr;
      min-height: 6.2rem;
    }

    .stack-group__state {
      display: none;
    }

    .stack-group h3 {
      font-size: 0.93rem;
    }

    .about {
      padding: 6rem 0;
    }

    .about__statement {
      padding-top: 4rem;
    }

    .about__year {
      font-size: 7rem;
    }

    .about__statement h2 {
      font-size: 3rem;
    }

    .about__copy {
      margin-left: 1.5rem;
    }

    .career-log {
      margin-top: 4.5rem;
      border-radius: 1rem;
      background-size: 1.25rem 1.25rem;
    }

    .career-log__toolbar {
      display: grid;
      min-height: 0;
      padding: 1.1rem;
      gap: 0.9rem;
    }

    .career-log__repo {
      font-size: 0.69rem;
    }

    .career-log__toolbar-meta {
      max-width: none;
      justify-content: flex-start;
      font-size: 0.55rem;
    }

    .career-log__count {
      display: none;
    }

    .career-log__legend {
      display: grid;
      min-height: 0;
      padding: 0.85rem 1.1rem;
      justify-content: stretch;
      grid-template-columns: 1fr;
      gap: 0.55rem;
      font-size: 0.5rem;
    }

    .career-tree {
      padding: 0.65rem 0.75rem 1.15rem;
    }

    .career-event {
      grid-template-columns: 2.85rem minmax(0, 1fr);
      grid-template-areas:
        "graph date"
        "graph card";
    }

    .career-event__date {
      grid-area: date;
      padding: 1.05rem 0.25rem 0.2rem 0.65rem;
      text-align: left;
    }

    .career-event__date span {
      font-size: 0.68rem;
    }

    .career-event__date small {
      display: inline;
      margin: 0 0 0 0.45rem;
      font-size: 0.45rem;
    }

    .career-event__graph {
      grid-area: graph;
    }

    .career-card {
      grid-area: card;
      margin: 0.35rem 0 0.85rem 0.45rem;
      padding: 1.05rem;
      border-radius: 0.78rem;
      backdrop-filter: none;
    }

    .career-card::before {
      top: 0.8rem;
      bottom: 0.8rem;
    }

    .career-event:hover .career-card {
      transform: none;
    }

    .career-card__meta {
      font-size: 0.47rem;
    }

    .career-card__meta > span:last-child:not(.career-card__head-label) {
      display: none;
    }

    .career-card h3 {
      margin-top: 0.72rem;
      font-size: clamp(1.4rem, 7vw, 1.8rem);
      line-height: 1.05;
    }

    .career-card__company-logo {
      width: min(100%, 11rem);
      height: 4.35rem;
      margin-top: 0.72rem;
    }

    .career-card__company-logo--meboty {
      width: min(100%, 14rem);
      height: auto;
    }

    .career-card__company-logo--amiatex {
      width: min(100%, 15rem);
      height: auto;
    }

    .career-card > p {
      margin-top: 0.68rem;
      font-size: 0.76rem;
      line-height: 1.58;
    }

    .career-card__tags,
    .career-card__brands {
      margin-top: 0.9rem;
    }

    .career-card__brands {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .career-card__brands--employers {
      grid-template-columns: 1fr;
    }

    .career-practice {
      grid-template-columns: 1fr;
      margin-top: 0.95rem;
    }

    .career-practice__company {
      padding: 0.68rem;
    }

    .career-practice__logo {
      height: 4.25rem;
    }

    .career-card__brands--security {
      grid-template-columns: 1fr;
    }

    .career-card__brands li {
      padding: 0.62rem 0.4rem;
      font-size: 0.48rem;
    }

    .career-widget-partners {
      margin-top: 0.95rem;
      padding: 0.58rem;
    }

    .career-widget-partners__head {
      padding-bottom: 0.52rem;
    }

    .career-widget-partners__head small {
      display: none;
    }

    .career-widget-partners__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
    }

    .career-widget-partners__grid--three {
      grid-template-columns: 1fr;
    }

    .career-forfairplay-media .career-widget-partners__grid--three {
      grid-template-columns: 1fr;
    }

    .career-project-gallery {
      grid-template-columns: 1fr;
      margin-top: 0.65rem;
      gap: 0.65rem;
    }

    .career-widget-partner {
      height: 4.25rem;
    }

    .career-product-shot {
      margin-top: 0.95rem;
      padding: 0.22rem;
      border-radius: 0.68rem;
    }

    .career-product-shot__button,
    .career-product-shot img {
      border-radius: 0.48rem;
    }

    .gallery-lightbox__shell {
      padding: max(0.65rem, var(--safe-top)) 0.65rem max(0.65rem, var(--safe-bottom));
      gap: 0.55rem;
    }

    .gallery-lightbox__close,
    .gallery-lightbox__arrow {
      width: 2.75rem;
      height: 2.75rem;
    }

    .gallery-lightbox__close {
      top: max(0.65rem, var(--safe-top));
      right: max(0.65rem, var(--safe-right));
    }

    .gallery-lightbox__media img {
      border-radius: 0.5rem;
    }

    .gallery-lightbox__arrow--prev { left: 0.35rem; }
    .gallery-lightbox__arrow--next { right: 0.35rem; }

    .gallery-lightbox__bar {
      min-height: 2.2rem;
      padding: 0.6rem 0.2rem 0;
    }

    .gallery-lightbox__bar p {
      min-width: 0;
      overflow: hidden;
      font-size: 0.78rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .gallery-lightbox__bar span {
      flex: 0 0 auto;
      font-size: 0.65rem;
    }

    .career-security-brands {
      grid-template-columns: 1fr;
      margin-top: 0.95rem;
    }

    .career-security-brand {
      grid-template-columns: 7.5rem minmax(0, 1fr);
      grid-template-rows: 1fr;
      min-height: 4.25rem;
    }

    .career-security-brand__logo {
      width: 7.5rem;
      height: 4.25rem;
      min-height: 4.25rem;
      padding: 0.52rem 0.68rem;
      border-right: 1px solid rgba(38, 25, 51, 0.09);
      border-bottom: 0;
    }

    .career-security-brand > div:last-child {
      display: flex;
      padding: 0.65rem 0.72rem;
      justify-content: center;
      flex-direction: column;
    }

    .career-security-findings ul {
      grid-template-columns: 1fr;
    }

    .career-security-findings li {
      padding: 0.68rem;
    }

    .career-card > .career-security-more {
      display: block;
      padding: 0.65rem 0.72rem;
      font-size: 0.51rem;
    }

    .career-security-more span {
      width: max-content;
      margin-bottom: 0.38rem;
    }

    .career-employers {
      grid-template-columns: 1fr;
      margin-top: 0.95rem;
    }

    .career-employer {
      min-height: 0;
    }

    .career-employer__head {
      grid-template-columns: 6.75rem minmax(0, 1fr);
      padding: 0.72rem;
      gap: 0.62rem;
    }

    .career-employer__logo {
      width: 100%;
      height: 3.25rem;
      padding: 0.52rem 0.65rem;
      border-radius: 0.58rem;
    }

    .career-employer__identity > strong {
      font-size: 0.7rem;
    }

    .career-employer__identity > span {
      font-size: 0.57rem;
    }

    .career-employer__roles {
      padding-inline: 0.72rem;
    }

    .career-role {
      grid-template-columns: 4.65rem minmax(0, 1fr);
      gap: 0.5rem;
    }

    .career-role__period {
      padding-inline: 0.34rem;
      font-size: 0.43rem;
    }

    .reviews {
      padding: 5rem 0;
    }

    .reviews__head h2 {
      font-size: 3.1rem;
    }

    .review-card {
      width: 82vw;
      min-height: 18rem;
      padding: 1.25rem;
    }

    .review-card blockquote {
      font-size: 1.65rem;
    }

    .contact {
      min-height: auto;
      padding: 6rem 0 5rem;
    }

    .contact h2 {
      font-size: clamp(3.25rem, 15.5vw, 5.1rem);
      line-height: 0.9;
    }

    .contact__intro-bottom {
      display: grid;
      justify-items: start;
      gap: 1.5rem;
    }

    .contact__decision {
      position: static;
      width: 100%;
      justify-items: start;
    }

    .project-triangle {
      width: min(100%, 30rem);
    }

    .contact__workspace {
      width: calc(100% + 0.7rem);
      margin-top: 3.5rem;
      margin-left: -0.35rem;
      padding: 0.35rem;
    }

    .contact-form {
      padding: 1.3rem 1.1rem 1.5rem;
    }

    .contact-form__head {
      padding-bottom: 2rem;
    }

    .contact-form__direct a {
      grid-template-columns: minmax(0, 1fr) 2rem;
      gap: 0.3rem 0.75rem;
    }

    .contact-form__direct small {
      grid-column: 1 / -1;
    }

    .contact-form__direct strong {
      font-size: clamp(1.05rem, 6vw, 1.4rem);
    }

    .contact-form__direct-phone strong {
      font-size: 1.05rem;
    }

    .contact-form__grid {
      grid-template-columns: 1fr;
    }

    .contact-field--wide {
      grid-column: auto;
    }

    .contact-field textarea {
      min-height: 7rem;
    }

    .contact-form__actions {
      display: grid;
      gap: 1rem;
    }

    .contact-form__submit {
      width: 100%;
      min-width: 0;
    }

    .contact-form__note {
      max-width: none;
    }

    .contact-hub {
      padding: 1rem;
    }

    .contact-hub__head,
    .contact-hub__meta {
      line-height: 1.5;
    }

    .contact-hub__links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-hub__links a {
      min-height: 6.5rem;
      padding: 0.85rem;
    }

    .contact-hub__links a:nth-child(even) {
      border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .contact-hub__links a:nth-child(n + 3) {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .contact-map {
      min-height: 23rem;
    }

    .contact-map__label {
      right: 0.7rem;
      bottom: 0.7rem;
      left: 0.7rem;
    }

    .contact-hub__meta {
      display: grid;
      gap: 0.35rem;
    }

    .footer__inner {
      min-height: 7rem;
      gap: 1.5rem;
    }

    .footer__legal {
      font-size: 0.52rem;
    }

    .footer__legal p {
      font-size: 0.54rem;
    }

    .footer__copyright {
      display: none;
    }
  }

  @media (max-width: 24rem) {
    .site-header .brand__name {
      width: 6.1rem;
    }
  }

  @media (hover: none), (pointer: coarse) {
    .fx-layer {
      display: none;
    }

    .project-card {
      transform: none !important;
    }

    .career-product-shot__zoom {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.reduced-motion .noise,
  body.reduced-motion .hero__scroll,
  body.reduced-motion .data-pulse {
    display: none;
  }

  body.reduced-motion *,
  body.reduced-motion *::before,
  body.reduced-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.reduced-motion .fx-surface:is(:hover, :focus-within) > .fx-layer > .fx-layer__orbit,
  body.reduced-motion .fx-control:is(:hover, :focus-visible, :focus-within) > .fx-layer > .fx-layer__orbit {
    animation: none !important;
  }

  body.reduced-motion .fx-surface:is(:hover, :focus-within) > .fx-layer,
  body.reduced-motion .fx-control:is(:hover, :focus-visible, :focus-within) > .fx-layer {
    opacity: 0.72;
  }

  @media (prefers-reduced-motion: reduce) {
    .fx-surface:is(:hover, :focus-within) > .fx-layer > .fx-layer__orbit,
    .fx-control:is(:hover, :focus-visible, :focus-within) > .fx-layer > .fx-layer__orbit {
      animation: none;
    }
  }

  html.reduced-motion {
    scroll-behavior: auto;
  }

  body.reduced-motion .spatial-journey {
    height: auto;
    min-height: 0;
  }

  body.reduced-motion .spatial-journey__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  body.reduced-motion .spatial-viewport,
  body.reduced-motion .spatial-camera,
  body.reduced-motion .spatial-world {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    transform: none !important;
  }

  body.reduced-motion .spatial-world {
    display: grid;
  }

  body.reduced-motion .space-room {
    width: 100%;
    min-height: 44rem;
    height: auto;
  }

  body.reduced-motion .space-room__inner {
    min-height: inherit;
  }

  body.reduced-motion .space-room__copy {
    opacity: 1 !important;
    transform: none !important;
  }

  body.reduced-motion .architecture-model,
  body.reduced-motion .flow-nexus,
  body.reduced-motion .scale-monolith {
    opacity: 0.72 !important;
  }

  body.reduced-motion .spatial-journey__atmosphere,
  body.reduced-motion .spatial-stars {
    transform: none !important;
  }

  body.reduced-motion .architecture-model {
    transform: translate3d(0, 0, 7rem) rotateX(-6deg) rotateY(-9deg) !important;
  }

  body.reduced-motion .flow-nexus {
    transform: translate3d(0, 0, 8rem) rotateX(3deg) rotateY(8deg) !important;
  }

  body.reduced-motion .scale-monolith {
    transform: translate3d(0, 0, 8rem) rotateX(-3deg) rotateY(-12deg) !important;
  }

  body.reduced-motion .space-gate,
  body.reduced-motion .spatial-hud,
  body.reduced-motion .spatial-progress,
  body.reduced-motion .spatial-floor {
    display: none;
  }

  body.reduced-motion .system-journey {
    height: auto;
    padding: 8rem 0;
    background: var(--ink);
  }

  body.reduced-motion .system-journey__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.reduced-motion .system-journey__grid {
    height: auto;
    transform: none !important;
  }

  body.reduced-motion .system-journey__kicker,
  body.reduced-motion .system-journey__title,
  body.reduced-motion .system-journey__summary {
    position: static;
  }

  body.reduced-motion .system-journey__title {
    margin-top: 3rem;
  }

  body.reduced-motion .journey-titles {
    display: grid;
    min-height: 0;
    gap: 0.65rem;
    margin-top: 1rem;
  }

  body.reduced-motion .journey-title {
    position: relative;
    opacity: 1;
    transform: none;
  }

  body.reduced-motion .system-journey__summary {
    width: auto;
    margin-top: 4rem;
  }

  body.reduced-motion .journey-summary {
    padding: 2rem 0;
  }

  body.reduced-motion .system-journey__meter,
  body.reduced-motion .system-journey__core-label {
    display: none;
  }

  body.reduced-motion [data-reveal],
  body.reduced-motion [data-hero-reveal] {
    opacity: 1;
    transform: none;
  }

  body.reduced-motion .stack-orbit {
    transform: none !important;
  }

  @media (max-height: 42rem) {
    .spatial-journey {
      height: auto;
      min-height: 0;
    }

    .spatial-journey__sticky {
      position: relative;
      height: auto;
      min-height: 0;
      overflow: hidden;
    }

    .spatial-viewport,
    .spatial-camera,
    .spatial-world {
      position: relative;
      inset: auto;
      width: auto;
      height: auto;
      transform: none !important;
    }

    .spatial-world { display: grid; }

    .space-room {
      width: 100%;
      min-height: 32rem;
      height: auto;
    }

    .space-room__inner { min-height: inherit; padding-block: 5rem; }
    .space-room__copy { opacity: 1 !important; transform: none !important; }

    .space-gate,
    .spatial-hud,
    .spatial-progress,
    .spatial-floor { display: none; }

    .system-journey {
      height: auto;
      padding: 7rem 0;
      background: var(--ink);
    }

    .system-journey__sticky {
      position: relative;
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .system-journey__grid {
      height: auto;
    }

    .system-journey__kicker,
    .system-journey__title,
    .system-journey__summary {
      position: static;
    }

    .system-journey__title {
      margin-top: 2.5rem;
    }

    .journey-titles {
      display: grid;
      min-height: 0;
      gap: 0.65rem;
      margin-top: 1rem;
    }

    .journey-title {
      position: relative;
      opacity: 1;
      transform: none;
    }

    .system-journey__summary {
      width: auto;
      margin-top: 3.5rem;
    }

    .journey-summary {
      padding: 1.75rem 0;
      background: transparent;
    }

    .system-journey__meter,
    .system-journey__core-label {
      display: none;
    }
  }

  @media (max-width: 62rem) and (max-height: 36rem) {
    .mobile-menu {
      align-content: start;
      padding-top: calc(var(--header-h) + var(--safe-top) + 0.75rem);
      padding-bottom: max(1.25rem, var(--safe-bottom));
    }

    .mobile-menu nav a {
      padding: 0.05rem 0;
      font-size: clamp(2rem, 9vh, 2.6rem);
      line-height: 0.9;
    }

    .mobile-menu__meta {
      position: static;
      display: flex;
      gap: 1rem;
      margin-top: 1.25rem;
      padding-top: 0.75rem;
    }
  }
}