:root {
      --second-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  html,
  body {
      height: 100%;
  }


  body {
      margin: 0;
      background: #31313f;
      color: var(--main-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
  }

  header {
      flex: 0 0 auto;
  }

  .page-404 {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
  }

  .page-404 .topbar {
      position: relative;
      z-index: 2;
      padding: 18px 0 0;
  }

  .page-404 .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
  }

  .page-404 .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
  }

  .page-404 .logo .mark {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--brand-green);
      box-shadow: 0 0 16px rgba(79, 206, 107, .55);
  }

  .page-404 .logo .text {
      font-weight: 700;
      letter-spacing: .2px;
  }

  .page-404 .crumbs {
      opacity: .9;
      font-size: 14px;
      color: #fff;
      display: flex;
      gap: 8px;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .page-404 .crumbs a {
      color: #fff;
      opacity: .95;
      transition: color .15s ease, opacity .15s ease;
  }

  .page-404 .crumbs a:hover {
      color: var(--brand-green);
      opacity: 1;
  }

  .page-404 .content {
      position: relative;
      z-index: 2;
      padding: 34px 0 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
  }

  .page-404 .card {
      width: 100%;
      max-width: 980px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 26px;
      padding: 26px 22px;
      backdrop-filter: blur(8px);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
      overflow: hidden;
  }

  .page-404 .grid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
  }

  .page-404 h1 {
      margin: 0 0 12px;
      font-size: 44px;
      line-height: 1.1;
      color: #fff;
  }

  .page-404 .lead {
      margin: 0 0 18px;
      font-size: 18px;
      line-height: 1.5;
      color: #fff;
      opacity: .92;
      max-width: 520px;
  }

  .page-404 .meta {
      margin: 0 0 20px;
      font-size: 14px;
      line-height: 1.4;
      color: #fff;
      opacity: .72;
      word-break: break-all;
  }

  .page-404 .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 30px;
      font-weight: 700;
      font-size: 15px;
      border: 2px solid transparent;
      transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
      user-select: none;
      cursor: pointer;
      white-space: nowrap;
  }

  .btn:active {
      transform: translateY(1px);
  }

  .btn-primary {
      background: var(--brand-orange);
      color: #fff;
      border-color: var(--brand-orange);
  }

  .btn-primary:hover {
      background: var(--brand-orange-hover);
      border-color: var(--brand-orange-hover);
  }

  .btn-outline {
      background: transparent;
      color: var(--brand-orange);
      border-color: var(--brand-orange);
  }

  .btn-outline:hover {
      background: var(--brand-orange);
      color: #fff;
  }

  .btn-ghost {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .12);
      color: #fff;
  }

  .btn-ghost:hover {
      border-color: rgba(39, 167, 66, .7);
      box-shadow: 0 0 0 4px rgba(39, 167, 66, .15);
  }

  .icon-wrap {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 320px;
  }

  .icon {
      width: 320px;
      max-width: 100%;
      height: auto;
      overflow: visible;
  }

  .glow-core {
      filter: drop-shadow(0 0 22px rgba(79, 206, 107, .75)) drop-shadow(0 0 58px rgba(79, 206, 107, .55)) drop-shadow(0 0 110px rgba(79, 206, 107, .35));
      animation: glowPulse 1.8s ease-in-out infinite;
  }

  .scanline {
      animation: float 8s ease-in-out infinite;
      transform-origin: center;
      opacity: .9;
  }

  .footer {
      position: relative;
      z-index: 2;
      padding: 12px 0 22px;
      color: #fff;
      opacity: .6;
      font-size: 12px;
  }

  .bg-folder::after {
      display: none;
  }

  @media (max-width: 1024px) {
      .page-404 h1 {
          font-size: 36px;
      }

      .icon-wrap {
          min-width: 240px;
      }

      .icon {
          width: 260px;
      }

      .page-404 .grid {
          flex-direction: column-reverse;
          text-align: center;
      }

      .page-404 .lead {
          margin-left: auto;
          margin-right: auto;
      }

      .page-404 .actions {
          justify-content: center;
      }
  }

  @media (max-width: 480px) {
      .page-404 .content {
          padding: 32px 0;
      }

      .page-404 h1 {
          font-size: 22px;
      }

      .page-404 .lead {
          font-size: 14px;
      }

      .page-404 .grid {
          gap: 8px;
      }

      .btn {
          width: 100%;
      }

      .page-404 .crumbs {
          display: none;
      }

      .page-404 .card {
          padding:16px;
          border-radius: 22px;
      }

      .icon {
          width: 160px;
          height: 160px;
      }
  }