:root {
      --glass: rgba(255,255,255,.56);
      --glass-border: rgba(255,255,255,.78);
    }
    html, body { scroll-behavior: smooth; }
    body {
      font-family: "Manrope", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background:
        linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.22) 0%,
          rgba(168, 85, 247, 0.16) 36%,
          rgba(34, 211, 238, 0.16) 70%,
          rgba(99, 102, 241, 0.11) 100%
        ),
        #f5f8ff;
      color: #0f172a;
      overflow-x: hidden;
    }
    body.page-loading:not(.page-loaded) {
      overflow: hidden;
    }
    main,
    footer {
      transition:
        opacity .68s ease,
        transform .82s cubic-bezier(0.18, 0.89, 0.32, 1.1),
        filter .62s ease;
    }
    body.page-loading main,
    body.page-loading footer {
      opacity: 0;
      transform: translate3d(0, 22px, 0) scale(0.99);
      filter: blur(7px);
    }
    body.page-loading.page-loaded main,
    body.page-loading.page-loaded footer {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      background:
        radial-gradient(circle at 50% 42%, rgba(79, 116, 255, 0.20), transparent 55%),
        radial-gradient(circle at 50% 55%, rgba(6, 193, 255, 0.14), transparent 64%),
        rgba(245, 248, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: opacity .55s ease, visibility .55s ease;
    }
    body.page-loading.page-loaded #preloader {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .preloader-core {
      position: relative;
      width: 108px;
      height: 108px;
      border-radius: 999px;
      display: grid;
      place-items: center;
    }
    .preloader-ring {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      border: 3px solid rgba(79, 116, 255, 0.18);
      border-top-color: rgba(79, 116, 255, 0.92);
      border-right-color: rgba(6, 193, 255, 0.88);
      animation: preloaderSpin 1s linear infinite;
    }
    .preloader-ring::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 999px;
      border: 2px solid rgba(25, 200, 143, 0.24);
      border-bottom-color: rgba(25, 200, 143, 0.92);
      animation: preloaderSpin 1.45s linear infinite reverse;
    }
    .preloader-logo {
      width: 58px;
      height: 58px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
      box-shadow:
        0 10px 24px rgba(79, 116, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      animation: preloaderPulse 1.9s ease-in-out infinite;
    }
    .preloader-logo i {
      font-size: 28px;
      color: rgba(25, 200, 143, 0.94);
      transform: translateY(1px);
    }
    @keyframes preloaderSpin {
      to { transform: rotate(360deg); }
    }
    @keyframes preloaderPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    .display-font {
      font-family: "Sora", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      letter-spacing: -0.02em;
    }
    .tech-font {
      font-family: "Orbitron", "Sora", "SF Pro Display", sans-serif;
      letter-spacing: 0.08em;
    }
    .glass {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
    }
    .title-gradient {
      background-image: linear-gradient(120deg, #3458ff, #09b9ff, #4f74ff, #5f46ff);
      background-size: 220% 220%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientShift 10s ease infinite;
    }
    .reveal {
      opacity: 0;
      transform: translate3d(0, 28px, 0) scale(0.985);
      filter: blur(5px);
      transition:
        transform .82s cubic-bezier(0.18, 0.89, 0.32, 1.18),
        opacity .62s ease,
        filter .62s ease;
      will-change: transform, opacity, filter;
    }
    .reveal.reveal-left {
      transform: translate3d(-52px, 14px, 0) scale(0.972);
    }
    .reveal.reveal-right {
      transform: translate3d(52px, 14px, 0) scale(0.972);
    }
    .reveal.reveal-up {
      transform: translate3d(0, 56px, 0) scale(0.972);
    }
    .reveal.reveal-down {
      transform: translate3d(0, -220px, 0) scale(0.968);
    }
    .reveal.show {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
    /* Для блока mock отключаем filter-клиппинг, чтобы glow сверху/снизу не обрезался */
    .reveal.reveal-no-filter,
    .reveal.reveal-no-filter.show {
      filter: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal,
      .reveal.reveal-left,
      .reveal.reveal-right,
      .reveal.reveal-up,
      .reveal.reveal-down {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
      }
    }
    .bg-noise {
      pointer-events: none;
      position: fixed;
      inset: 0;
      opacity: .08;
      mix-blend-mode: soft-light;
      background-image: url('./assets/noise.svg');
      background-size: 280px 280px;
      z-index: 1;
    }
    .parallax-layer {
      position: absolute;
      will-change: transform;
      transition: transform .2s ease-out;
      pointer-events: none;
      z-index: 0;
    }