/* ============ TOKENS ============ */
:root{
  --bg: #3f5341;
  --bg-deep: #2c3c2b;
  --panel: #4a5f49;
  --panel-line: rgba(236,231,222,0.14);
  --green: #3ecf1a;
  --green-deep: #2a9c11;
  --pink: #ec1f7c;
  --pink-deep: #c01766;
  --cream: #ece7de;
  --ink: #16210f;
  --font-display: 'Fredoka', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

::selection{background:var(--pink);color:var(--cream);}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:0.001ms !important;}
}

/* ============ FLOATERS ============ */
.floaters{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.floater{position:absolute;border-radius:50%;opacity:.5;}
.floater--dot{width:18px;height:18px;background:var(--pink);top:18%;left:8%;animation:drift 9s ease-in-out infinite;}
.floater--ring{width:60px;height:60px;border:10px solid var(--cream);opacity:.15;top:65%;left:88%;animation:drift 12s ease-in-out infinite reverse;}
.floater--sm{width:10px;height:10px;top:40%;left:92%;animation-duration:7s;}
@keyframes drift{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-30px) translateX(14px);}
}

/* ============ NAV ============ */
.nav{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 6vw;
}
.nav__logo{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;gap:10px;letter-spacing:.03em;
}
.nav__logo-mark{
  width:20px;height:20px;border-radius:50%;
  background:var(--cream);
  position:relative;
  box-shadow: inset -4px -4px 0 var(--green);
}
.nav__links{display:flex;gap:28px;font-size:.95rem;}
.nav__links a{opacity:.85;transition:opacity .2s;}
.nav__links a:hover{opacity:1;}
.nav__cta{display:none;}
@media(min-width:720px){.nav__cta{display:inline-flex;}}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:100px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn--solid{background:var(--green);color:var(--ink);}
.btn--solid:hover{background:#4be31f;box-shadow:0 6px 0 0 var(--green-deep);transform:translateY(-2px);}
.btn--solid:disabled{background:var(--panel);color:rgba(236,231,222,.4);cursor:not-allowed;box-shadow:none;transform:none;}
.btn--ghost{border:2px solid var(--cream);color:var(--cream);background:transparent;}
.btn--ghost:hover{background:var(--cream);color:var(--ink);}
.btn--outline{border:2px solid var(--panel-line);color:var(--cream);background:var(--panel);width:100%;justify-content:center;margin-bottom:18px;}
.btn--outline:hover{border-color:var(--green);}
.btn--text{background:none;color:var(--cream);opacity:.75;padding:14px 6px;}
.btn--text:hover{opacity:1;text-decoration:underline;}
.btn--lg{padding:18px 36px;font-size:1.05rem;}
.btn--icon{gap:10px;}
.icon-x{font-size:1rem;}

/* ============ HERO ============ */
.hero{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:40px;
  padding:40px 6vw 60px;
  min-height:78vh;
}
.hero__text{flex:1 1 420px;}
.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  color:var(--green);margin:0 0 18px;
}
.eyebrow--dark{color:var(--pink-deep);}
.hero__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.4rem, 6vw, 4.6rem);line-height:1.02;
  margin:0 0 22px;letter-spacing:-.01em;
}
.hero__sub{
  font-size:1.08rem;line-height:1.6;max-width:46ch;opacity:.88;margin:0 0 30px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}

.hero__art{flex:1 1 340px;display:flex;justify-content:center;position:relative;}

.creature-img{
  width:min(100%,420px);
  height:auto;
  border-radius:28px;

}


/* ============ SHARED SECTION TYPOGRAPHY ============ */
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08;margin:0 0 22px;
}
.section-title--light{color:var(--cream);}
.section-body{font-size:1.05rem;line-height:1.65;max-width:52ch;margin:0 0 16px;opacity:.85;}
.section-body--light{color:var(--cream);opacity:.85;}

/* ============ FCFS ============ */
.fcfs{background:var(--bg-deep);padding:110px 6vw 130px;position:relative;}
.fcfs__intro{max-width:640px;margin:0 auto 50px;text-align:center;}
.fcfs__intro .section-body{margin:0 auto;}

.fcfs__flow{max-width:560px;margin:0 auto;}

.progress{height:6px;background:var(--panel);border-radius:100px;overflow:hidden;margin-bottom:20px;}
.progress__bar{height:100%;width:25%;background:var(--green);transition:width .4s ease;}

.steps-nav{display:flex;justify-content:space-between;margin-bottom:36px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;opacity:.55;flex-wrap:wrap;gap:6px;}
.steps-nav__item.is-active{opacity:1;color:var(--green);}

.step{display:none;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:34px 30px;animation:step-in .35s ease;}
.step.is-active{display:block;}
@keyframes step-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.step__title{font-family:var(--font-display);font-weight:600;font-size:1.5rem;margin:0 0 8px;}
.step__desc{opacity:.78;line-height:1.5;margin:0 0 24px;font-size:.98rem;}

.field{
  display:flex;align-items:center;background:var(--bg-deep);
  border:1.5px solid var(--panel-line);border-radius:12px;padding:4px 16px;margin-bottom:6px;
}
.field:focus-within{border-color:var(--green);}
.field__prefix{opacity:.6;margin-right:2px;}
.field input{
  background:none;border:none;outline:none;color:var(--cream);
  font-family:var(--font-body);font-size:1rem;padding:14px 4px;width:100%;
}
.field--stacked{flex-direction:column;align-items:stretch;padding:14px 16px;gap:6px;}
.field__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;opacity:.6;text-transform:uppercase;}
.field--stacked input{padding:4px;}
.mono{font-family:var(--font-mono);}

.field__error{color:var(--pink);font-size:.85rem;min-height:1.2em;margin:6px 0 14px;}

.step__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;}

.step--success{text-align:center;}
.success-mark{margin:0 auto 18px;width:72px;}
.success-summary{
  background:var(--bg-deep);border-radius:12px;padding:16px 18px;text-align:left;
  font-size:.85rem;line-height:1.7;margin:22px 0;word-break:break-all;opacity:.85;
}

/* ============ FOOTER ============ */
.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:28px 6vw;font-family:var(--font-mono);font-size:.78rem;opacity:.6;
  background:var(--bg-deep);
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;
}