:root {
  --ink: #14261a;
  --green: #1e3a26;
  --green-lift: #2f5639;
  --cream: #f2f0e2;
}

* { box-sizing: border-box; }

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

body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(24px, 6vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 32%, var(--green-lift) 0%, var(--green) 42%, var(--ink) 100%);
}

/* Fine film grain keeps the large dark field from banding. */
.stage::before {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  text-align: center;
  animation: fade 1.2s ease both;
}

.logo {
  display: block;
  width: min(272px, 70vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(242, 240, 226, 0.14));
}

@keyframes fade {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}