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

:root {
  --bg-top: #c9d9cd;
  --bg-bottom: #a7bdac;
  --ink: #2f3d34;
  --ink-soft: #5b6b60;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  overflow: hidden;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
}

.topbar .nav a,
.topbar .logo {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.35);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #7fae8e);
  display: inline-block;
}

.nav {
  display: flex;
  gap: 32px;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
}

.nav a:hover { color: var(--ink); }

.btn-cta {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  cursor: none;
}

.blungon {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  pointer-events: none;
}

.fly {
  position: fixed;
  top: 0;
  left: 0;
  width: 46px;
  height: auto;
  pointer-events: none;
  z-index: 50;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.fly img {
  width: 100%;
  display: block;
  animation: flap 0.12s infinite alternate ease-in-out;
  transform-origin: 60% 50%;
}

@keyframes flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.82); }
}

@media (max-width: 720px) {
  .topbar { padding: 18px 20px; }
  .nav { display: none; }
  .hero { cursor: auto; }
  .fly { display: none; }
}