:root{
  --cream:#FAF5E8;
  --ink:#171717;
  --yellow:#FFE066;
  --blue:#B8E1FF;
  --pink:#FFC1D6;
  --mint:#B8F2C8;
  --lav:#D9C7FF;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  background-image:radial-gradient(rgba(23,23,23,.08) 1px, transparent 1px);
  background-size:22px 22px;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:'Archivo Black',sans-serif;letter-spacing:-.02em;line-height:1.05}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* pills */
.pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.55em 1.1em;
  border-radius:999px;
  border:2px solid var(--ink);
  font-weight:700;font-size:.9rem;
  background:#fff;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.pill:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pill-dark{background:var(--ink);color:var(--cream)}
.pill-yellow{background:var(--yellow)}
.pill-blue{background:var(--blue)}
.pill-pink{background:var(--pink)}
.pill-mint{background:var(--mint)}
.pill-outline{background:transparent}
.big{padding:.9em 1.6em;font-size:1rem}
.small{padding:.35em .75em;font-size:.75rem;box-shadow:2px 2px 0 var(--ink)}

.rainbow{
  background:linear-gradient(90deg,#FF6B6B,#FFB84D,#FFD93D,#6BCB77,#4D96FF,#B76BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* nav */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 5vw;
  position:sticky;top:0;z-index:20;
  background:rgba(250,245,232,.85);
  backdrop-filter:blur(8px);
  border-bottom:2px dashed var(--ink);
}
.logo{font-family:'Archivo Black',sans-serif;font-size:1.3rem;letter-spacing:.02em}
.logo span{color:#FF6B6B}
.nav nav{display:flex;gap:1.2rem;align-items:center;font-weight:500}
.nav nav a:not(.pill){font-size:.95rem}
.nav nav a:not(.pill):hover{text-decoration:underline wavy 2px}

/* hero */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:4rem 5vw 5rem;
  max-width:1280px;margin:0 auto;
  align-items:center;
}
.tag{margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.4rem,5.5vw,4.6rem);margin-bottom:1.2rem}
.lede{font-size:1.15rem;max-width:32rem;margin-bottom:2rem;color:#333}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.2rem}
.trust{display:flex;align-items:center;gap:.9rem;font-size:.9rem}
.trust b{font-family:'Archivo Black',sans-serif}
.stack{
  width:80px;height:32px;position:relative;
  background:
    radial-gradient(circle at 16px 16px, var(--pink) 12px, transparent 12px),
    radial-gradient(circle at 32px 16px, var(--blue) 12px, transparent 12px),
    radial-gradient(circle at 48px 16px, var(--yellow) 12px, transparent 12px),
    radial-gradient(circle at 64px 16px, var(--mint) 12px, transparent 12px);
}

/* phone mock */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.phone{
  position:relative;z-index:2;
  width:min(320px,80%);
  aspect-ratio:9/18;
  background:var(--ink);
  border-radius:38px;
  padding:14px;
  box-shadow:8px 8px 0 var(--ink), 8px 8px 0 2px #FF6B6B;
}
.phone-inner{
  position:relative;
  width:100%;height:100%;
  background:#fff;
  border-radius:26px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.phone-inner img{width:100%;height:60%;object-fit:cover}
.scan{
  position:absolute;left:0;right:0;top:0;height:60%;
  background:linear-gradient(180deg,transparent 0%,rgba(107,203,119,.35) 50%,transparent 100%);
  animation:scan 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scan{
  0%,100%{transform:translateY(-40%)}
  50%{transform:translateY(40%)}
}
.tag-line{
  display:flex;align-items:center;gap:.5rem;
  padding:.8rem 1rem .4rem;font-size:.78rem;font-weight:600;
}
.dot{width:8px;height:8px;border-radius:50%;background:#6BCB77;box-shadow:0 0 0 3px rgba(107,203,119,.25)}
.price-card{
  margin:.6rem 1rem 1rem;
  padding:.8rem 1rem;
  border:2px solid var(--ink);
  border-radius:16px;
  background:linear-gradient(135deg,#fff,#FFF8DB);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.muted{color:#666;font-size:.72rem}
.price{font-family:'Archivo Black',sans-serif;font-size:1.6rem}
.blob{position:absolute;border-radius:50%;filter:blur(.5px);z-index:1}
.blob-pink{width:200px;height:200px;background:var(--pink);top:20px;right:0;border:2px solid var(--ink)}
.blob-blue{width:140px;height:140px;background:var(--blue);bottom:20px;left:10px;border:2px solid var(--ink)}

/* ticker */
.ticker{
  overflow:hidden;
  border-block:3px solid var(--ink);
  background:var(--ink);
  color:var(--cream);
  padding:1rem 0;
}
.ticker-track{
  display:flex;gap:3rem;
  white-space:nowrap;
  animation:tick 40s linear infinite;
  font-family:'Archivo Black',sans-serif;
  font-size:1.1rem;
}
.ticker-track span::before{content:"◆";margin-right:1rem;color:#FFD93D}
@keyframes tick{to{transform:translateX(-50%)}}

/* how */
.how{padding:5rem 5vw;max-width:1280px;margin:0 auto;text-align:center}
.how h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:3rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step{
  border:3px solid var(--ink);
  border-radius:24px;
  padding:2rem 1.5rem;
  box-shadow:var(--shadow);
  text-align:left;
  transition:transform .15s ease;
}
.step:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.step-yellow{background:var(--yellow)}
.step-blue{background:var(--blue)}
.step-pink{background:var(--pink)}
.step .num{font-family:'Archivo Black',sans-serif;font-size:1rem;background:var(--ink);color:var(--cream);padding:.3em .8em;border-radius:999px;display:inline-block;margin-bottom:1rem}
.step h3{font-size:1.7rem;margin-bottom:.6rem}

/* stories */
.stories{padding:5rem 5vw;max-width:1280px;margin:0 auto}
.stories-head{text-align:center;margin-bottom:3rem}
.stories-head h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5rem}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.story{
  background:#fff;border:3px solid var(--ink);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .15s ease;
}
.story:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.story img{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:3px solid var(--ink)}
.story-body{padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.quote{font-weight:500;font-size:1rem;line-height:1.35}
.who{font-size:.85rem;color:#555}
.story .pill{align-self:flex-start;margin-top:auto}

/* promise */
.promise{padding:5rem 5vw;max-width:1280px;margin:0 auto;text-align:center}
.promise h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:3rem}
.promise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;text-align:left}
.promise-grid > div{
  padding:1.6rem;border:2px dashed var(--ink);border-radius:20px;
  background:#fff;
}
.emoji{font-size:2rem;display:block;margin-bottom:.6rem}
.promise-grid h4{font-size:1.15rem;margin-bottom:.4rem}
.promise-grid p{font-size:.92rem;color:#444}

/* waitlist */
.waitlist{padding:5rem 5vw}
.waitlist-inner{
  max-width:720px;margin:0 auto;
  background:linear-gradient(135deg,var(--yellow),var(--pink));
  border:3px solid var(--ink);border-radius:28px;
  box-shadow:var(--shadow);
  padding:3rem 2.5rem;text-align:center;
}
.waitlist h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.6rem}
.waitlist form{display:flex;gap:.6rem;max-width:480px;margin:1.6rem auto .8rem;flex-wrap:wrap}
.waitlist input{
  flex:1;min-width:200px;
  padding:.9em 1.2em;font-size:1rem;
  border:2px solid var(--ink);border-radius:999px;
  background:#fff;font-family:inherit;
  box-shadow:var(--shadow-sm);
}
.waitlist input:focus{outline:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.micro{font-size:.82rem;color:#333}

/* footer */
footer{border-top:2px dashed var(--ink);padding:2.5rem 5vw 2rem;max-width:1280px;margin:0 auto}
.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.logo-sm{font-size:1.1rem}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:#555}
.foot-bot .links{display:flex;gap:1.2rem}
.foot-bot .links a:hover{text-decoration:underline}

/* responsive */
@media (max-width:820px){
  .nav nav a:not(.pill){display:none}
  .hero{grid-template-columns:1fr;padding:2.5rem 5vw 3rem;gap:2rem}
  .hero-visual{order:-1;min-height:auto;margin-bottom:1rem}
  .phone{width:min(260px,70%)}
  .steps{grid-template-columns:1fr;gap:1rem}
  .hero h1{font-size:2.4rem}
  .waitlist-inner{padding:2rem 1.4rem}
  .ticker-track{font-size:.95rem;gap:2rem}
}