:root{
  --bg:#FDFCF8; --sage:#E8EFE8; --lavender:#EFEDF4; --peach:#FFB7B2;
  --text:#292524; --muted:#78716C;
  --shadow:0 4px 20px -2px rgba(0,0,0,.05);
  --r-md:2rem; --r-lg:3rem; --r-xl:4rem;
  --font:'Outfit',system-ui,sans-serif; --hand:'Reenie Beanie',cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:300;font-size:1.0625rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(3rem,7.5vw,6rem)}
h2{font-size:clamp(2.25rem,5vw,3.75rem)}
h3{font-size:1.5rem;line-height:1.2}
a{color:inherit}
.hand{font-family:var(--hand);font-weight:400;letter-spacing:0}
.lead{color:var(--muted);font-size:1.25rem;max-width:34rem}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:999px}

/* grain: 0.35 opacity fractal noise */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .13 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* blobs: floating 6s loop, translateY +/-10px */
.blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;animation:float 6s ease-in-out infinite}
.blob--peach{width:34rem;height:34rem;background:var(--peach);opacity:.45;top:-8rem;right:-10rem}
.blob--sage{width:30rem;height:30rem;background:var(--sage);top:34rem;left:-12rem;animation-delay:-2s}
.blob--lavender{width:32rem;height:32rem;background:var(--lavender);top:80rem;right:-12rem;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}

/* nav */
.nav{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;max-width:76rem;margin:0 auto;padding:1.5rem}
.logo{font-weight:500;font-size:1.5rem;letter-spacing:-.025em;text-decoration:none}
.logo .hand{font-size:2.1rem;color:#e0716a;margin-left:.1rem}
.nav__links{display:flex;align-items:center;gap:1.75rem}
.nav__links a:not(.btn){text-decoration:none;color:var(--muted);transition:color .2s}
.nav__links a:not(.btn):hover{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--peach);color:var(--text);font:500 1.0625rem var(--font);padding:1rem 2rem;border:0;border-radius:999px;text-decoration:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px -4px rgba(255,183,178,.7)}
.btn--small{padding:.6rem 1.25rem;font-size:1rem}
.btn--ghost{background:transparent;box-shadow:none;border:1.5px solid rgba(41,37,36,.18)}
.btn--ghost:hover{background:var(--sage);box-shadow:none}
.btn--dark{background:var(--text);color:var(--bg)}
.btn--dark:hover{box-shadow:0 8px 24px -4px rgba(41,37,36,.4)}
.btn--block{width:100%}

/* hero */
.hero{position:relative;z-index:1;max-width:76rem;margin:0 auto;padding:3rem 1.5rem 6rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.pill{display:inline-block;background:var(--sage);padding:.4rem 1.1rem;border-radius:999px;font-size:.95rem;font-weight:400;margin-bottom:1.5rem}
.hero h1{max-width:12ch;margin-bottom:1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.note{font-size:2.25rem;color:var(--muted);margin-top:2rem;transform:rotate(-2deg)}
/* one orchestrated page-load sequence */
.hero__text>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero__text>:nth-child(2){animation-delay:.1s}.hero__text>:nth-child(3){animation-delay:.2s}
.hero__text>:nth-child(4){animation-delay:.3s}.hero__text>:nth-child(5){animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.hero__demo{position:relative;display:flex;justify-content:center;animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) both}
.arrow{position:absolute;width:5.5rem;left:-1rem;top:-2.5rem;transform:rotate(-12deg)}
.demo-hint{position:absolute;left:-4.5rem;top:-4.5rem;font-size:2rem;transform:rotate(-6deg);color:var(--muted)}
.phone{width:100%;max-width:21rem;background:#fff;border-radius:var(--r-lg);padding:1.25rem 1.5rem 1.5rem;box-shadow:0 30px 60px -20px rgba(41,37,36,.18),var(--shadow);border:1px solid rgba(41,37,36,.06);transform:rotate(2deg)}
.phone__bar{display:flex;justify-content:center;margin-bottom:1.25rem}
.phone__bar span{width:4rem;height:.35rem;background:var(--lavender);border-radius:99px}
.phone__hello{color:var(--muted);font-size:.95rem}
.phone__title{font-size:1.9rem;margin:.1rem 0 1.25rem}
.order{background:var(--bg);border-radius:var(--r-md);padding:1.25rem;margin-bottom:1.25rem}
.order__row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.order__row strong{display:block;font-weight:500;font-size:1.2rem;line-height:1.2}
.order small{color:var(--muted);font-size:.875rem}
.order__row--sub{margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(41,37,36,.15)}
.tag{background:var(--sage);color:var(--text)!important;padding:.15rem .7rem;border-radius:99px}
.order__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem}
.order__total strong{font-size:1.6rem;font-weight:500;letter-spacing:-.025em}
.stepper{display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:99px;padding:.3rem;box-shadow:var(--shadow)}
.stepper button{width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:var(--lavender);font:400 1.4rem/1 var(--font);color:var(--text);cursor:pointer;transition:transform .15s,background .2s}
.stepper button:hover{background:var(--peach)}
.stepper button:active{transform:scale(.9)}
.stepper output{min-width:2.2rem;text-align:center;font-weight:500;font-variant-numeric:tabular-nums}
.btn.is-done{background:var(--sage)}
.phone__foot{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.9rem;line-height:1.4}
.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.08)}}

/* sections */
.section{position:relative;z-index:1;max-width:76rem;margin:0 auto;padding:5rem 1.5rem}
.section__head{margin-bottom:3rem;display:grid;gap:1rem}
.section__head h2{max-width:18ch}

.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.card{border-radius:var(--r-lg);padding:2.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.9rem;min-height:15rem}
.card p{color:var(--muted)}
.card--peach{background:var(--peach);border-top-left-radius:var(--r-xl)}
.card--peach p{color:rgba(41,37,36,.75)}
.card--sage{background:var(--sage)}
.card--lavender{background:var(--lavender)}
.card--white{background:#fff;border-bottom-right-radius:var(--r-xl)}
.card__hand{margin-top:auto;font-size:2rem;color:var(--text);opacity:.7;transform:rotate(-2deg)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step{background:#fff;border-radius:var(--r-lg);padding:2.5rem 2rem;box-shadow:var(--shadow)}
.step:nth-child(2){background:var(--lavender)}
.step:nth-child(3){background:var(--sage)}
.step h3{margin:.5rem 0 .75rem}
.step p{color:var(--muted)}
.step__n{font-size:4.5rem;line-height:.8;color:#e0716a;display:block}

.cta{background:var(--peach);border-radius:var(--r-xl);padding:clamp(3rem,8vw,6rem) clamp(1.5rem,6vw,5rem);text-align:center;display:grid;justify-items:center;gap:1.5rem;box-shadow:var(--shadow)}
.cta h2{max-width:16ch}
.cta .lead{color:rgba(41,37,36,.75)}
.cta__hand{font-size:2.4rem;transform:rotate(-3deg)}

.footer{position:relative;z-index:1;max-width:76rem;margin:0 auto;padding:2rem 1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;color:var(--muted)}

/* reveal on scroll: translateY 30px -> 0, opacity 0 -> 1, 0.8s */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:1.5rem}
  .hero__demo{margin-top:3.5rem}
  .demo-hint{left:0;top:-3.5rem}.arrow{left:5rem;top:-3rem}
  .bento,.steps{grid-template-columns:1fr}
  .nav__links a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}