/* Spendly — shared tokens
   palette: matte black + lemon green
   type (dev.fun): Archivo 800 display, JetBrains Mono for everything else, lowercase voice
   shape: square hairline boxes (dev.fun), pill buttons + card-as-hero (Parker), spacious rhythm + underline accent (Boost) */

:root{
  --bg:#0e0e0c;
  --bg-2:#141412;
  --bg-3:#1b1b18;
  --line:#262622;
  --line-2:#373731;
  --text:#f2f2ea;
  --text-2:#c9c9bf;
  --mute:#8a8a80;
  --dim:#55554f;
  --lemon:#d6f53f;
  --lemon-2:#e9fb94;
  --lemon-ink:#1c2007;
  --lemon-glow:rgba(214,245,63,.14);
  --err:#ff7a50;

  --display:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%,rgba(214,245,63,.075),transparent 62%),
    radial-gradient(900px 700px at -12% 38%,rgba(214,245,63,.035),transparent 60%),
    linear-gradient(180deg,#121310 0%,#0d0e0b 45%,#0a0b09 100%);
  min-height:100%;
}
body{
  position:relative;background:transparent;color:var(--text);
  font-family:var(--mono);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* depth: a hairline grid that fades out below the fold, plus film grain */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body::before{
  background-image:
    linear-gradient(rgba(242,242,234,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,242,234,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 10%,transparent 72%);
}
body::after{
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lemon);outline-offset:2px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:24px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:70;border-bottom:1px solid var(--line);
  background:rgba(12,13,11,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.menu-btn{display:inline-grid;place-content:center;gap:5px;width:38px;height:38px;border:1px solid var(--line-2);border-radius:999px;flex:none}
.menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease)}
.nav.open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.links .menu-only{display:none}
section[id]{scroll-margin-top:72px}
@media (max-width:859px){
  .nav .links{
    position:absolute;left:0;right:0;top:100%;display:grid;padding:6px 24px 18px;
    background:rgba(12,13,11,.97);border-bottom:1px solid var(--line);font-size:16px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .3s var(--ease),visibility 0s linear .3s;
  }
  .nav.open .links{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .3s var(--ease)}
  .nav .links a{padding:15px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav .links a:last-child{border-bottom:0}
  .nav .links .nav-soon{padding:15px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav .links a[aria-current]::before{content:none}
  .nav .links a[aria-current]{color:var(--lemon)}
  .links .menu-only{display:block}
}
@media (min-width:860px){.menu-btn{display:none}}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:26px;font-size:13px}
.foot-links a{color:var(--text-2);text-decoration:none}
.foot-links a:hover{color:var(--lemon)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
.logo svg{width:20px;height:20px;flex:none}
.logo span{color:var(--mute);font-weight:400}
.links{display:none;gap:26px;font-size:13px;color:var(--mute)}
.links a{text-decoration:none;transition:color .15s}
.links a:hover,.links a[aria-current]{color:var(--text)}
.links a[aria-current]::before{content:"/ ";color:var(--lemon)}
.nav-cta{display:flex;gap:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:999px;border:1px solid transparent;
  font-family:var(--mono);font-size:13px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn-sm{height:34px;padding:0 14px;font-size:12px}
.btn-lemon{background:var(--lemon);color:#0e0e0c;font-weight:700}
.btn-lemon:hover{background:var(--lemon-2)}
.btn-line{border-color:var(--line-2);color:var(--text)}
.btn-line:hover{border-color:var(--text-2)}
.btn-outline{border-color:var(--lemon);color:var(--lemon)}
.btn-outline:hover{background:var(--lemon-ink)}
.btn-black{background:#0e0e0c;color:var(--lemon);font-weight:700}
.btn-black:hover{background:#000}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-soon{border:1px dashed rgba(214,245,63,.55);color:var(--lemon);background:rgba(28,32,7,.35)}
.btn-soon:hover{border-style:solid;background:var(--lemon-ink)}
.btn-soon i{width:7px;height:7px;border-radius:50%;background:var(--lemon);flex:none;animation:soon 2s ease-out infinite}
@keyframes soon{0%{box-shadow:0 0 0 0 rgba(214,245,63,.6)}70%,100%{box-shadow:0 0 0 7px rgba(214,245,63,0)}}
.nav-soon{display:inline-flex;align-items:center;gap:8px;color:var(--mute)}
.nav-soon:hover,.foot-soon:hover{color:var(--text)}
.nav-soon em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--lemon);border:1px solid rgba(214,245,63,.45);border-radius:999px;padding:2px 8px;line-height:1.4}
.foot-soon{color:var(--mute)}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.96}
.u{
  background-image:linear-gradient(var(--lemon),var(--lemon));
  background-repeat:no-repeat;background-size:100% .08em;background-position:0 94%;
}
.crumb{font-size:12px;color:var(--mute);display:flex;gap:8px;align-items:center}
.crumb b{color:var(--text);font-weight:500}
.crumb i{font-style:normal;width:8px;height:8px;background:var(--lemon);display:inline-block}
.prompt{color:var(--mute);font-size:13px}
.prompt b{color:var(--lemon);font-weight:500}
.cursor{display:inline-block;width:.6em;height:1.05em;background:var(--lemon);vertical-align:-.15em;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- boxes (square hairlines) ---------- */
.box{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(24,25,21,.82),rgba(15,16,13,.9));
  box-shadow:inset 0 1px 0 rgba(242,242,234,.04);
}
.box-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  min-height:40px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mute);
}
.box-head b{color:var(--text);font-weight:500}

/* ---------- the card ---------- */
.card{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;aspect-ratio:1.586;border-radius:18px;padding:20px 22px;
  background:#121310;color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(242,242,234,.10),0 30px 60px -30px rgba(0,0,0,.9);
  display:flex;flex-direction:column;justify-content:space-between;
  container-type:inline-size;
  transition:box-shadow .4s var(--ease),filter .4s;
}
.card::before{
  content:"";position:absolute;z-index:-1;inset:-40% -50% 40% 40%;
  background:radial-gradient(closest-side,var(--lemon),transparent);
  opacity:.22;filter:blur(20px);transform:rotate(-12deg);
  animation:sheen 9s ease-in-out infinite alternate;
}
.card::after{
  content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,245,63,.45) 40%,transparent);
  transform:rotate(-14deg);
}
@keyframes sheen{from{transform:translate(0,0) rotate(-12deg)}to{transform:translate(-18%,12%) rotate(-4deg)}}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em}
.card-brand svg{width:18px;height:18px}
.sim-mark{
  font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--lemon);
  border:1px solid rgba(214,245,63,.5);background:rgba(28,32,7,.8);padding:3px 7px;
}
/* brand art card face: black glass, lime light ribbons, glossy pill mark */
.card.card-art{background:#040604;color:var(--text);box-shadow:inset 0 0 0 1px rgba(214,245,63,.16),0 34px 70px -34px rgba(130,210,40,.45)}
.card.card-art::before,.card.card-art::after{display:none}
.card-art .art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.card-art .art-glow{animation:breathe 8s ease-in-out infinite}
.card-art .shine{stroke-dasharray:80 1000;stroke-dashoffset:1080;animation:shine 7s cubic-bezier(.45,0,.25,1) infinite}
.card-art .shine.s2{animation-duration:9s;animation-delay:2.2s}
@keyframes shine{to{stroke-dashoffset:-80}}
@keyframes breathe{50%{opacity:.62}}
.card-logo{display:flex;align-items:center;gap:clamp(6px,2.4cqi,10px)}
.card-logo svg{width:clamp(20px,7.2cqi,30px);height:auto;display:block;filter:drop-shadow(0 0 6px rgba(190,245,70,.55))}
.card-logo span{
  font-family:var(--display);font-weight:700;font-size:clamp(15px,5.8cqi,23px);letter-spacing:-.025em;line-height:1;
  background:linear-gradient(180deg,#ffffff 25%,#d6f53f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(214,245,63,.3));
}
.card-art .sim-mark{color:var(--lemon);border-color:rgba(214,245,63,.45);background:rgba(8,12,4,.55)}
.card-art .card-foot{color:rgba(242,242,234,.6)}
.card-art .card-foot,.card-art .card-pan{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.85)}
.card.card-art.approved{box-shadow:inset 0 0 0 1px rgba(214,245,63,.5),0 0 0 6px rgba(214,245,63,.16),0 34px 70px -30px rgba(130,210,40,.6)}
.logo svg.mark{filter:drop-shadow(0 0 5px rgba(190,245,70,.45))}

.card-mid{display:flex;align-items:center;gap:clamp(10px,4cqi,16px)}
.card-chip{width:clamp(34px,13cqi,50px);height:auto;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.card-nfc{width:clamp(15px,5.5cqi,22px);height:auto;display:block;color:rgba(242,242,234,.72)}
.card-pan{font-size:clamp(12px,5.4cqi,19px);letter-spacing:.12em;white-space:nowrap}
.card-foot{display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;color:var(--mute)}
.card-foot b{display:block;color:var(--text);font-weight:500;font-size:12.5px;letter-spacing:.08em}
.card.frozen{filter:grayscale(1) brightness(.6)}

.card.approved{box-shadow:inset 0 0 0 1px var(--lemon),0 0 0 6px var(--lemon-glow),0 30px 60px -30px rgba(0,0,0,.9)}
.card.declined{animation:shake .45s var(--ease);box-shadow:inset 0 0 0 1px var(--err),0 30px 60px -30px rgba(0,0,0,.9)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---------- reveal on scroll ---------- */
/* ---------- text motion: rise + fade, staggered (after rsight.io) ---------- */
:root{--ease-rv:cubic-bezier(.2,.7,.2,1)}
.display .dim{color:#a3a39a;font-weight:700}
.display .acc{color:var(--lemon)}

/* on load: hero pieces arrive one after another */
.hd{opacity:0;transform:translateY(18px);animation:rise-in 1s var(--ease-rv) forwards}
.hd[data-d="1"]{animation-delay:.25s}
.hd[data-d="2"]{animation-delay:.45s}
.hd[data-d="3"]{animation-delay:.65s}
.hd[data-d="4"]{animation-delay:.85s}
@keyframes rise-in{to{opacity:1;transform:none}}

/* on scroll: blocks rise in; section heads stagger label, headline, then copy */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-rv),transform .9s var(--ease-rv)}
.reveal.in{opacity:1;transform:none}
.sec-head.reveal{opacity:1;transform:none}
.sec-head.reveal > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-rv),transform .9s var(--ease-rv)}
.sec-head.reveal.in > *{opacity:1;transform:none}
.sec-head.reveal.in > :nth-child(2){transition-delay:.12s}
.sec-head.reveal.in > :nth-child(3){transition-delay:.24s}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:48px 56px;font-size:12px;color:var(--mute)}
.foot p{max-width:86ch;line-height:1.75;color:var(--mute)}
.foot p b{color:var(--text);font-weight:500}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:28px}
.motto{letter-spacing:.24em;color:var(--dim)}

@media (min-width:860px){.links{display:flex}}
@media (max-width:520px){.nav-cta .btn-line{display:none}}
@media (max-width:480px){
  .logo span{display:none}
  .nav .wrap{gap:10px;padding-inline:16px}
  .nav-cta{gap:6px}
  .nav-cta .btn-sm{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hd,.sec-head.reveal > *{opacity:1;transform:none}
}