:root { color-scheme: light; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #0b0b0f;
      color: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .card {
      width: min(900px, 100%);
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .image-box {
      width: 500px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      display: grid;
      place-items: center;
    }

    .image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* If you don’t have an image yet, this placeholder text will show */
    .placeholder {
      padding: 24px;
      text-align: center;
      opacity: 0.85;
      line-height: 1.4;
    }

    footer {
      padding: 18px 24px 26px;
      text-align: center;
      font-size: clamp(16px, 2.2vw, 22px);
      line-height: 1.35;
      letter-spacing: 0.2px;

    }

    .msg {
      max-width: 900px;
      margin: 0 auto;
      color: rgba(255,255,255,0.92);
    }

    .msg strong { color: #fff; }
	
	.image-box {
  display: grid;
  place-items: center;
}

.image-box img {
    width: 500px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-box img {
    /* width: 500px; */
    height: 250px;
    object-fit: cover;
    display: block;
    /* top: 0; */
    margin-top: -55px;
    margin-bottom: -150px;
}
.image-box {
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
}