@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,700;1,400&family=Outfit:wght@400;500;600;700;800&display=swap');

.land-body{
  --lime:#c8ff2e;
  --ink:#07140a;
  --paper:#f4ffe8;
  font-family:Outfit,system-ui,sans-serif;
  color:var(--paper);
  background:#020805;
  min-height:100vh;
  overflow-x:hidden;
}

.land-stage{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg, #010403 0%, #052214 38%, #147a32 72%, #9ae628 100%);
}

.land-glow{
  position:absolute; inset:auto -20% -18% -20%; height:55%;
  background:radial-gradient(ellipse at center, rgba(220,255,90,.55), transparent 68%);
  filter:blur(8px);
  animation:landGlow 5.5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes landGlow{
  from{opacity:.55; transform:translateY(0)}
  to{opacity:.9; transform:translateY(-18px)}
}

.land-mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}

.land-nav{
  position:relative; z-index:2;
  display:flex; justify-content:flex-end;
  padding:18px 20px 0;
  max-width:720px; width:100%; margin:0 auto;
}
.land-nav-sign{
  color:var(--ink);
  background:rgba(255,255,255,.92);
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:.88rem;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.land-nav-sign:active{transform:scale(.97)}

.land-compose{
  position:relative; z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
  padding:8px 22px 48px;
  max-width:560px;
  width:100%;
  margin:0 auto;
}

.land-logo{
  width:min(240px,58vw);
  height:auto;
  display:block;
  margin:0 0 18px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));
  opacity:0;
  transform:translateY(22px) scale(.96);
}
.land-ready .land-logo{
  animation:landIn .7s cubic-bezier(.2,.8,.2,1) .05s forwards;
}

.land-brand{
  margin:0 0 10px;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(1.55rem, 5.2vw, 2.15rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(16px);
}
.land-ready .land-brand{
  animation:landIn .7s cubic-bezier(.2,.8,.2,1) .16s forwards;
}

.land-title{
  margin:0 0 12px;
  font-size:clamp(1.15rem, 3.8vw, 1.45rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.92);
  max-width:18em;
  opacity:0;
  transform:translateY(16px);
}
.land-ready .land-title{
  animation:landIn .7s cubic-bezier(.2,.8,.2,1) .28s forwards;
}

.land-sub{
  margin:0 0 26px;
  font-size:.98rem;
  font-weight:500;
  line-height:1.45;
  color:rgba(244,255,232,.78);
  max-width:22em;
  opacity:0;
  transform:translateY(16px);
}
.land-ready .land-sub{
  animation:landIn .7s cubic-bezier(.2,.8,.2,1) .38s forwards;
}

.land-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:min(320px,100%);
  opacity:0;
  transform:translateY(16px);
}
.land-ready .land-cta{
  animation:landIn .7s cubic-bezier(.2,.8,.2,1) .48s forwards;
}

.cta-main{
  display:block;
  width:100%;
  text-align:center;
  text-decoration:none;
  padding:15px 22px;
  border-radius:999px;
  font-weight:800;
  font-size:1.02rem;
  color:var(--ink);
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-main:hover{transform:translateY(-1px); box-shadow:0 18px 36px rgba(0,0,0,.32)}
.cta-main:active{transform:scale(.98)}

.cta-soft{
  color:rgba(255,255,255,.9);
  font-weight:700;
  font-size:.92rem;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.45);
}

@keyframes landIn{
  to{opacity:1; transform:none}
}

@media (min-width:720px){
  .land-compose{padding-bottom:64px}
  .land-logo{width:280px}
}