@font-face{font-family:"Plus Jakarta Sans";src:url("assets/PlusJakartaSans-Variable.ttf") format("truetype");font-weight:200 800;font-display:swap}
:root{
  --lime:#D6FF3B;--lime-dk:#B8E01F;--ink:#0B0B09;--ink-800:#2E2D27;--ink-600:#5E5B4E;--ink-300:#CBC7B7;
  --paper:#FAF7EF;--sand:#F2EEE2;--line:#E4E0D2;--white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:16px;top:-100px;background:var(--lime);color:var(--ink);padding:12px 16px;border-radius:12px;z-index:10}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--lime-dk);outline-offset:2px}
.dark :focus-visible{outline-color:var(--lime)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.dark{background:var(--ink);color:var(--paper)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--lime);color:var(--ink);font-family:inherit;font-size:16px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer}
.btn:hover{background:#DEFF6B}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink-300)}
.navlink{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;font-weight:600;text-decoration:none}
.navlink:hover{text-decoration:underline}

/* header and hero */
.hero-wrap{padding-top:88px}
/* floating: fixed to the viewport so it follows the scroll; the card catches clicks, the gaps don't */
.bar{position:fixed;top:0;left:50%;translate:-50% 0;z-index:50;padding-top:16px;pointer-events:none}
.bar-card{pointer-events:auto;backdrop-filter:blur(14px)}
/* a dark card with a lime spotlight from the top centre, a glass pill nav and a lit CTA */
.bar-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;min-height:72px;padding:12px 12px 12px 20px;border-radius:24px;background:radial-gradient(38% 140% at 50% 0%,rgba(214,255,59,.17),rgba(214,255,59,0) 72%),#141412;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 24px 48px -28px rgba(0,0,0,.7)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:48px;text-decoration:none;font-weight:700;font-size:18px}
.brand img{width:36px;height:auto}
.nav{display:none;position:relative;align-items:center;gap:2px;padding:4px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05)}
.nav::after{content:"";position:absolute;left:8%;bottom:-1px;width:28%;height:1px;background:linear-gradient(90deg,transparent,rgba(214,255,59,.85),transparent);pointer-events:none}
.nav .navlink{min-height:48px;padding:0 18px;border-radius:14px;color:rgba(250,247,239,.62);font-weight:500;transition:color .2s,background-color .2s}
.nav .navlink:hover{color:var(--paper);background:rgba(255,255,255,.06);text-decoration:none}
.btn.cta{justify-self:end;min-height:48px;padding:0 22px;border-radius:16px;font-size:15px;background:linear-gradient(180deg,#E8FF85 0%,var(--lime) 55%,var(--lime-dk) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(70,90,0,.18),0 0 0 1px rgba(214,255,59,.45),0 10px 28px -8px rgba(214,255,59,.5);transition:box-shadow .2s,translate .2s}
.btn.cta:hover{translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(70,90,0,.18),0 0 0 1px rgba(214,255,59,.6),0 14px 34px -8px rgba(214,255,59,.65)}
.hero{display:grid;gap:40px;padding-top:24px;padding-bottom:56px}
.pill{display:inline-block;margin:0 0 20px;padding:6px 16px;border-radius:999px;background:#262F00;color:var(--lime);font-size:13px;font-weight:600}
h1{margin:0;font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--lime)}
.sub{margin:20px 0 0;font-size:18px;font-weight:700;color:var(--ink-300)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.note{margin:20px 0 0;font-size:14px;color:var(--ink-300)}
.hero-wrap{overflow:hidden}
h1 .w{display:inline-block}
.phones{position:relative;display:flex;align-items:flex-start;justify-content:center}
.ph{width:48%;border-radius:12%/5.5%;box-shadow:0 0 0 6px #1d1d1b}
.ph-a{margin-top:10%;margin-right:-6%}
.ph-b{position:relative}
.glow{position:absolute;left:10%;top:15%;width:80%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(212,255,58,.28),rgba(212,255,58,0));pointer-events:none}

/* how it works: phone demo, pinned on wide screens by main.js */
.how-phone{display:block}
.demo{position:relative;width:min(320px,100%,calc((100svh - 160px) * .4624));margin:0 auto;border-radius:12%/5.5%;overflow:hidden;box-shadow:0 0 0 6px var(--ink),0 30px 60px -20px rgba(0,0,0,.35);background:var(--ink)}
.demo img{display:block;width:100%;height:auto}
.layer{position:absolute;inset:0}
.cover{position:absolute;left:3%;right:3%;background:#fdfdfd;opacity:0}
.beam{position:absolute;left:8%;right:8%;top:29%;height:2px;background:#1E88C8;box-shadow:0 0 12px 3px rgba(30,136,200,.45);opacity:0}
.step-item{display:grid;grid-template-columns:40px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid var(--line)}
.step-item .num{margin:0}
.step-item p{margin:0;color:var(--ink-600)}
/* phones: the same demo as on desktop, pinned under the title; one step shows at a time (main.js adds .stacked) */
@media (max-width:767px){
  .how-copy{display:contents}
  .how-grid{display:grid;gap:20px}
  .how .eyebrow{order:1;margin:0;text-align:center}
  .how h2{order:2;margin:0;font-size:28px;text-align:center}
  .how-phone{order:3}
  .how-copy .steps{order:4}
  .demo{width:max(150px,min(320px,100%,calc((100svh - 400px) * .4624)))}
  .stacked .step-item{grid-area:1/1;border-top:0;padding:0;align-content:start}
  .stacked .steps{gap:0}
}
.bar{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bar.away{transform:translateY(-140%)}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}
.stamp{position:absolute;top:39%;right:5%;padding:6px 14px;border:3px solid #4A6B00;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:800;font-size:clamp(14px,2.2vw,22px);letter-spacing:.06em;text-transform:uppercase;rotate:-8deg}
.stats{list-style:none;margin:0 auto;padding-bottom:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;color:var(--ink-300);font-size:14px}
.count{display:block;margin-bottom:4px;color:var(--lime);font-size:40px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.btn{transition:transform 150ms cubic-bezier(.2,0,0,1)}
.btn:active{transform:scale(.98);transition-duration:90ms}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transform:none;transition:none}}

/* sections */
.band{padding:64px 0}
.paper{background:var(--paper)}
.sand{background:var(--sand)}
.lime{background:var(--lime);color:var(--ink)}
.eyebrow{margin:0 0 8px;text-align:center;font-size:16px;font-weight:600;color:var(--ink-600)}
h2{margin:0 0 40px;text-align:center;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2.left{text-align:left}
h3{margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:700}
.card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:24px}
.card p{margin:0;color:var(--ink-600)}
.steps,.grid,.trust{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.num{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:600}
.vis{display:flex;justify-content:center;gap:16px;margin-top:24px;padding:24px 16px 0;height:340px;overflow:hidden;border-radius:16px;background:var(--sand)}
.vis img{height:316px;width:auto}
.vis.two img{width:calc(50% - 8px);height:auto}

/* privacy (Option C layout) */
.trust .card h3{font-size:18px}
.trust .card p{font-size:14px}
.ai{margin:24px 0 0;color:var(--ink-600)}

/* currency */
.center{text-align:center}
.lead{margin:0;color:var(--ink-600)}
.lime .lead{color:var(--ink-800)}
.lime h2{margin-bottom:16px}
.chips{list-style:none;margin:32px auto 0;padding:0;max-width:900px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips li{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600}

/* signup */
.signup{max-width:800px;margin:0 auto;padding:32px 20px;text-align:center}
.signup h2{margin-bottom:12px}
form{display:flex;flex-direction:column;gap:12px;margin-top:32px;text-align:left}
.field{flex:1}
label{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--ink-600)}
input{width:100%;min-height:56px;padding:0 16px;border:1px solid var(--ink-600);border-radius:16px;background:var(--white);font:inherit;color:var(--ink)}
input::placeholder{color:var(--ink-600)}
.status{min-height:24px;margin:16px 0 0;font-weight:600}
.fine{margin:8px 0 0;font-size:13px;color:var(--ink-600)}
.fine a{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
select{width:100%;min-height:56px;padding:0 16px;border:1px solid var(--ink-600);border-radius:16px;background:var(--white);font:inherit;color:var(--ink)}

/* footer */
.foot{text-align:left;margin-top:56px;border-top:1px solid var(--line);background:var(--paper);color:var(--ink);overflow:hidden}
.fcols{display:grid;grid-template-columns:1fr}
.fcol{padding:32px 0;border-top:1px solid var(--line)}
.fcol:first-child{border-top:0}
.fmark{margin:0;font-weight:800;font-size:72px;line-height:1;letter-spacing:-.04em}
.fh{margin:0 0 8px;text-align:left;font-size:24px;font-weight:800;line-height:1.2}
.fp{margin:0 0 16px;color:var(--ink-600);font-weight:500}
.fbtn{min-height:48px}
.fq{margin:16px 0 0}
.fq a{color:var(--ink);font-weight:700}
.flinks{display:flex;flex-direction:column;align-items:flex-start}
.flinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.flinks a:hover{text-decoration:underline}
.copy{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--ink-600)}
.fnote{margin:16px 0 0;font-size:13px;color:var(--ink-600);max-width:34ch}
.pile{position:relative;height:240px;overflow:hidden;border-top:1px solid var(--line)}
.pile canvas{display:block;width:100%;height:100%}
@media (min-width:900px){
  .fcols{grid-template-columns:1fr 1fr 1fr}
  .fcol{padding:48px 32px;border-top:0;border-left:1px solid var(--line)}
  .fcol:first-child{border-left:0;padding-left:0}
  .fmark{font-size:clamp(88px,10vw,140px)}
  .pile{height:320px}
}

/* every element's end state is the default; main.js sets start states only when motion is allowed */
@media (min-width:768px){
  .how-grid{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:center}
  .how .eyebrow,.how h2{text-align:left}
  .how h2{margin-bottom:24px}
}

@media (min-width:900px){
  .wrap{padding:0 120px}
  .hero-wrap{padding-top:112px}
  .bar{padding-top:24px}
  .bar-card{grid-template-columns:1fr auto 1fr;min-height:88px;padding:16px 16px 16px 32px;border-radius:28px}
  .nav{display:flex}
  .hero{grid-template-columns:560px 1fr;align-items:center;gap:40px;padding-top:56px;padding-bottom:80px}
  h1{font-size:70px;line-height:1.05}
  .sub{font-size:22px}
  .phones{justify-content:flex-end}
  .ph{width:auto}
  .ph-a{width:273px;margin-top:110px;margin-right:-3px}
  .ph-b{width:320px}
  .stats{padding-bottom:80px}
  .count{font-size:56px}
  .band{padding:80px 0}
  h2{font-size:44px;margin-bottom:56px}
    .grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .card{padding:32px}
  .trust{grid-template-columns:1fr 1fr}
  .lime h2{margin-bottom:12px}
  .signup{padding:56px}
  form{flex-direction:row;align-items:flex-end}
}

/* submit spinner */
.btn .spin{display:none;width:18px;height:18px;margin-right:10px;border:2.5px solid rgba(11,11,9,.25);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
.btn.loading{pointer-events:none;opacity:.9}
.btn.loading .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* thank-you dialog */
.thanks{border:0;padding:0;background:transparent;max-width:min(440px,calc(100vw - 32px));width:100%;color:var(--paper);overflow:visible}
.thanks::backdrop{background:rgba(11,11,9,.62);backdrop-filter:blur(6px)}
.thanks-card{position:relative;overflow:hidden;padding:44px 28px 32px;border-radius:28px;text-align:center;background:radial-gradient(120% 70% at 50% 0%,rgba(214,255,59,.22),transparent 60%),#141412;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 80px -20px rgba(0,0,0,.7)}
.thanks[open] .thanks-card{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.thanks-ring{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:rgba(214,255,59,.12);box-shadow:0 0 0 8px rgba(214,255,59,.06),0 0 44px rgba(214,255,59,.35)}
.thanks-ring svg{width:56px;height:56px;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.thanks-ring circle{stroke-dasharray:151;stroke-dashoffset:151}
.thanks-ring path{stroke-dasharray:40;stroke-dashoffset:40}
.thanks[open] .thanks-ring circle{animation:draw .6s .15s ease-out forwards}
.thanks[open] .thanks-ring path{animation:draw .4s .65s ease-out forwards}
.thanks h2{margin:0 0 8px;font-size:30px;line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--paper)}
.thanks-lead{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--lime)}
.thanks-sub{margin:0 0 26px;color:var(--ink-300);overflow-wrap:anywhere}
.thanks-sub strong{color:var(--paper)}
.thanks .btn{width:100%}
.thanks .slip{position:absolute;width:64px;height:84px;border-radius:8px;background:rgba(214,255,59,.07);box-shadow:inset 0 0 0 1px rgba(214,255,59,.14)}
.thanks .s1{left:-14px;top:30px;rotate:-14deg}.thanks .s2{right:-18px;top:90px;rotate:11deg}.thanks .s3{left:22px;bottom:-34px;rotate:8deg}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .thanks[open] .thanks-card,.btn .spin{animation:none}
  .thanks-ring circle,.thanks-ring path{stroke-dashoffset:0;animation:none!important}
  .btn.loading .spin{border-top-color:var(--ink)}
}