@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

:root{
  /* sunlit forest palette */
  --sky-cream:    #F5EFC8;  /* warm sun haze, top of sky */
  --lime-light:   #D9E89A;  /* soft lime light */
  --leaf:         #7CB342;  /* fresh leaf */
  --leaf-deep:    #4A7C2E;  /* leaf in shade */
  --moss:         #2F5021;  /* dark forest moss */
  --gold:         #F6C94A;  /* sunbeam gold */
  --highlight:    #FFF4C2;  /* warm bright highlight */
  --cream-card:   #FBF7E8;  /* card / panel cream */
  --pepe:         #5FA836;  /* mascot frog green, used for buttons/accents */
  --text:         #243B17;  /* deep forest text */
  --text-soft:    #4F6B3A;  /* secondary text */
  --radius:       20px;
  --radius-sm:    12px;
  --shadow-soft:  0 10px 40px rgba(47, 80, 33, 0.10);
  --shadow-card:  0 4px 24px rgba(47, 80, 33, 0.08);
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --maxw: 1080px;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(180deg, var(--sky-cream) 0%, var(--lime-light) 18%, #C6DE86 48%, var(--leaf) 78%, var(--leaf-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}

/* ============================================================
   z-index layers
   bg gradient 0 | overlays 1 | decor 2 | content 5
   buttons 10 | nav 100 | toast 200
   ============================================================ */

/* ----- overlays :: z-index 1, pointer-events:none ----- */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.overlay--sun{
  background:
    radial-gradient(120% 70% at 50% -10%,
      rgba(255, 244, 194, 0.85) 0%,
      rgba(246, 201, 74, 0.30) 24%,
      rgba(246, 201, 74, 0.0) 55%);
}
.overlay--vignette{
  background:
    radial-gradient(140% 120% at 50% 30%,
      rgba(47, 80, 33, 0.0) 55%,
      rgba(47, 80, 33, 0.10) 100%);
}

/* ----- shared layout ----- */
.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section{
  position: relative;
  z-index: 5;
  padding: 96px 0;
}

.section__title{
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-align: center;
  margin-bottom: 40px;
  color: var(--text);
}

.hand{
  font-family: var(--font-hand);
  color: var(--leaf-deep);
  line-height: 1.2;
}

/* ============================================================
   nav :: z-index 100
   ============================================================ */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease;
}
.nav.is-scrolled{
  background: rgba(251, 247, 232, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(47, 80, 33, 0.06);
}
.nav__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand{
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  transition: color 220ms ease, text-shadow 220ms ease;
}
.nav.is-scrolled .nav__brand{
  color: var(--text);
  text-shadow: none;
}
.nav__actions{
  display: flex;
  gap: 10px;
}

/* ----- icon buttons (nav + footer) :: z-index 10 ----- */
.icon-btn{
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  border: 1px solid rgba(47, 80, 33, 0.14);
  background: rgba(251, 247, 232, 0.7);
  color: var(--pepe);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.icon-btn svg{ width: 20px; height: 20px; display:block; }
.icon-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
.icon-btn--solid{
  background: var(--pepe);
  border-color: transparent;
  color: #fff;
}
.icon-btn--soft{
  width: 52px; height: 52px;
  background: var(--cream-card);
  box-shadow: var(--shadow-card);
}
.icon-btn--soft svg{ width: 24px; height: 24px; }

/* ============================================================
   hero :: content z-index 5
   ============================================================ */
.hero{
  position: relative;
  z-index: 5;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 104px 0 80px;
  overflow: hidden;
}
/* the 16:9 mascot art as a full background */
.hero__img{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events: none;
  background: var(--cream-card);
}
/* dark scrim so the white hero text stays readable over the image */
.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(72% 60% at 50% 50%, rgba(16, 32, 9, 0.52) 0%, rgba(16, 32, 9, 0.18) 52%, rgba(16, 32, 9, 0) 78%),
    linear-gradient(180deg, rgba(16, 32, 9, 0.32) 0%, rgba(16, 32, 9, 0) 26%, rgba(16, 32, 9, 0) 60%, rgba(16, 32, 9, 0.36) 100%);
}
.hero__inner{
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* graceful placeholder if hero-frog.jpg is not present yet */
.hero__img--fallback{
  object-fit: cover;
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(255,244,194,0.95), rgba(217,232,154,0.0) 70%),
    linear-gradient(180deg, var(--lime-light), var(--leaf));
}

.hero__hand{
  font-size: 2.4rem;
  margin: 6px 0 8px;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38);
}
.hero__title{
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 0.98;
  color: #ffffff;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.28);
}
.hero__subtitle{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: rgba(255, 255, 255, 0.92);
  margin-top: 6px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36);
}

/* ----- CA pill ----- */
.ca-pill{
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 11px 16px;
  border: 1px solid rgba(47, 80, 33, 0.12);
  border-radius: 999px;
  background: var(--cream-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ca-pill:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.ca-pill__label{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  background: rgba(124, 179, 66, 0.16);
  padding: 3px 8px;
  border-radius: 999px;
  flex: none;
}
.ca-pill__value{
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-ligatures: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.ca-pill__copy{ color: var(--text-soft); flex: none; }

/* ----- buttons :: z-index 10, position:relative ----- */
.hero__cta{
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn{
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.btn__icon{ display:inline-flex; align-items:center; }
.btn__icon svg{ width: 18px; height: 18px; display:block; }
.btn--solid{
  background: var(--pepe);
  color: #fff;
  box-shadow: 0 6px 18px rgba(95, 168, 54, 0.28);
}
.btn--solid:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(95, 168, 54, 0.34); }
.btn--outline{
  background: var(--cream-card);
  color: var(--text);
  border-color: rgba(47, 80, 33, 0.18);
}
.btn--outline:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--ghost{
  background: transparent;
  color: var(--leaf-deep);
  border-color: transparent;
  padding: 13px 14px;
}
.btn--ghost:hover{ background: rgba(124, 179, 66, 0.12); }
.btn--sm{ min-height: 44px; padding: 11px 20px; }

/* ============================================================
   tweet block :: content z-index 5
   ============================================================ */
.card{
  background: var(--cream-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(47, 80, 33, 0.06);
}
.tweets__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* left: solana post — stylistic recreation of an X embed */
.xpost{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
  border: 1px solid #cfd9de;
  border-radius: 16px;
  padding: 14px 16px 12px;
  color: #0f1419;
  box-shadow: var(--shadow-card);
}
.xpost__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.xpost__user{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.xpost__avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.xpost__avatar svg{ width: 24px; height: auto; }
.xpost__id{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.xpost__name{
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: 15px; color: #0f1419;
}
.xpost__badge{ width: 18px; height: 18px; fill: #d9a300; flex: none; } /* gold = verified organization */
.xpost__handle{ color: #536471; font-size: 15px; }
.xpost__x{ width: 22px; height: 22px; color: #0f1419; flex: none; }
.xpost__text{
  margin: 14px 0 6px;
  font-size: 23px; line-height: 1.4; font-weight: 400;
  letter-spacing: -0.01em; color: #0f1419;
}
.xpost__actions{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eff3f4;
  color: #536471;
}
.xpost__action{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.xpost__action svg{ width: 18px; height: 18px; color: #536471; }

/* right generator */
.generator{
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.generator__eyebrow{
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--leaf-deep);
  margin-bottom: 18px;
}
.generator__phrase-wrap{
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 0 22px;
}
.generator__phrase{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--text);
  transition: opacity 150ms ease;
}
.generator__phrase.is-fading{ opacity: 0; }
.generator__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

/* ============================================================
   manifesto :: content z-index 5
   ============================================================ */
.manifesto__inner{ max-width: 640px; text-align: center; }
.manifesto__p{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--text);
  margin: 18px 0;
}
.manifesto__p--lift{
  color: var(--leaf-deep);
  font-weight: 500;
}
.manifesto__hand{
  font-size: 2.6rem;
  margin-top: 26px;
}

/* ============================================================
   footer / socials :: content z-index 5
   ============================================================ */
.footer{
  position: relative;
  z-index: 5;
  padding: 40px 0 56px;
  text-align: center;
}
.marquee{
  position: relative;
  z-index: 5;
  overflow: hidden;
  width: 100%;
  margin-bottom: 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 48s linear infinite;
  pointer-events: none;
}
/* two identical groups + a -50% shift = perfectly seamless loop at any width */
.marquee__group{
  display: flex;
  flex: 0 0 auto;
}
.marquee__item{
  font-family: var(--font-hand);
  font-size: 2.2rem;
  color: var(--cream-card);
  text-shadow: 0 1px 0 rgba(47,80,33,0.12);
  white-space: nowrap;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.footer__socials{
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 18px;
}
.footer__copy{
  color: var(--text-soft);
  font-size: 0.9rem;
}

/* ============================================================
   toast :: z-index 200
   ============================================================ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cream-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   scroll reveals
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; scroll-behavior: auto !important; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .marquee__track{ animation: none; }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 768px){
  .section{ padding: 72px 0; }
  .tweets__grid{ grid-template-columns: 1fr; gap: 24px; }
  .hero{ padding: 88px 0 56px; }
  .hero__hand{ font-size: 2rem; }
  .nav__inner{ padding: 12px 18px; }
  .icon-btn{ width: 38px; height: 38px; min-width: 38px; }
  .icon-btn svg{ width: 18px; height: 18px; }
  .nav__brand{ font-size: 1.05rem; letter-spacing: 0.14em; }
}

@media (max-width: 480px){
  .section{ padding: 56px 0; }
  .container{ padding: 0 18px; }
  .hero__hand{ font-size: 1.7rem; }
  .hero__title{ letter-spacing: 0.02em; }
  .ca-pill__value{ max-width: 56vw; }
  .hero__cta{ width: 100%; flex-direction: column; }
  .hero__cta .btn{ width: 100%; }
  .marquee__item{ font-size: 1.7rem; }
  .manifesto__hand{ font-size: 2.1rem; }
  .generator{ padding: 22px; }
  .generator__actions{ flex-wrap: wrap; }
}