:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #121b31;
  color: #fff8f8;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 0; min-height: 100%; }

body { overflow-x: hidden; }

.page {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  isolation: isolate;
  overflow: hidden;
  background: #121b31;
}

.scene {
  position: absolute;
  z-index: -2;
  inset: -16px;
  background: #121b31 url('/assets/background.jpg') center center / cover no-repeat;
  transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0) scale(1.02);
  will-change: transform;
}

.shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 20, 39, .93) 0%, rgba(12, 20, 39, .75) 26%, rgba(12, 20, 39, .32) 44%, transparent 69%);
  pointer-events: none;
}

.content {
  width: min(34rem, 40vw);
  margin-left: clamp(1.5rem, 5vw, 6rem);
  padding: 3rem 0;
  text-shadow: 0 2px 20px rgba(4, 8, 20, .45);
}

.eyebrow {
  margin: 0 0 1.25rem;
  color: #ffc3dd;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  min-height: 2.3em;
  margin: 0 0 .35rem;
  font-size: clamp(2.3rem, 3.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.body-copy {
  min-height: 5.1em;
  margin: 0;
  max-width: 33rem;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.7;
}

.final-copy {
  min-height: 3em;
  margin: .45rem 0 2rem;
  color: #ffe0ed;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
}

.bug-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.35rem;
  padding: .7rem 1.4rem;
  border: 2px solid #ffd3e5;
  border-radius: .85rem;
  background: #d92d70;
  box-shadow: 0 .5rem 0 #6c173e, 0 1rem 2rem rgba(10, 3, 16, .35);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  text-shadow: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.bug-button:hover { transform: translateY(-2px); background: #ee4b89; box-shadow: 0 .65rem 0 #6c173e, 0 1.1rem 2rem rgba(10, 3, 16, .4); }
.bug-button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.bug-button:active { transform: translateY(5px); box-shadow: 0 0 0 #6c173e; }

@media (min-width: 761px) {
  .shade { background: linear-gradient(90deg, #121b31 0%, rgba(18, 27, 49, .97) 32%, rgba(18, 27, 49, .55) 51%, transparent 70%); }
  .content {
    width: min(30vw, 27rem);
    margin-left: clamp(1.5rem, 4vw, 5rem);
    padding: 2rem 0;
  }
  h1 { font-size: clamp(1.9rem, 2.6vw, 3rem); }
  .body-copy { font-size: clamp(.95rem, 1.1vw, 1.12rem); line-height: 1.55; }
  .final-copy { font-size: clamp(.95rem, 1.05vw, 1.08rem); }
}

@media (max-width: 760px) {
  .page { align-items: flex-end; }
  .scene { inset: 0; background-position: 57% center; transform: none !important; will-change: auto; }
  .shade { background: linear-gradient(180deg, rgba(11, 17, 34, .08) 0%, rgba(11, 17, 34, .2) 32%, rgba(11, 17, 34, .82) 58%, #11182d 100%); }
  .content {
    width: 100%;
    margin: 0;
    padding: 1.5rem max(1.25rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }
  .eyebrow { margin-bottom: .7rem; font-size: .7rem; }
  h1 { min-height: 0; margin-bottom: .6rem; font-size: clamp(2rem, 8vw, 3rem); }
  .body-copy { min-height: 0; font-size: .98rem; line-height: 1.5; }
  .final-copy { min-height: 0; margin: .7rem 0 1.35rem; font-size: .98rem; }
  .bug-button { min-height: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { transform: none !important; will-change: auto; }
  .bug-button { transition: none; }
}