:root {
    --bg: #120b08;
    --text: #f3e6c7;
    --gold: #e3c48a;
    --line: rgba(236, 193, 118, 0.34);
    --panel: rgba(22, 13, 9, 0.84);
    --radius: 22px;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    font-family: "Spectral", serif;
    color: var(--text);
    background:
      radial-gradient(1200px 540px at 50% -14%, rgba(248, 182, 93, 0.14), transparent 70%),
      linear-gradient(180deg, rgba(8, 5, 3, 0.22), rgba(8, 5, 3, 0.86)),
      url("/Images/contruct.webp") center center / cover no-repeat fixed,
      var(--bg);
    padding:
      max(0.65rem, env(safe-area-inset-top))
      max(0.65rem, env(safe-area-inset-right))
      max(0.65rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
    display: grid;
    place-items: center;
    overflow-x: hidden;
  }

  .card {
    width: min(780px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(28, 16, 11, 0.88), rgba(14, 9, 6, 0.94));
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
    padding: clamp(1rem, 2.2vw, 1.45rem);
    text-align: center;
  }

  .logo {
    display: block;
    width: min(360px, 72vw);
    height: auto;
    margin: 0 auto 0.55rem;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42));
  }

  h1 {
    margin: 0 0 0.5rem;
    font-family: "Cinzel", serif;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(1.45rem, 3.8vw, 2.25rem);
    text-wrap: balance;
  }

  p {
    margin: 0.45rem auto 0;
    max-width: 56ch;
    color: #ead9b5;
    line-height: 1.45;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    text-wrap: balance;
  }

  .footer-note {
    margin-top: 0.7rem;
    color: #e5d2ac;
    font-size: clamp(0.9rem, 1.5vw, 1.02rem);
  }
  .contact-note {
    margin-top: 0.45rem;
    color: #f3e6c7;
    font-size: clamp(0.92rem, 1.55vw, 1.04rem);
    font-weight: 600;
  }
  .contact-note a {
    color: #ffe0a7;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (max-width: 740px) {
    body {
      background-attachment: scroll;
    }

    .card {
      width: min(740px, 100%);
    }

    .logo {
      width: min(320px, 80vw);
    }
  }

  @media (orientation: landscape) and (max-height: 520px) {
    body {
      place-items: center;
      padding-top: max(0.45rem, env(safe-area-inset-top));
      padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .card {
      zoom: 0.8;
      width: min(860px, 100%);
      padding: clamp(0.75rem, 1.7vw, 1.1rem);
    }
  }

  @media (orientation: landscape) and (max-height: 520px) {
    @supports not (zoom: 1) {
      .card {
        transform: scale(0.8);
        transform-origin: center;
      }
    }
  }