/* Pay v3 — snap-panel rebuild. Dark fintech: mint on near-black. */
:root{
  --ink:#0a0d0b;
  --ink-2:#0e120f;
  --paper:#f2f1ea;
  --muted:#a9ab9e;
  --mint:#7cc78f;
  --mint-deep:#2f7a4a;
  --line:rgba(242,241,234,.14);
  --disp:"Poppins",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --rad:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  background:var(--ink);
}
body{
  font-family:var(--disp);
  background:var(--ink);
  color:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--mint);color:var(--ink)}
.skip{
  position:fixed;top:-60px;left:12px;z-index:50;
  background:var(--mint);color:var(--ink);font-weight:700;
  padding:.6rem 1rem;border-radius:8px;transition:top .2s;
}
.skip:focus{top:12px}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem;
  background:linear-gradient(to bottom,rgba(10,13,11,.85),transparent);
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  color:var(--paper);text-decoration:none;font-weight:600;font-size:.95rem;
}
.brand .sep{color:var(--muted);margin:0 .2rem}
.brand .proj{color:var(--mint)}
.top-cta{
  font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;
  background:var(--mint);padding:.55rem 1.1rem;border-radius:9999px;
  transition:transform .15s ease;
}
.top-cta:hover{transform:translateY(-1px)}
.top-cta:active{transform:translateY(1px) scale(.98)}

/* ---------- panels ---------- */
.panel{
  position:relative;
  height:100svh;min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  display:flex;
}
.bg{position:absolute;inset:-7% 0;z-index:0;pointer-events:none}
.bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:drift linear both;
  animation-timeline:view();
  animation-range:entry 0% exit 100%;
}
@keyframes drift{
  from{transform:translate3d(0,-5%,0) scale(1.06)}
  to{transform:translate3d(0,5%,0) scale(1.06)}
}
.scrim{position:absolute;inset:0;display:block}
.scrim-bottom{background:linear-gradient(to top,rgba(10,13,11,.92) 8%,rgba(10,13,11,.45) 45%,rgba(10,13,11,.15) 75%,rgba(10,13,11,.35) 100%)}
.scrim-top{background:linear-gradient(to bottom,rgba(10,13,11,.92) 8%,rgba(10,13,11,.45) 45%,rgba(10,13,11,.2) 80%)}
.scrim-left{background:linear-gradient(to right,rgba(10,13,11,.9) 5%,rgba(10,13,11,.5) 45%,rgba(10,13,11,.1) 75%)}
.scrim-right{background:linear-gradient(to left,rgba(10,13,11,.9) 5%,rgba(10,13,11,.5) 45%,rgba(10,13,11,.1) 75%)}

.inner{
  position:relative;z-index:2;
  width:100%;max-width:1200px;margin:0 auto;
  padding:5.5rem 1.5rem 2rem;
  display:flex;flex-direction:column;justify-content:center;gap:.55rem;
}
.place-bottom-left{justify-content:flex-end;padding-bottom:4.5rem}
.place-bottom-right{justify-content:flex-end;align-items:flex-end;text-align:right;padding-bottom:4.5rem}
.place-top-left{justify-content:flex-start;padding-top:5.5rem}
.place-mid-right{align-items:flex-end;text-align:right}
.place-mid-left{align-items:flex-start}
.place-mid-center{align-items:center;text-align:center}
.inner.narrow{max-width:640px}

/* ---------- type ---------- */
.giant{
  font-weight:800;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(4.2rem,17vw,11rem);
  color:var(--paper);
}
.giant.split{display:flex;gap:1.2rem;justify-content:center}
.giant.split .their{color:transparent;-webkit-text-stroke:2px rgba(242,241,234,.5)}
.giant.split .ours{color:var(--mint)}
.tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint);
}
.line{font-size:clamp(1.15rem,4.6vw,1.7rem);font-weight:600;max-width:22ch}
.line.dim{color:var(--muted);font-weight:500}
.ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.8rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--mint);color:var(--ink);
  font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;
  padding:.85rem 1.6rem;border-radius:9999px;border:0;cursor:pointer;
  transition:transform .15s ease,background .2s;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px);background:#8fd5a0}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(242,241,234,.08);transform:translateY(-1px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.small{font-size:.85rem;padding:.7rem 1.2rem;min-height:44px}
.status{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  color:var(--muted);display:flex;align-items:center;gap:.6rem;margin-top:1rem;
}
.pip{
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--mint);box-shadow:0 0 12px var(--mint);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.45}}

.scroll-hint{
  position:absolute;z-index:3;bottom:1.4rem;left:50%;transform:translateX(-50%);
  color:var(--muted);text-decoration:none;font-size:1.3rem;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateX(-50%) translateY(8px)}}

/* ---------- ledger panel ---------- */
.panel.ledger{background:var(--ink)}
.panel.ledger::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent 0,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);
}
.vs{display:flex;gap:2.5rem;margin-top:1.5rem;text-align:left;flex-wrap:wrap;justify-content:center}
.vs ul{list-style:none;max-width:26ch}
.vs li{padding:.45rem 0;font-size:.95rem;color:var(--muted)}
.vs li::before{content:"— ";color:var(--mint)}
.vs .old li{color:#8a8a7c}
.vs .new li{color:var(--paper)}
.vs .old li::before{color:#5a5a50}

/* ---------- notify ---------- */
.panel.notify{background:radial-gradient(120% 90% at 50% 10%,#14201a 0%,var(--ink) 60%)}
form[data-notify]{width:100%;margin-top:1rem}
.f-row{display:flex;gap:.7rem;align-items:stretch}
.grow{flex:1;min-width:0}
.n{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
input[type=email]{
  width:100%;padding:.9rem 1.1rem;font-size:1rem;
  background:rgba(242,241,234,.06);color:var(--paper);
  border:1px solid var(--line);border-radius:var(--rad);
  min-height:52px;
}
input[type=email]::placeholder{color:#6f7166}
input[type=email]:focus{outline:2px solid var(--mint);outline-offset:2px;border-color:var(--mint)}
.f-err{color:#f0b4a6;font-size:.85rem;min-height:1.3em;margin-top:.4rem}
.spinner{
  display:none;width:1rem;height:1rem;border-radius:50%;
  border:2px solid rgba(10,13,11,.3);border-top-color:var(--ink);
  animation:spin .7s linear infinite;
}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.honest{font-size:.8rem;color:#6f7166;max-width:44ch;margin-top:.6rem}

/* ---------- footer ---------- */
.foot{margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.madeby img{width:220px;height:auto;display:block;border-radius:6px}
.foot-nav{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center}
.foot-nav a{color:var(--muted);text-decoration:none;font-size:.85rem}
.foot-nav a:hover{color:var(--paper)}
.copy{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#6f7166}

/* ---------- reveal (transform/opacity only) ---------- */
.rv{
  opacity:0;
  transform:translateY(26px);
  clip-path:inset(0 0 12% 0);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1),clip-path .7s cubic-bezier(.16,1,.3,1);
}
.rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- small screens ---------- */
@media (max-width:480px){
  .inner{padding:5rem 1.1rem 1.6rem}
  .giant{font-size:clamp(3.4rem,20vw,4.6rem)}
  .giant.split{font-size:clamp(2.6rem,14vw,3.4rem);flex-direction:column;gap:1rem;text-align:center}
  .line{font-size:1.08rem}
  .f-row{flex-direction:column}
  .btn{width:100%;justify-content:center}
  #hero .ctas{flex-wrap:nowrap}
  #hero .btn{width:auto;flex:1 1 0;padding:.8rem .4rem;font-size:.88rem}
  #hero .inner{gap:.45rem;padding-bottom:1.2rem}
  #hero .ctas{margin-top:.4rem}
  #hero .status{margin-top:.4rem}
  .scroll-hint{display:none}
  .panel.ledger::before{display:none}
  .vs{gap:1.2rem}
  .place-bottom-right{align-items:flex-start;text-align:left}
  .scrim-right{background:linear-gradient(to top,rgba(10,13,11,.92) 8%,rgba(10,13,11,.45) 45%,rgba(10,13,11,.15) 80%)}
}
@media (min-width:900px){
  .place-bottom-left{padding-bottom:5.5rem}
  .place-bottom-right{padding-bottom:5.5rem}
  .giant.split{gap:3rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bg img{animation:none}
  .rv{opacity:1;transform:none;clip-path:none;transition:none}
  .pip,.scroll-hint,.spinner{animation:none}
}