/* ============================================================
   5. Decorative
   ============================================================ */
.dots{
  position:absolute; width:130px; height:104px; pointer-events:none; z-index:0;
  background-image:radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size:15px 15px; color:#F3C3D0;
  animation:driftDots 12s ease-in-out infinite alternate;
}
@keyframes driftDots{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,10px,0)}}
.blob{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(232,85,123,.28), rgba(232,85,123,0) 70%);
  animation:floaty 16s ease-in-out infinite alternate;
}
@keyframes floaty{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(28px,-24px,0) scale(1.12)}}

/* ============================================================
   6. Toolbar — logo + links only
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background-color .3s, box-shadow .3s, border-color .3s;
}
.nav.is-stuck{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(26,26,26,.04);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--gutter);
}
.brand{display:block; flex:none}
.brand img{height:40px; width:auto}
/* segmented pill group with a sliding indicator */
.nav__links{
  display:flex; align-items:center; position:relative; padding:5px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
  transition:background-color .3s, border-color .3s;
}
.nav.is-stuck .nav__links{background:rgba(250,247,248,.7)}
.nav__links a{
  position:relative; z-index:1;
  padding:9px 17px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--ink-2); white-space:nowrap; transition:color .28s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--pink)}
.nav__links a.is-active{font-weight:600}
.nav__pip{
  position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0;
  background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(26,26,26,.06), 0 4px 12px rgba(26,26,26,.06);
  opacity:0; transition:transform .42s var(--ease), width .42s var(--ease), opacity .28s;
}
.nav__links.has-pip .nav__pip{opacity:1}
.burger{display:none; padding:10px; margin-right:-10px; border-radius:9px; color:var(--ink)}

.sheet{
  position:fixed; inset:0; z-index:70; background:#fff;
  display:flex; flex-direction:column; padding:0 var(--gutter) 28px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .45s var(--ease), visibility .45s;
  overscroll-behavior:contain;
}
.sheet.is-open{transform:translateY(0); visibility:visible}
.sheet__top{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); flex:none}
.sheet__top img{height:36px; width:auto}
.sheet__links{display:flex; flex-direction:column; margin-top:var(--s3)}
.sheet__links a{font-size:21px; font-weight:600; padding:18px 2px; border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:auto}

/* ============================================================
   7. Hero
   ============================================================ */
.hero{padding-top:calc(var(--nav-h) + clamp(28px,5vw,52px)); padding-bottom:clamp(36px,6vw,72px); overflow:hidden}
.hero__grid{display:grid; gap:clamp(36px,6vw,50px); align-items:center; position:relative; z-index:1}
.hero__copy{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); min-width:0}
.hero h1{font-size:clamp(31px,7.2vw,54px); font-weight:800; line-height:1.1; letter-spacing:-.032em}
.hero h1 em{font-style:normal; color:var(--pink); display:block}
.hero__lead{max-width:46ch}

/* trust pills — one line each, pink check, no stacked text */
.pills{display:flex; flex-wrap:wrap; gap:9px}
.pills li{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pink-tint-2); border:1px solid #F7E4EA; border-radius:999px;
  padding:8px 15px 8px 10px; font-size:13.5px; font-weight:500; color:var(--ink); line-height:1;
  transition:border-color .25s, background-color .25s, transform .3s var(--ease);
}
.pills li:hover{background:var(--pink-tint); border-color:#F3D2DC; transform:translateY(-2px)}
.pills .tick{
  width:20px; height:20px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; flex:none;
}
.pills .tick .icon{width:11px; height:11px}

.hero__visual{position:relative; z-index:1; display:grid; place-items:center; isolation:isolate; min-width:0}
.hero .blob--1{width:min(400px,90vw); aspect-ratio:1; top:-8%; right:-8%}
.hero .blob--2{width:min(300px,70vw); aspect-ratio:1; bottom:-6%; left:-12%; animation-delay:-6s}
.hero .dots--1{top:-4%; right:-2%}
.hero .dots--2{bottom:0; right:12%; width:96px; height:70px; animation-delay:-4s}

/* --- phone stack --- */
.phones{
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  transform:translate3d(0, calc(var(--sy) * -14px), 0); padding-block:12px;
}
.phone{
  --w:150px; width:var(--w); flex:none; background:#1A1A1A; border-radius:28px; padding:6px;
  box-shadow:var(--shadow-lg); opacity:0; animation:phoneInC .9s var(--ease) forwards;
}
.phone__screen{background:#fff; border-radius:23px; overflow:hidden; display:flex; flex-direction:column; height:270px; position:relative}
.phone__bar{display:flex; align-items:center; gap:7px; padding:11px 11px 9px; font-size:10.5px; font-weight:600; border-bottom:1px solid var(--line)}
.phone__bar .icon{width:12px; height:12px; color:var(--ink-3)}
.phone__bar span{margin-inline:auto; padding-right:12px}
.phone__body{padding:9px; display:flex; flex-direction:column; gap:7px; flex:1; min-height:0}
.phone__cta{margin:0 9px 10px; text-align:center; font-size:10px; font-weight:600; background:var(--pink); color:#fff; border-radius:8px; padding:8px}
.phone__cta--soft{background:var(--pink-tint); color:var(--pink); display:flex; align-items:center; justify-content:center; gap:5px}
.phone__cta--soft .icon{width:11px; height:11px}

.phone--l{margin-right:-34px; z-index:1; animation-name:phoneInL; animation-delay:.1s}
.phone--r{margin-left:-34px; z-index:1; animation-name:phoneInR; animation-delay:.2s}
.phone--c{--w:176px; z-index:3}
.phone--c .phone__screen{height:310px}
@keyframes phoneInL{from{opacity:0; transform:translate(26px,44px)} to{opacity:1; transform:translateY(14px) rotate(-3deg)}}
@keyframes phoneInR{from{opacity:0; transform:translate(-26px,44px)} to{opacity:1; transform:translateY(14px) rotate(3deg)}}
@keyframes phoneInC{from{opacity:0; transform:translateY(50px) scale(.94)} to{opacity:1; transform:translateY(-16px)}}

.tile{background:var(--bg-2); border-radius:8px; overflow:hidden; border:1px solid var(--line)}
.tile img{width:100%; height:100%; object-fit:cover}
.tile--big{flex:1; min-height:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start}
.grid2 .tile{aspect-ratio:3/4}
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.slot{aspect-ratio:1; border:1px dashed #E3D6DA; border-radius:8px; color:var(--ink-3); display:grid; place-items:center; font-size:14px; background:var(--pink-tint-2)}

.phone--c .grid2 .tile{animation:tilePop 6s var(--ease) infinite}
.phone--c .grid2 .tile:nth-child(1){animation-delay:.2s}
.phone--c .grid2 .tile:nth-child(2){animation-delay:.55s}
.phone--c .grid2 .tile:nth-child(3){animation-delay:.9s}
.phone--c .grid2 .tile:nth-child(4){animation-delay:1.25s}
@keyframes tilePop{
  0%,6%{opacity:0; transform:scale(.86)}
  13%{opacity:1; transform:scale(1.04)}
  18%,88%{opacity:1; transform:scale(1)}
  97%,100%{opacity:0; transform:scale(.92)}
}
.phone--c .phone__screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:linear-gradient(105deg, transparent 38%, rgba(232,85,123,.16) 50%, transparent 62%);
  transform:translateX(-120%); animation:sweep 6s var(--ease) infinite;
}
@keyframes sweep{0%,72%{transform:translateX(-120%)} 92%,100%{transform:translateX(120%)}}
.phone--c .phone__cta{animation:pulseCta 6s var(--ease) infinite}
@keyframes pulseCta{
  0%,26%{transform:scale(1); box-shadow:0 0 0 0 rgba(232,85,123,.5)}
  34%{transform:scale(1.045); box-shadow:0 0 0 10px rgba(232,85,123,0)}
  42%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(232,85,123,0)}
}
.phone--l .slot:first-child{animation:dropIn 6s var(--ease) infinite}
@keyframes dropIn{0%,4%{opacity:.4; transform:translateY(-6px)} 12%,100%{opacity:1; transform:none}}

/* ============================================================
   8. Steps
   ============================================================ */
.steps{display:grid; gap:var(--s4)}
.step{
  min-width:0; padding:34px 22px 26px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:var(--s2); position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.step__num{
  position:absolute; top:-16px; left:50%; margin-left:-16px;
  width:32px; height:32px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; font-size:13.5px; font-weight:700;
  box-shadow:0 6px 16px rgba(232,85,123,.35);
  transform:scale(0); transition:transform .5s var(--ease) var(--d,0s);
}
.in-view .step__num{transform:scale(1)}
.step h3{font-size:17px; font-weight:600}
.step p{font-size:14px; color:var(--ink-2); max-width:26ch}
.step .icon--lg{width:32px; height:32px; color:var(--pink); stroke-width:1.4}
.step__arrow{display:grid; place-items:center; color:var(--pink); opacity:.5}
.step__arrow svg{width:52px; height:15px}
.step__arrow path{stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset .9s var(--ease) .35s}
.in-view .step__arrow path{stroke-dashoffset:0}

/* ============================================================
   9. Before / after band
   ============================================================ */
.band{background:var(--pink-tint); border-radius:var(--r-xl); padding:clamp(20px,4vw,36px)}
.ba{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); align-items:center}
.ba__results-wrap{min-width:0}
.ba__label{font-size:13.5px; font-weight:600; margin-bottom:10px}
.ba__before .shot{width:min(200px,62vw)}
.ba__arrow{
  width:42px; height:42px; border-radius:50%; background:var(--pink); color:#fff;
  display:grid; place-items:center; justify-self:center; flex:none;
  box-shadow:0 8px 20px rgba(232,85,123,.35); animation:nudgeY 2.6s var(--ease) infinite;
}
@keyframes nudgeY{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
@keyframes nudgeX{0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)}}
.ba__results{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr); gap:var(--s2);
  overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px;
  margin-inline:calc(var(--s2) * -1); padding-inline:var(--s2); scrollbar-width:none;
}
.ba__results::-webkit-scrollbar{display:none}
.ba__results .shot{
  scroll-snap-align:start; opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease) calc(var(--i,0) * .11s), transform .6s var(--ease) calc(var(--i,0) * .11s);
}
.in-view .ba__results .shot{opacity:1; transform:none}
.checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s3)}
.checks li{
  display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500;
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease) calc(.4s + var(--i,0) * .12s), transform .5s var(--ease) calc(.4s + var(--i,0) * .12s);
}
.in-view .checks li{opacity:1; transform:none}
.tick{width:20px; height:20px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; flex:none}
.tick .icon{width:11px; height:11px}

.shot{background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid rgba(26,26,26,.06); box-shadow:var(--shadow-sm)}
.shot img{width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--bg-2)}

/* ============================================================
   10. Categories
   ============================================================ */
.cats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); perspective:1000px}
.cat{
  min-width:0; padding:22px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  transform-style:preserve-3d;
}
.cat:hover{box-shadow:var(--shadow-md); border-color:#F1D9E0}
.cat .icon{width:30px; height:30px; color:var(--pink); stroke-width:1.4}
.cat h3{font-size:15px; font-weight:600}
.cat p{font-size:12.5px; color:var(--ink-2); line-height:1.45; text-wrap:balance}
/* the wide "…and many more" cell */
.cat--more{
  grid-column:1 / -1;
  background:linear-gradient(130deg, var(--pink-tint) 0%, var(--pink-tint-2) 60%, #fff 100%);
  border-color:#F7E4EA; justify-content:center; gap:14px; padding:26px 22px;
}
.cat--more h3{font-size:clamp(16px,2.4vw,19px); letter-spacing:-.015em}
.cat--more p{font-size:13px; max-width:60ch; color:var(--ink-2)}
.cat__icons{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px}
.cat__icons .icon{
  width:26px; height:26px; color:var(--pink); stroke-width:1.4; opacity:.75;
  animation:iconFloat 3.4s var(--ease) infinite;
  animation-delay:calc(var(--n, 0) * .18s);
}
.cat__icons .icon:nth-child(1){--n:0} .cat__icons .icon:nth-child(2){--n:1}
.cat__icons .icon:nth-child(3){--n:2} .cat__icons .icon:nth-child(4){--n:3}
.cat__icons .icon:nth-child(5){--n:4} .cat__icons .icon:nth-child(6){--n:5}
.cat__icons .icon:nth-child(7){--n:6} .cat__icons .icon:nth-child(8){--n:7}
.cat__icons .icon:nth-child(9){--n:8} .cat__icons .icon:nth-child(10){--n:9}
@keyframes iconFloat{
  0%,100%{transform:translateY(0); opacity:.6}
  50%{transform:translateY(-5px); opacity:1}
}

/* ============================================================
   11. Marketplaces
   ============================================================ */
.markets{padding:clamp(24px,4vw,34px) 0; text-align:center; overflow:hidden}
.markets h2{font-size:clamp(17px,3.2vw,22px); font-weight:600; margin-bottom:var(--s4); padding-inline:var(--gutter)}
.markets__row{
  display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.markets__track{
  display:flex; align-items:center; flex:none;
  gap:clamp(30px,5vw,54px); padding-right:clamp(30px,5vw,54px);
  animation:marquee 30s linear infinite;
}
.markets__row:hover .markets__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-100%)}}
.markets__note{font-size:13px; color:var(--ink-3); margin-top:var(--s4); padding-inline:var(--gutter)}

.mk{
  display:flex; align-items:center; gap:9px; flex:none; height:40px;
  transition:opacity .3s, transform .3s var(--ease);
}
.markets__row:hover .mk{opacity:.45}
.mk:hover{opacity:1; transform:translateY(-3px) scale(1.04)}
.mk__real{height:28px; width:auto; max-width:140px; object-fit:contain; display:block}
.mk--amazon   .mk__real{height:26px}
.mk--flipkart .mk__real{height:52px}
.mk--meesho   .mk__real{height:38px}
.mk--myntra   .mk__real{height:32px}
.mk--snapdeal .mk__real{height:17px}
.mk--ikea     .mk__real{height:26px}
.mk--shopify  .mk__real{height:26px}
.mk--etsy     .mk__real{height:24px}

/* ============================================================
   12. Why sellers love
   ============================================================ */
/* bento: one hero cell + four supporting cells */
.whys{display:grid; grid-template-columns:1fr; gap:var(--s2)}
.why{
  min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.why:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#F1D9E0}
.why__head{display:flex; align-items:center; gap:12px}
.why .med{width:40px; height:40px; border-radius:11px}
.why .med .icon{width:21px; height:21px; stroke-width:1.6}
.why h3{font-size:16px; font-weight:600; line-height:1.25}
.why p{font-size:13.5px; color:var(--ink-2); margin-top:-2px}

/* hero cell */
.why--hero{
  background:linear-gradient(150deg, var(--pink-tint) 0%, var(--pink-tint-2) 55%, #fff 100%);
  border-color:#F7E4EA;
}
.why--hero h3{font-size:clamp(17px,2.3vw,21px); letter-spacing:-.015em}
.why--hero p{font-size:14px; max-width:44ch}
.why--hero .med{background:#fff}

/* avatar row inside the hero cell */
.avatars{display:flex; margin-top:auto; padding-top:var(--s2)}
.avatars span{
  width:40px; height:40px; border-radius:50%; border:2.5px solid #fff; overflow:hidden;
  background:var(--bg-2); margin-left:-9px; box-shadow:0 4px 12px rgba(26,26,26,.08);
  transition:transform .35s var(--ease);
}
.avatars span:first-child{margin-left:0}
.avatars span img{width:100%; height:100%; object-fit:cover}
.why--hero:hover .avatars span{transform:translateY(-4px)}
.why--hero:hover .avatars span:nth-child(2){transition-delay:.04s}
.why--hero:hover .avatars span:nth-child(3){transition-delay:.08s}
.why--hero:hover .avatars span:nth-child(4){transition-delay:.12s}
.why--hero:hover .avatars span:nth-child(5){transition-delay:.16s}
.avatars .more{
  display:grid; place-items:center; background:var(--pink); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:-.02em;
}
.avatars__note{font-size:12.5px; color:var(--ink-3); margin-top:10px}

/* mini visuals */
.angles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:auto; padding-top:var(--s2)}
.angles span{
  aspect-ratio:1; border-radius:7px; background:var(--bg-2); border:1px solid var(--line);
  overflow:hidden; transition:transform .35s var(--ease);
}
.angles span img{width:100%; height:100%; object-fit:cover; object-position:50% 15%}
.why:hover .angles span:nth-child(1){transform:translateY(-3px)}
.why:hover .angles span:nth-child(2){transform:translateY(-3px); transition-delay:.05s}
.why:hover .angles span:nth-child(3){transform:translateY(-3px); transition-delay:.1s}
.why:hover .angles span:nth-child(4){transform:translateY(-3px); transition-delay:.15s}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--s2)}
.chips span{
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:999px;
  background:var(--pink-tint); color:var(--pink); line-height:1; white-space:nowrap;
}
.chips .chip--mono{background:var(--bg-2); color:var(--ink-2); font-variant-numeric:tabular-nums}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq{max-width:800px; margin-inline:auto; display:flex; flex-direction:column; gap:10px}
.qa{background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color .3s, box-shadow .3s}
.qa[open]{border-color:#F1D9E0; box-shadow:var(--shadow-sm)}
.qa summary{
  list-style:none; cursor:pointer; padding:17px 18px; display:flex; align-items:center; gap:14px;
  font-size:15px; font-weight:600; line-height:1.4;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .icon{margin-left:auto; color:var(--pink); width:18px; height:18px; transition:transform .35s var(--ease)}
.qa[open] summary .icon{transform:rotate(90deg)}
.qa__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.qa[open] .qa__body{grid-template-rows:1fr}
.qa__body > div{overflow:hidden}
.qa__body p{padding:0 18px 18px; color:var(--ink-2); font-size:14.5px; max-width:66ch}

/* ============================================================
   14. Final CTA
   ============================================================ */
.cta{
  position:relative; isolation:isolate;
  background:linear-gradient(125deg, var(--pink-tint) 0%, var(--pink-tint-2) 58%, #fff 100%);
  border:1px solid #F7E4EA; border-radius:var(--r-xl);
  padding:clamp(28px,5vw,54px); display:grid; gap:var(--s5); align-items:center; overflow:hidden;
}
.cta__glow{
  position:absolute; z-index:-1; width:min(460px,80%); aspect-ratio:1; border-radius:50%;
  top:-40%; right:-14%; filter:blur(70px);
  background:radial-gradient(circle, rgba(232,85,123,.32), rgba(232,85,123,0) 70%);
  animation:floaty 14s ease-in-out infinite alternate;
}
.cta__copy{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); min-width:0}
.cta h2{
  font-size:clamp(26px,5.4vw,40px); font-weight:800; line-height:1.12; letter-spacing:-.03em;
  text-wrap:balance;
}
.cta h2 em{font-style:normal; color:var(--pink)}
.cta p{color:var(--ink-2); margin:0; max-width:40ch}
.cta__meta{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:var(--s1)}
.cta__meta li{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--ink)}
.cta__meta .tick{width:17px; height:17px}
.cta__meta .tick .icon{width:10px; height:10px}
.collage{position:relative; aspect-ratio:4/3; max-width:420px; width:100%; justify-self:center}
.collage .shot{position:absolute; animation:bob 6s ease-in-out infinite}
.collage .shot{box-shadow:0 18px 40px rgba(198,61,98,.16), 0 3px 10px rgba(26,26,26,.06)}
.collage .shot:nth-child(1){width:40%; left:13%; top:0; z-index:3}
.collage .shot:nth-child(2){width:27%; left:0; bottom:4%; z-index:2; animation-delay:-1.5s}
.collage .shot:nth-child(3){width:27%; right:13%; top:12%; z-index:1; animation-delay:-3s}
.collage .shot:nth-child(4){width:27%; right:0; bottom:0; z-index:2; animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-13px) rotate(1.5deg)}}
.collage:hover .shot{animation:none; transition:transform .45s var(--ease)}

/* ============================================================
   15. Footer
   ============================================================ */
.footer{border-top:1px solid var(--line); padding-block:var(--s5); margin-top:var(--sec-y)}
.footer__inner{display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-align:center}
.footer img{height:42px; width:auto}
.footer__copy{font-size:13px; color:var(--ink-3)}
.footer__links{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s4); font-size:13.5px; color:var(--ink-2)}
.footer__links a:hover{color:var(--pink)}

/* ============================================================
   16. Scroll reveal
   ============================================================ */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s)}
.rv.in-view{opacity:1; transform:none}

/* ============================================================
   17. Breakpoints
   ============================================================ */
@media (max-width:899px){
  .nav__links{display:none}
  .burger{display:grid}
  .brand img{height:34px}
}
@media (max-width:600px){
  .phone--l,.phone--r{display:none}
  .phone--c{--w:min(238px, 70vw)}
  .phone--c .phone__screen{height:min(384px, 108vw)}
  .step{padding:32px 18px 24px}
  .step__arrow{transform:rotate(90deg); height:24px}
  .ba__arrow .icon{transform:rotate(90deg)}
  .why{padding:var(--s3)}
}
@media (min-width:601px){
  .cats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3)}
  .whys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why--hero{grid-column:span 2}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .phone{--w:172px}
  .phone__screen{height:308px}
  .phone--c{--w:198px}
  .phone--c .phone__screen{height:356px}
  .steps{grid-template-columns:1fr auto 1fr auto 1fr; gap:0 var(--s2); align-items:center}
  .step{height:100%}
  .ba{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:"before arrow results" "checks checks checks";
    column-gap:var(--s4);
  }
  .ba__before{grid-area:before}
  .ba__arrow{grid-area:arrow; animation-name:nudgeX}
  .ba__results-wrap{grid-area:results; min-width:0}
  .checks{grid-area:checks; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(232,85,123,.18); padding-top:var(--s4)}
  .cta{grid-template-columns:1fr .9fr}
  .footer__inner{flex-direction:row; text-align:left}
  .footer__copy{margin-inline:auto}
}
@media (min-width:900px){
  .whys{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3)}
  .why--hero{grid-column:span 2}
  .why:not(.why--hero){grid-column:span 2}
}
@media (min-width:1100px){
  .cats{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cat{padding:26px 12px}
  .cat--more{flex-direction:row; text-align:left; gap:26px; padding:24px 30px}
  .cat__icons{justify-content:flex-start; flex:none; max-width:230px}
  .cat--more h3{flex:none; white-space:nowrap}
}

/* ============================================================
   18. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important}
  .phone{opacity:1 !important}
  .phone--l{transform:translateY(14px) rotate(-3deg) !important}
  .phone--c{transform:translateY(-16px) !important}
  .phone--r{transform:translateY(14px) rotate(3deg) !important}
  .phone--c .grid2 .tile{opacity:1 !important; transform:none !important}
  .phone--c .phone__screen::after{display:none}
  .step__num{transform:scale(1) !important}
  .step__arrow path{stroke-dashoffset:0 !important}
  .ba__results .shot,.checks li{opacity:1 !important; transform:none !important}
  .markets__track{animation:none}
  .markets__row{overflow-x:auto}
  .mk{filter:none; opacity:1}
}