:root {
  --bg-deep: #0d1710;
  --bg-mid: #16261a;
  --cream: #f4ead8;
  --cream-dim: rgba(244, 234, 216, 0.62);
  --gold: #c9a86a;
  --frond-back: #1f3325;
  --frond-mid: #33512f;
  --frond-front: #4a6b3f;
  --frond-light: #6d8f52;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: "Fraunces", "Iowan Old Style", serif;
  background: var(--bg-deep);
  color: var(--cream);
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(72, 96, 58, 0.35), transparent 60%),
    radial-gradient(140% 100% at 15% 100%, var(--bg-mid), var(--bg-deep) 70%);
}

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(13, 23, 16, 0) 40%, rgba(9, 15, 10, 0.72) 100%);
  pointer-events: none;
}

header.brand {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) 0.15s forwards;
}

header.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

header.brand span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

main.hero {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 0 6vw 9vh;
}

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.35s forwards;
}

h1 {
  font-weight: 560;
  font-style: italic;
  font-optical-sizing: auto;
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-top: 0.3rem;
  opacity: 0;
  animation: rise 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;
}

h1 .dot {
  color: var(--gold);
  font-style: normal;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2.1rem;
}

.cta-row .cta:nth-child(2) {
  animation-delay: 0.9s;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(201, 168, 106, 0.55);
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  background: rgba(201, 168, 106, 0.06);
  backdrop-filter: blur(2px);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
  opacity: 0;
  animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) 0.75s forwards;
}

.cta::after {
  content: "\2197";
  font-size: 0.9rem;
  transition: transform 0.35s ease;
}

.cta:hover {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.cta:hover::after {
  transform: translate(2px, -2px);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.frond-group {
  transform-origin: bottom center;
  animation: sway 8s ease-in-out infinite alternate;
}

.frond-group.delay-1 { animation-delay: -1.5s; animation-duration: 9.5s; }
.frond-group.delay-2 { animation-delay: -3.2s; animation-duration: 11s; }
.frond-group.delay-3 { animation-delay: -0.6s; animation-duration: 7.2s; }
.frond-group.delay-4 { animation-delay: -4.1s; animation-duration: 10.2s; }

@keyframes sway {
  from { transform: rotate(-1.1deg); }
  to { transform: rotate(1.4deg); }
}

@media (max-width: 640px) {
  header.brand { top: 22px; left: 20px; }
  main.hero { padding: 0 7vw 8vh; }
}