/* --------------------------------------------------------
   Project Base Styles
   -------------------------------------------------------- */

:root {
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Libre Baskerville', serif;
  color-scheme: light;
}

html {
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #FFF 20%, #FEFEFC 10%, #F0EAC2 30%, #f7f5e1 40%), #FFF;
  font-family: var(--font-body);
  font-weight: 500;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.04rem;
}

h2,
h3 {
  line-height: 140%;
}

.fade-letter {
  opacity: 0.2;
  transition: opacity 0.2s ease-out;
  display: inline-block;
}

h1 {
  font-size: 7.5rem;
  line-height: 120%;
}

h1.gradient {
  background-image: radial-gradient(ellipse 50% 50% at 50% -1rem, #F1EBC2 0%, #000000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 3rem;
  font-weight: 500;
}

h4 span {
  color: #AB981B;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.16rem;
}

h5 {
  font-size: 2.75rem;
  font-weight: 500;
}

button, .cta {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  background-color: #000000;
  border: none;
  border-radius: 1000rem;
  box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  transition: 0.15s;
}
button:hover, .cta:hover {
  transform: scale(1.03);
}

button:active, .cta:active {
  box-shadow: none;
  transform: scale(1);
}

button.sm, .cta.sm, .outline {
  padding: 0 1.125rem;
  display: flex;
  height: 2.75rem;
  align-items: center;
}

button.lg, .cta.lg {
  font-size: 1.25rem;
  padding: 1.0625rem 1.75rem;
}

.outline {
  color: #000000;
  font-weight: 600;
  text-decoration: none;
  border: 0.125rem solid #000000;
  border-radius: 1000rem;
  cursor: pointer;
}

.outline:hover {
  color: #AB981B;
  border: 0.125rem solid #AB981B;
}

.ctas {
  display: flex;
  gap: 1rem;
}


.no-mobile {
  display: flex!important;
}
.no-desktop {
  display: none!important;
}

.fellow-logo {
  height: 2.5rem;
  width: auto;
  fill: #AB981B;
  vertical-align: middle;
}

header, main, footer {
  max-width: 1440px;
  width: 100%;
}

header {
  padding: 0 5.5rem;
}

header nav, footer {
  display: flex;
  justify-content: space-between;
}

header nav {
  padding: 1.5rem 0 0;
}

main {
  display: flex;
  flex-direction: column;
  padding: 6rem 0 12rem;
  gap: 12rem;
}

main .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.5rem;
  text-align: center;
  padding: 0 10rem;
}

main .hero .waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}

main .hero .waitlist form {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
      justify-content: center;
}

ain .hero .waitlist form a {
  font-size: 2rem;
    color: #AB981B;
}

main .hero .waitlist form input {
  width: 100%;
  font-size: 1.25rem;
  border: none;
  display: flex;
  padding: 1.25rem 1.75rem;
  border-radius: 1000rem;
  background: linear-gradient(127deg, rgba(255, 255, 255, 0.00) 12%, #F1F3FF 72%), #FFF;
  box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.05) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.25) inset;
  flex: 1;
}

main .hero .waitlist form input::placeholder {
  color: #777797;
}

main .hero .waitlist form input:focus {
  outline: none;
}

main .story {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0 17.5rem;
}

.word {
  display: inline-block;
  white-space: nowrap;
}

main .story p {
  font-size: 3rem;
  letter-spacing: 0.04rem;
}

main .grid {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding: 12rem 17.5rem;
  border-radius: 6rem;
  background: #ffffff;
}

.grid {
  --g:1rem;
}

.grid > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g);
}

.grid > div > div {
  color: #fff;
  text-align: center;
  height: 30rem;
  background: #f2f2f2;
  border-radius: 3rem;
  background-size: cover;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid > div > :nth-child(1),
.grid > div > :nth-child(5) {
  flex: 0 0 calc(33.333% - (var(--g) / 2));
}

.grid > div > :nth-child(2),
.grid > div > :nth-child(4) {
  flex: 0 0 calc(66.666% - (var(--g) / 2));
}

.grid > div > :nth-child(1) {
  background-image: url(images/backed.png);
}

.grid > div > :nth-child(1) > .assets {
  display: flex;
  padding: 1.5rem 0.875rem;
  border-radius: 1000rem;
  background: linear-gradient(131deg, #FFF 41.9%, #F0F2FF 56.46%), #FFF;
  box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
  position: relative;
  height: 5rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.grid > div > :nth-child(1) > .assets > svg {
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.30)) drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
}

.grid > div > :nth-child(1) > .assets > #check {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
}


   #assets svg{
    opacity:0;
    transform:translateY(30px) scale(.8);
  }

  /* animation: longer, gentler curve + remember final frame */
  #assets.animate svg{
    animation:bounceIn .65s cubic-bezier(.22,1,.36,1) forwards;
  }

  /* stagger timings (now .12 s between coins, .31 s pause before check) */
  #assets.animate svg:nth-child(2){animation-delay:.12s;}  /* USDC   */
  #assets.animate svg:nth-child(3){animation-delay:.24s;}  /* Tether */
  #assets.animate svg:nth-child(4){animation-delay:.55s;}  /* Check  */

  @keyframes bounceIn{
    0%   {opacity:0; transform:translateY(30px) scale(.8);}
    70%  {opacity:1; transform:translateY(-4px) scale(1.03);}
    85%  {transform:translateY(2px)  scale(.98);}
    100% {opacity:1; transform:translateY(0)   scale(1);}
  }


#puzzle #eth,
  #puzzle #fusd{
    transform-origin:center;
    /* start very slightly “apart” */
    transition:transform .7s cubic-bezier(.22,1,.36,1);
  }
  #eth  { transform:translateX(-18px) rotate(-6deg); } /* will move right + rotate cw */
  #fusd { transform:translateX( 18px) rotate( 6deg); } /* will move left  + rotate ccw */

  /* when the wrapper gains .animate we glide into place */
  #puzzle.animate #eth  { transform:translateX(0) rotate(0); }
  #puzzle.animate #fusd { transform:translateX(0) rotate(0); }
  /* ——— end puzzle-piece slide/rotate ——— */


.grid > div > :nth-child(2) {
  background-image: url(images/composable.png);
  padding: 3rem 2rem 1.5rem;
}

.grid > div > :nth-child(2) > div {
  padding: 0 4rem;
}

.grid > div > :nth-child(2) > .puzzle {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0 0 0 2rem;
}

.grid > div > :nth-child(2) > .puzzle > svg {
  filter: drop-shadow(5px -7.5px 7px #000);
}

.grid > div > :nth-child(2) > .puzzle > :nth-child(1) {
  position: relative;
  top: 0.5rem;
}

.grid > div > :nth-child(2) > .puzzle > :nth-child(2) {
  position: relative;
  top: -0.5rem;
}

.grid > div > :nth-child(3) {
  flex: 0 0 100%;
  background-image: url(images/private.png);
  overflow: hidden;
  position: relative;
  flex-direction: row;
  align-items: flex-end;
}

.grid > div > :nth-child(3) > .privacy {
  width: 50%;
  padding: 0 4%;
}

.grid > div > :nth-child(3) > .payroll {
  min-width: 35.125rem;
  height: 62.4375rem;
  position: absolute;
  right: -6rem;
  top: 1.125rem;
}



#payroll{ transform-origin: bottom right; transform:rotate(10deg);
          transition:transform .8s cubic-bezier(.22,1,.36,1); }
#payroll.animate{ transform:rotate(0); }



.grid > div > :nth-child(4) {
  background-image: url(images/compliant.png);
}

.grid > div > :nth-child(4) > .report {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0 0;
}

.grid > div > :nth-child(4) > .report > .generate {
  position: relative;
  z-index: 1;
  filter: 
  drop-shadow(0px 13.098px 19.647px rgba(0, 0, 0, 0.15)) 
  drop-shadow(0px 6.549px 6.549px rgba(0, 0, 0, 0.30));
}

.grid > div > :nth-child(4) > .report > .receipt {
  position: relative;
  top: -0.125rem;
}

/* ── “Generate” press + printed-receipt ─────────────────── */
.grid > div > :nth-child(4) > .report > .generate{
  transform-origin:center;
}

.grid > div > :nth-child(4) > .report > .receipt{
  transform:translateY(-90%);          /* start hidden behind the button   */
  opacity:0;
}

/* ── Generate button + receipt print animation ───────────── */

/* Ensure the card allows overflow for receipt animation */
.grid > div > :nth-child(4) {
  overflow: visible;
}

/* Initial state: receipt is hidden off-screen above button */
.report > .receipt {
  transform: translateY(-90%);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Triggered when .animate is applied to .report */
.report.animate > .generate {
  animation: btnBounce 0.5s cubic-bezier(.22, 1, .36, 1) forwards;
}

.report.animate > .receipt {
  visibility: visible;
  animation: printOut 3s 0.3s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* Keyframes for bounce and print animations */
@keyframes btnBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes printOut {
  0%   { transform: translateY(-60%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.grid > div > :nth-child(5) {
  background-image: url(images/ready.png);
  align-items: center;
  position: relative;
}

.grid > div > :nth-child(5) > .notification {
  min-width: 23.125rem;
  bottom: 1.375rem;
  position: absolute;
}

/* ── Notification attention-bounce (3×) ─────────────────── */

#notification {
  transform-origin: center bottom;
  will-change: transform;
}

#notification.animate {
  animation: notifBounce 2s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes notifBounce {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-15px); }
  20%  { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  40%  { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.grid > div > div h5 {
  line-height: 1.25;
  margin: 0 0 1rem;
}

.grid > div > div p {
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.30);
}

.app {
  display: flex;
  align-items: center;
  padding: 0 17.5rem;
}

.app > div {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 50%;
  position: relative;
}

.app > div:nth-child(1) {
  height: 40.375rem;
}

.app > div > .app-concept {
      height: 100%;
    width: auto;
}

/* all three screenshots sit on top of each other */
.app-concept{
  position: absolute;
  top: 0; left: 0;
  width: 20rem;                  /* keep the size you already set */
  opacity: 0;                    /* hidden by default */
}

.app-concept.show{
  opacity: 1;                    /* instantly visible – no transition */
}

.app > div > .top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.app > div > a {
  text-decoration: none;
}

.app > div > .top > .header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app > div > .top > .header > h5 {
  font-size: 1.5rem;
  opacity: 60%;
}

.app > div > .top > .app-icon {
  width: 6rem;
  height: 6rem;
  position: relative;
}

.app > div > .top > .app-icon > .app-icon-bkg, .app > div > .top > .app-icon > .app-icon-logo {
  width: 100%;
  height: 100%;
  position: absolute;
}

.usps {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* center the paragraph below the grid too */
  gap: 2rem;
}

.usps .row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0 2rem;
}

.usps .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 12rem;   /* optional to keep text wrapping neat */
  gap: 0.5rem;
}

.usps .usp-icon {
  width: 3.5rem;  /* adjust as needed */
  height: auto;
}

/* ───────── App-icon entrance ───────── */
.app-icon{
  position:relative;
  width:clamp(72px,12vw,128px);      /* size to taste */
  aspect-ratio:1;
}

.app-icon img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

/* initial hidden state */
.app-icon-bkg{transform:scale(.6);opacity:0;}
.app-icon-logo{transform:translateY(10px);opacity:0;}

/* animated state triggered via JS */
.app-icon.animate .app-icon-bkg{
  animation:bkgBounce .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
.app-icon.animate .app-icon-logo{
  animation:logoPop .6s ease-out .8s forwards; /* starts when bounce ends */
}

/* keyframes */
@keyframes bkgBounce{
  0%   {transform:scale(.6);   opacity:0;}
  60%  {transform:scale(1.1);  opacity:1;}
  80%  {transform:scale(.95);}
  100% {transform:scale(1);    opacity:1;}
}
@keyframes logoPop{
  to{transform:translateY(0);opacity:1;}
}



footer {
  padding: 5.5rem 5.5rem;
  border-radius: 6rem 6rem 0rem 0rem;
  background: #fff;
}

footer .ctas, footer .logo, footer .community {
  display: flex;
  align-items: center;
  flex: 1;
}

footer .ctas {
  justify-content: left;
}

footer .logo {
  justify-content: center;
}

footer .community {
  display: flex;
  justify-content: right;
  gap: 2rem;
}

footer .community .community-logo {
  fill: #000000;
}

footer .community .community-logo:hover {
  fill: #AB981B;
}

footer .copyright {
  text-align: center;
  color: #AB981B;
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.04rem;
}

@media (min-width: 993px) and (max-width: 1200px) {

  html {
    font-size: 14px;
  }

  main .app {
    padding: 0 8rem;
  }

  main .grid {
    padding: 12rem 8rem;
  }

  main .story {
    padding: 0 8rem;
  }
}

@media (min-width: 577px) and (max-width: 992px) {

  html {
    font-size: 12px;
  }

  main .app {
    padding: 0 6rem;
  }

  main .grid {
    padding: 12rem 6rem;
  }

  main .story {
    padding: 0 6rem;
  }

  .grid > div > :nth-child(3) > .payroll {
        right: -11rem;
  }

  .grid > div > div {
    height: auto;
    gap: 2rem;
    padding: 3rem 1rem;
  }
  .grid > div > :nth-child(3) {
    height: 30rem;
  }

  .grid > div > :nth-child(5) > .notification {
    min-width: 19rem;
  }

  .grid > div > :nth-child(4) > .report {
    scale: 75%;
  }
}

@media (max-width: 768px) {

  header {
    padding: 0 1.5rem;
  }

  main .app {
    padding: 0 1.5rem;
  }

  main .grid {
    padding: 12rem 1.5rem;
  }

  main .hero {
    padding: 0 1.5rem;
  }

  main .story {
    padding: 0 1.5rem;
  }
}

@media (max-width: 576px) {

  .no-mobile {
  display: none!important;
}
.no-desktop {
  display: flex!important;
}

  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  h4 {
    font-size: 2rem;
  }

  main {
    gap: 6rem;
            padding: 6rem 0;
  }

  main .hero .waitlist {
    text-align: left;
  }

  main .hero, main .story {
        gap: 4rem;
                text-align: left;
  }

  main .hero .waitlist {
    width: 100%;
  }

  main .hero .waitlist form {
    flex-direction: column;
  }

  main .hero .waitlist form button {
    width: 100%;
  }

  main .story p {
    font-size: 2rem;
  }

  main .grid {
    gap: 3rem;
    padding: 6rem 1.5rem;
    border-radius: 3rem;
        overflow: hidden;
  }

  .grid > div {
    justify-content: center;
  }

  .grid > div > div {
     max-width: 22rem;
  }

  .grid > div > :nth-child(1), .grid > div > :nth-child(2), .grid > div > :nth-child(3), .grid > div > :nth-child(4), .grid > div > :nth-child(5) {
    flex: auto;
    flex-direction: column;
    height: auto;
    gap: 4rem;
    align-items: center;
  }

  .grid > div > :nth-child(1), .grid > div > :nth-child(2), .grid > div > :nth-child(3), .grid > div > :nth-child(4) {
    
    overflow: hidden;
  }

  .grid > div > :nth-child(3) {
  background-image: url(images/private-mobile.png);
}

  .grid > div > :nth-child(3), .grid > div > :nth-child(5) {
  height: 32rem;
  }

  .grid > div > :nth-child(5) > .notification {
  min-width: 25rem;
  }

  .grid > div > :nth-child(2) > .puzzle {
      position: relative;
      width: max-content;
  }
  .grid > div > :nth-child(3) > .privacy {
    width: 100%;
    padding: 0;
  }

  .grid > div > :nth-child(3) > .payroll {
    right: 5rem;
    scale: 60%;
    top: -26rem;
    position: relative;
  }

  .grid > div > :nth-child(2) > div {
    padding: 0;
  } 

  .app {
    flex-direction: column;
    gap: 3rem;
  }

  .app > div {
    width: 100%;
  }

  .app > div:nth-child(1) {
    order: 2;
    width: 11rem;
    height: 22.25rem;
  }

  .app > div:nth-child(2) {
    order: 1;
  }

  .app > a {
    order: 3;
    width: 100%;
    text-decoration: none;
  }

  .app > a > button {
    width: 100%;
  }

  footer {
    padding: 5.5rem 1.5rem 3rem;
    gap: 3rem;
    border-radius: 3rem 3rem 0rem 0rem;
  }

  footer {
    flex-direction: column;
  }

  footer .ctas, footer .logo, footer .community {
    justify-content: space-around;
  }

  footer .ctas {
    order: 3;
    flex-direction: column;
  }

  footer .ctas .outline, footer .ctas .cta.sm {
    width: 100%;
    justify-content: center;
  }

  footer .logo {
    order: 1;
  }

  footer .community {
    order: 2;
  }
}

/* ───────────────── Hero intro sequence ─────────────── */
.hero h2,
.hero h1,
.hero .waitlist{
  opacity:0;                 /* start hidden */
  transform:translateY(1rem);/* gentle rise-in */
}

@keyframes fadeInUp{
  to{opacity:1;transform:translateY(0);}
}

.fade-in{
  animation:fadeInUp .8s forwards ease-out;
}