/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #E6F0FF;
  background: radial-gradient(120% 120% at 0% 0%, #0B2447 0%, #06142E 50%, #030914 100%);
}

.wrap {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 6vh 6vw;
}

.header { align-self: start; }
.kicker {
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: clamp(24px, 3.5vw, 48px);
  text-transform: uppercase;
  color: #A7C5FF;
  margin-bottom: 2vh;
}

.fact {
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(28px, 4.8vw, 64px);
  max-width: 1200px;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.fact.show { opacity: 1; transform: translateY(0); }

.footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1rem;
  margin-top: 4vh;
}

.qr-block { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.qr-block img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.qr-caption { font-size: clamp(12px, 1.2vw, 16px); color: #C7D8FF; }

.logo-fixed img {
  width: min(40vw, 520px);
  max-width: 520px;
  height: auto;
  opacity: 0.95;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .logo-fixed img { width: min(42vw, 360px); }
}
@media (max-width: 640px) {
  .logo-fixed img { width: min(56vw, 260px); opacity: 0.9; }
  .fact { font-size: clamp(22px, 6vw, 36px); }
  .wrap { padding: 4vh 5vw; }
}