/* ===== FONTS ===== */
    @font-face {
      font-family: "CandaraCustom";
      src: url("../fonts/candara-light.ttf") format("truetype");
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "CandaraCustom";
      src: url("../fonts/candara-regular.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "CandaraCustom";
      src: url("../fonts/candara-bold.ttf") format("truetype");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ===== RESET ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "CandaraCustom", Arial, sans-serif;
      background: #fff;
      color: #3F3F46;
    }

    img {
      display: block;
      max-width: 100%;
    }

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

    /* ===== CONTAINER ===== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 30px;
    }

    /* ===== 404 ===== */
    .error-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 40px 0;
    }

    .error-page__hero {
      position: relative;
      width: 100%;
      min-height: 620px;
      border-radius: 12px;
      overflow: hidden;

      display: flex;
      align-items: flex-end;

      background: #1f1f22;
    }

    .error-page__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .error-page__overlay {
      position: absolute;
      inset: 0;

      background:
        linear-gradient(to top,
          rgba(0, 0, 0, 0.78) 0%,
          rgba(0, 0, 0, 0.38) 45%,
          rgba(0, 0, 0, 0.12) 100%);
    }

    .error-page__content {
      position: relative;
      z-index: 2;

      padding: 56px;
      max-width: 620px;

      color: #fff;
    }

    .error-page__line {
      width: 52px;
      height: 4px;
      background: #E5A600;
      margin-bottom: 26px;
    }

    .error-page__code {
      font-size: 120px;
      line-height: 0.9;
      font-weight: 700;
      color: #E5A600;
      margin-bottom: 18px;
    }

    .error-page__title {
      font-size: 46px;
      line-height: 1.05;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .error-page__text {
      font-size: 18px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 34px;
    }

    .error-page__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .error-page__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 210px;
      min-height: 56px;

      padding: 16px 28px;

      border-radius: 4px;

      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;

      transition:
        transform 0.25s ease,
        opacity 0.25s ease,
        background 0.25s ease;
    }

    .error-page__btn:hover {
      transform: translateY(-2px);
    }

    .error-page__btn--primary {
      background: #E5A600;
      color: #3F3F46;
    }

    .error-page__btn--primary:hover {
      opacity: 0.88;
    }

    .error-page__btn--secondary {
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.06);
      color: #fff;

      backdrop-filter: blur(6px);
    }

    .error-page__btn--secondary:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    /* ===== TABLET ===== */
    @media (max-width: 1024px) {
      .error-page__hero {
        min-height: 540px;
      }

      .error-page__code {
        font-size: 96px;
      }

      .error-page__title {
        font-size: 38px;
      }
    }

    /* ===== MOBILE ===== */
    @media (max-width: 768px) {
      .container {
        padding: 0 20px;
      }

      .error-page {
        padding: 20px 0;
      }

      .error-page__hero {
        min-height: 520px;
      }

      .error-page__content {
        padding: 32px 24px;
      }

      .error-page__code {
        font-size: 74px;
        margin-bottom: 14px;
      }

      .error-page__title {
        font-size: 28px;
        margin-bottom: 18px;
      }

      .error-page__text {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 28px;
      }

      .error-page__actions {
        flex-direction: column;
      }

      .error-page__btn {
        width: 100%;
      }
    }

    /* ===== SMALL MOBILE ===== */
    @media (max-width: 480px) {
      .container {
        padding: 0 14px;
      }

      .error-page__hero {
        min-height: 460px;
        border-radius: 8px;
      }

      .error-page__content {
        padding: 24px 18px;
      }

      .error-page__code {
        font-size: 62px;
      }

      .error-page__title {
        font-size: 22px;
      }

      .error-page__text {
        font-size: 14px;
      }

      .error-page__btn {
        min-height: 52px;
        font-size: 13px;
      }
    }