.js-enabled .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 520ms ease,
          transform 520ms ease;
        transition-delay: var(--reveal-delay, 0ms);
      }

      .js-enabled .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .js-enabled .slide-reveal {
        opacity: 0;
        transition:
          opacity 560ms ease,
          transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform;
      }

      .js-enabled .slide-left {
        transform: translateX(-34px);
      }

      .js-enabled .slide-right {
        transform: translateX(34px);
      }

      .js-enabled .slide-reveal.is-visible {
        opacity: 1;
        transform: translateX(0);
      }

      .tilt-card {
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        --tilt-lift: 0px;
        --tilt-depth: 0px;
        transform-style: preserve-3d;
        translate: var(--card-parallax-x) var(--card-parallax-y);
        transition:
          transform 190ms cubic-bezier(0.2, 0.7, 0.2, 1),
          border-color 160ms ease,
          box-shadow 160ms ease;
        will-change: transform;
      }

      html:not(.js-enabled) .tilt-card,
      .js-enabled .slide-reveal.is-visible.tilt-card {
        transform: perspective(860px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
          translate3d(0, var(--tilt-lift), var(--tilt-depth));
      }

      .tilt-card:hover {
        --tilt-lift: -5px;
        --tilt-depth: 12px;
        border-color: rgba(0, 229, 255, 0.46);
        box-shadow:
          0 18px 42px rgba(0, 0, 0, 0.3),
          0 0 34px rgba(0, 229, 255, 0.14);
      }

      .tilt-card > * {
        transform: translateZ(18px);
      }

      .process-fade {
        opacity: var(--process-opacity, 1);
        transform: translateY(var(--process-shift, 0px));
        filter: blur(var(--process-blur, 0px));
        will-change: opacity, transform, filter;
      }

      body.preloader-active {
        overflow: hidden;
      }

      .system-preloader {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 50% 42%, rgba(0, 151, 219, 0.12), transparent 32%),
          linear-gradient(180deg, #05090e, #020407);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
          opacity 420ms ease,
          visibility 0s linear 420ms;
        animation: preloader-failsafe 0s linear 8s forwards;
      }

      .system-preloader.is-running {
        animation: none;
      }

      .system-preloader.preloader-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .preloader-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: radial-gradient(circle at center, #000 0 48%, transparent 88%);
        pointer-events: none;
      }

      .preloader-console {
        position: relative;
        z-index: 1;
        width: min(calc(100% - 32px), 720px);
        border: 1px solid rgba(0, 229, 255, 0.3);
        border-radius: 10px;
        padding: clamp(24px, 5vw, 48px);
        background: rgba(4, 10, 16, 0.86);
        box-shadow:
          0 30px 90px rgba(0, 0, 0, 0.5),
          0 0 38px rgba(0, 229, 255, 0.1);
        overflow: hidden;
      }

      .preloader-console::before {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(
          180deg,
          transparent,
          rgba(0, 229, 255, 0.035) 48%,
          transparent 52%
        );
        background-size: 100% 18px;
        pointer-events: none;
      }

      .preloader-kicker,
      .preloader-status {
        position: relative;
        margin: 0;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .preloader-kicker {
        color: var(--muted-dark);
      }

      .preloader-percentage {
        position: relative;
        margin: 18px 0 14px;
        color: #f5fbff;
        font-family: var(--font-mono);
        font-size: clamp(3.4rem, 11vw, 7rem);
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 0 24px rgba(0, 229, 255, 0.18);
      }

      .preloader-progress {
        position: relative;
        height: 2px;
        background: rgba(123, 168, 201, 0.16);
        overflow: hidden;
      }

      .preloader-progress span {
        display: block;
        width: 0;
        height: 100%;
        background: var(--accent);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.72);
        transform-origin: left;
      }

      .preloader-logs {
        position: relative;
        display: grid;
        min-height: 118px;
        align-content: end;
        gap: 4px;
        margin: 22px 0 18px;
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: clamp(0.62rem, 1.5vw, 0.76rem);
        line-height: 1.35;
        overflow: hidden;
      }

      .preloader-log-line {
        margin: 0;
        opacity: 0.78;
      }

      .preloader-log-line:last-child {
        color: #dffcff;
        opacity: 1;
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.32);
      }

      .preloader-status {
        color: var(--muted);
      }

      .preloader-status.is-ready {
        color: var(--accent);
        text-shadow: 0 0 12px rgba(0, 229, 255, 0.36);
      }

      .hero-assembly-item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      body.hero-assembly-pending .hero-assembly-item {
        opacity: 0;
        transform: translate3d(var(--assembly-x, 0), var(--assembly-y, 0), 0);
      }

      body.app-ready .hero-assembly-item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition:
          opacity 620ms ease var(--assembly-delay, 0ms),
          transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--assembly-delay, 0ms);
        will-change: opacity, transform;
      }

      .hero-assembly-left {
        --assembly-x: -34px;
      }

      .hero-assembly-right {
        --assembly-x: 38px;
      }

      .hero-assembly-up {
        --assembly-y: 24px;
      }

      .glitch-title.is-glitching::before {
        animation: title-glitch-before 420ms steps(1, end) 1;
      }

      .glitch-title.is-glitching::after {
        animation: title-glitch-after 420ms steps(1, end) 1;
      }

      .glitch-title.is-strong-glitch {
        animation: title-core-burst 520ms steps(1, end) 1;
      }

      .glitch-title.is-strong-glitch::before {
        animation: title-glitch-strong-before 520ms steps(1, end) 1;
      }

      .glitch-title.is-strong-glitch::after {
        animation: title-glitch-strong-after 520ms steps(1, end) 1;
      }

      .technical-cursor {
        display: none;
      }

      @media (pointer: fine) {
        html.custom-cursor-enabled,
        html.custom-cursor-enabled * {
          cursor: none !important;
        }

        html.custom-cursor-enabled .technical-cursor {
          --cursor-scale: 1;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 3000;
          display: block;
          width: 26px;
          height: 26px;
          opacity: 0;
          pointer-events: none;
          transform: translate3d(var(--cursor-screen-x, -40px), var(--cursor-screen-y, -40px), 0)
            translate(-50%, -50%) scale(var(--cursor-scale));
          transition:
            opacity 120ms ease,
            filter 150ms ease;
          will-change: transform;
        }

        html.custom-cursor-enabled .technical-cursor.is-visible {
          opacity: 0.88;
        }

        .technical-cursor-ring {
          position: absolute;
          inset: 3px;
          border: 1px solid rgba(0, 229, 255, 0.86);
          border-radius: 50%;
          box-shadow: 0 0 9px rgba(0, 229, 255, 0.28);
          transition:
            inset 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease;
        }

        .technical-cursor-ring::before,
        .technical-cursor-ring::after {
          position: absolute;
          top: 50%;
          left: 50%;
          content: "";
          background: var(--accent);
          box-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
          transform: translate(-50%, -50%);
        }

        .technical-cursor-ring::before {
          width: 30px;
          height: 1px;
        }

        .technical-cursor-ring::after {
          width: 1px;
          height: 30px;
        }

        .technical-cursor-dot {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background: #e8fcff;
          box-shadow: 0 0 7px var(--accent);
          transform: translate(-50%, -50%);
        }

        .technical-cursor.is-interactive {
          --cursor-scale: 1.18;
          filter: brightness(1.3);
        }

        .technical-cursor.is-interactive .technical-cursor-ring {
          inset: 1px;
          border-color: #dffcff;
          box-shadow:
            0 0 10px rgba(0, 229, 255, 0.48),
            0 0 22px rgba(0, 229, 255, 0.2);
          animation: cursor-lock-pulse 720ms ease-in-out infinite alternate;
        }

        .technical-cursor.is-pressed {
          --cursor-scale: 0.88;
        }
      }

      @property --glow-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }

      @keyframes border-run {
        to {
          --glow-angle: 360deg;
        }
      }

      @keyframes edge-flow {
        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes node-pulse {
        0%,
        100% {
          opacity: 0.58;
          transform: scale(0.82);
        }

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

      @keyframes data-stream {
        to {
          transform: translate3d(var(--parallax-x), calc(var(--parallax-y) + 28%), 0);
        }
      }

      @keyframes radar-sweep {
        0% {
          opacity: 0;
          transform: translateY(-100%);
        }

        10% {
          opacity: 0.32;
          transform: translateY(-92%);
        }

        76% {
          opacity: 0.32;
          transform: translateY(-10%);
        }

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

      @keyframes title-glitch-before {
        0%,
        100% {
          clip-path: inset(0 0 0 0);
          opacity: 0;
          transform: translate(0);
        }

        18% {
          clip-path: inset(14% 0 62% 0);
          opacity: 0.66;
          transform: translate(3px, -1px);
        }

        42% {
          clip-path: inset(58% 0 18% 0);
          opacity: 0.5;
          transform: translate(-2px, 1px);
        }

        68% {
          clip-path: inset(34% 0 42% 0);
          opacity: 0.42;
          transform: translate(1px);
        }
      }

      @keyframes title-glitch-after {
        0%,
        100% {
          clip-path: inset(0 0 0 0);
          opacity: 0;
          transform: translate(0);
        }

        22% {
          clip-path: inset(64% 0 10% 0);
          opacity: 0.44;
          transform: translate(-3px, 1px);
        }

        48% {
          clip-path: inset(22% 0 54% 0);
          opacity: 0.5;
          transform: translate(2px, -1px);
        }

        72% {
          clip-path: inset(44% 0 30% 0);
          opacity: 0.36;
          transform: translate(-1px);
        }
      }

      @keyframes title-core-burst {
        0%,
        100% {
          text-shadow: none;
          transform: translateX(0);
        }

        18% {
          text-shadow:
            4px 0 rgba(0, 229, 255, 0.64),
            -3px 0 rgba(0, 123, 189, 0.52);
          transform: translateX(2px);
        }

        32% {
          transform: translateX(-2px);
        }

        54% {
          text-shadow:
            -3px 0 rgba(0, 229, 255, 0.55),
            2px 0 rgba(109, 178, 218, 0.48);
          transform: translateX(1px);
        }
      }

      @keyframes title-glitch-strong-before {
        0%,
        100% {
          clip-path: inset(0);
          opacity: 0;
          transform: translate(0);
        }

        14% {
          clip-path: inset(8% 0 62% 0);
          opacity: 0.82;
          transform: translate(6px, -2px);
        }

        38% {
          clip-path: inset(48% 0 18% 0);
          opacity: 0.68;
          transform: translate(-5px, 2px);
        }

        64% {
          clip-path: inset(26% 0 44% 0);
          opacity: 0.52;
          transform: translate(3px);
        }
      }

      @keyframes title-glitch-strong-after {
        0%,
        100% {
          clip-path: inset(0);
          opacity: 0;
          transform: translate(0);
        }

        20% {
          clip-path: inset(66% 0 7% 0);
          opacity: 0.7;
          transform: translate(-6px, 2px);
        }

        44% {
          clip-path: inset(18% 0 58% 0);
          opacity: 0.62;
          transform: translate(5px, -1px);
        }

        70% {
          clip-path: inset(42% 0 28% 0);
          opacity: 0.48;
          transform: translate(-3px);
        }
      }

      @keyframes cursor-lock-pulse {
        to {
          box-shadow:
            0 0 13px rgba(0, 229, 255, 0.58),
            0 0 28px rgba(0, 229, 255, 0.24);
        }
      }

      @keyframes preloader-failsafe {
        to {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
      }
