/* AvoJoy — NOT ANOTHER PAIN CREAM — landing2/style.css */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=DM+Serif+Display:ital@0;1&family=Mulish:ital,wght@0,400;0,600;0,700;0,800;0,900&family=Caveat:wght@700&display=swap');

:root{
  --night:#060A07;--night8:#0E1810;
  --avo9:#0A3315;--avo8:#11451F;--avo7:#1A6230;--avo6:#2E8242;--avo5:#5BA84A;--avo4:#84C84A;--avo2:#D8EAC0;--avo1:#EAF3DA;
  --cream:#F6F2E5;--cream1:#FBF8EF;--cream3:#EFE9D3;
  --blue:#2B4AC4;--orange:#F08A3E;--pit:#6B3E1F;
  --fc:"Lilita One",system-ui,sans-serif;--fd:"DM Serif Display",Georgia,serif;--fs:"Mulish",system-ui,sans-serif;--fh:"Caveat",cursive;
  --eb:cubic-bezier(0.34,1.6,0.64,1);--es:cubic-bezier(0.22,0.61,0.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream1);font-family:var(--fs);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--avo4)}a:hover{color:var(--avo2)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* chunky display */
.chunk{font-family:var(--fc);font-weight:400;line-height:.98;letter-spacing:.01em;margin:0;text-transform:uppercase}
.serif{font-family:var(--fd);font-weight:400;letter-spacing:-.01em;margin:0}
.hand{font-family:var(--fh);font-weight:700;color:var(--avo4)}

/* slam-in reveal */
.slam{opacity:0;transform:scale(2.2);transition:opacity .38s ease-out,transform .5s cubic-bezier(0.16,1.3,0.3,1)}
.slam.in{opacity:1;transform:scale(1)}
.rise{opacity:0;transform:translateY(38px);transition:opacity .6s var(--es),transform .6s var(--es)}
.rise.in{opacity:1;transform:none}
.pop{opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .55s var(--eb)}
.pop.in{opacity:1;transform:scale(1)}

/* strike-through draw */
.strike{position:relative;display:inline-block}
.strike svg{position:absolute;left:-3%;top:16%;width:106%;height:66%;overflow:visible;pointer-events:none}
.strike path{stroke:var(--orange);stroke-width:6;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .7s .35s var(--es)}
.in .strike path,.strike.in path{stroke-dashoffset:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--avo7);color:var(--cream1);border:4px solid var(--avo8);border-radius:999px;padding:18px 40px;font-family:var(--fs);font-weight:800;font-size:18px;cursor:pointer;text-decoration:none;transition:transform .15s var(--eb),box-shadow .3s,background .2s;box-shadow:0 0 24px 4px rgba(91,168,74,.35)}
.btn:hover{background:var(--avo6);color:var(--cream1);transform:translateY(-2px);box-shadow:0 0 44px 8px rgba(91,168,74,.5)}
.btn:active{transform:scale(.98)}
.btn.cream{background:var(--cream1);color:var(--avo8);border-color:var(--avo8);box-shadow:none}
.btn.cream:hover{background:#fff}

/* ── marquee ticker ── */
.ticker{background:var(--avo5);color:var(--avo9);overflow:hidden;white-space:nowrap;padding:10px 0;font-family:var(--fc);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.ticker-inner{display:inline-block;animation:tick 22s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{margin:0 26px}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:10px 26px;background:rgba(6,10,7,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(91,168,74,.2)}
.nav img{height:40px}
.nav .btn{padding:11px 24px;font-size:14px;border-width:3px}

/* ── hero ── */
.hero{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 24px 64px;position:relative;overflow:hidden}
.hero .l1{font-size:clamp(38px,6vw,84px);color:var(--cream1)}
.hero .l2{font-size:clamp(80px,14vw,200px);color:var(--avo4);text-shadow:0 0 60px rgba(132,200,74,.4)}
.hero .l3{font-size:clamp(38px,6vw,84px);color:var(--cream1)}
.hero .l4{font-size:clamp(46px,7.4vw,110px);color:var(--cream1)}
.hero>*{margin-bottom:10px}
.hero .waitforit{font-size:clamp(40px,5.4vw,72px);margin-top:16px;transform:rotate(-2deg);animation:neon 1.4s ease-in-out infinite}
@keyframes neon{
  0%,100%{opacity:1;text-shadow:0 0 10px var(--avo5),0 0 30px var(--avo5),0 0 60px rgba(91,168,74,.7)}
  8%{opacity:.55;text-shadow:none}
  12%{opacity:1;text-shadow:0 0 10px var(--avo5),0 0 30px var(--avo5),0 0 60px rgba(91,168,74,.7)}
  50%{opacity:1;text-shadow:0 0 14px var(--avo4),0 0 44px var(--avo5),0 0 90px rgba(132,200,74,.8)}
  54%{opacity:.4;text-shadow:none}
  58%{opacity:1;text-shadow:0 0 14px var(--avo4),0 0 44px var(--avo5),0 0 90px rgba(132,200,74,.8)}
}
.hero .peek{font-size:clamp(18px,2.4vw,30px);color:var(--avo5);letter-spacing:.06em;margin-top:34px;opacity:0}
.hero .peek.in{opacity:.9}
.hero-scroll{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:var(--avo5);font-size:26px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ── pit section ── */
.pit{background:var(--avo8);text-align:center;padding:64px 24px 90px;position:relative;overflow:hidden}
.pit .eyebrow{font-family:var(--fc);font-weight:400;font-size:clamp(22px,3vw,34px);letter-spacing:.18em;color:var(--avo4);text-transform:uppercase;margin-bottom:22px}
.pit h2{font-size:clamp(44px,6.5vw,96px);color:var(--cream1);line-height:1.08}
.pit .hl{position:relative;display:inline-block;font-style:italic}
.pit .hl i{position:relative;z-index:1}
.pit .hl u{position:absolute;left:-2%;right:-2%;bottom:6%;height:52%;background:var(--avo5);border-radius:14px;transform:scaleX(0);transform-origin:left center;transition:transform .8s .3s var(--es)}
.pit .in .hl u,.pit .hl.in u{transform:scaleX(1)}
.pit-img{width:min(380px,64vw);margin:54px auto 10px;display:block;filter:drop-shadow(0 40px 34px rgba(6,10,7,.45))}
.pit-img.pop.in{animation:pitBob 4s 0.6s ease-in-out infinite}
@keyframes pitBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.pit .pitline{font-size:clamp(38px,5.4vw,70px);color:var(--avo4);margin-top:30px;text-shadow:0 0 40px rgba(132,200,74,.35)}
.pit .yes{font-family:var(--fh);font-size:clamp(26px,3.4vw,44px);color:var(--cream1);margin-top:14px;text-shadow:0 0 24px var(--avo4)}
.pit-sparkle{position:absolute;font-size:34px;color:var(--avo4);animation:spk 2.2s ease-in-out infinite}
@keyframes spk{0%,100%{opacity:.25;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(40deg)}}

/* pit science strip */
.pitfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:60px auto 0;text-align:left}
.pitfact{background:rgba(6,10,7,.35);border:1.5px solid rgba(132,200,74,.3);border-radius:20px;padding:22px 24px}
.pitfact b{display:block;font-family:var(--fc);font-size:19px;color:var(--avo4);letter-spacing:.04em;margin-bottom:6px;text-transform:uppercase}
.pitfact span{font-size:14.5px;color:var(--avo1);line-height:1.55}

/* ── mist section ── */
.mist{background:var(--night);padding:120px 0;position:relative;overflow:hidden}
.mist h2{font-size:clamp(40px,5.6vw,80px);color:var(--cream1);text-align:center;margin-bottom:70px}
.mist h2 em{font-style:italic}
.mist-stage{position:relative;max-width:1000px;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:560px}
.mist-bottle{width:min(300px,56vw);filter:drop-shadow(0 34px 40px rgba(91,168,74,.25))}
.mist-bub{position:absolute;background:var(--cream3);border:4px solid var(--avo8);border-radius:999px;padding:12px 30px;font-family:var(--fh);font-size:clamp(22px,3vw,36px);color:var(--avo8);white-space:nowrap;box-shadow:0 6px 0 var(--avo9),0 0 40px 2px rgba(91,168,74,.3)}
.mist-bub.in{animation:bubWig 3.5s .7s ease-in-out infinite}
@keyframes bubWig{0%,100%{rotate:0deg}25%{rotate:-1.6deg}75%{rotate:1.6deg}}
.b-shoulders{top:2%;left:4%}
.b-backs{top:8%;right:5%}
.b-knees{bottom:24%;left:2%}
.b-hands{bottom:30%;right:4%}
.b-legs{bottom:-2%;left:32%}

/* ── punch section ── */
.punch{background:var(--orange);padding:80px 24px;text-align:center}
.punch .row{font-family:var(--fd);font-style:italic;font-size:clamp(30px,5.4vw,76px);margin:20px 0;position:relative;display:block}
.punch .row .hlx{position:relative;display:inline-block;padding:0 14px}
.punch .row .hlx u{position:absolute;left:2%;right:2%;bottom:4%;height:46%;background:var(--avo2);border-radius:12px;transform:scaleX(0);transform-origin:left center;transition:transform .7s .25s var(--es);z-index:0}
.punch .row.in .hlx u{transform:scaleX(1)}
.punch .row .hlx i{position:relative;z-index:1}
.p1{color:var(--avo8)}.p2{color:var(--blue)}.p3{color:var(--avo7)}

/* ── receipts / story ── */
.story{background:var(--cream);color:var(--blue);padding:110px 0}
.story .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.story img{border-radius:26px;box-shadow:0 30px 60px -24px rgba(17,69,31,.4)}
.story .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--avo1);color:var(--avo8);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.story h2{font-family:var(--fd);font-size:clamp(34px,4.4vw,58px);color:var(--avo8);line-height:1.24;margin:0 0 18px}
.story .hl2{font-style:italic;background:var(--avo2);border-radius:6px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.story p{margin:0 0 15px}
.story .pull{background:var(--cream3);border:2.5px solid var(--avo8);border-radius:22px;padding:20px 26px;font-family:var(--fd);font-style:italic;font-size:18.5px;color:var(--avo8);margin-top:24px;line-height:1.5}
.story .pull cite{display:block;font-family:var(--fs);font-style:normal;font-weight:800;font-size:13px;margin-top:8px;color:var(--avo6)}
.dance{margin-top:90px}

/* ── testimonials ticker ── */
.proof{background:var(--cream);color:var(--blue);padding:0 0 110px}
.proof h2{font-family:var(--fc);font-size:clamp(30px,4vw,52px);color:var(--avo8);text-align:center;text-transform:uppercase;margin:0 0 44px;letter-spacing:.02em}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:0 24px}
.t{background:var(--cream1);border:2.5px solid var(--avo8);border-radius:22px;padding:26px;box-shadow:0 6px 0 var(--avo8)}
.t .stars{color:var(--orange);letter-spacing:3px;font-size:16px;margin-bottom:12px}
.t p{margin:0 0 14px;font-size:15px}
.t cite{font-style:normal;font-weight:800;font-size:13px;color:var(--avo8)}

/* ── offer ── */
.offer{background:#F3F6FF;color:var(--blue);text-align:center;padding:40px 24px 110px;position:relative;overflow:hidden}
.offer img.lock{width:min(680px,86vw);margin:0 auto 18px;display:block}
.offer .lead{font-weight:700;font-size:20px;margin:0 0 8px}
.offer .scents{display:flex;justify-content:center;gap:16px;margin:34px 0}
.offer .scents img{width:110px;height:110px;object-fit:cover;border-radius:20px;border:3px solid var(--avo8);transition:transform .25s var(--eb)}
.offer .scents img:hover{transform:translateY(-6px) rotate(-2deg)}
.offer .thank{font-family:var(--fh);font-size:clamp(38px,5vw,64px);color:var(--avo7);transform:rotate(-2deg);margin-top:36px;line-height:1.05}
.offer .fine{font-size:12.5px;color:#7286c9;margin-top:20px}

/* ── promise ── */
.promise{background:var(--avo8);padding:100px 0}
.promise .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.promise img.badge{max-width:280px;display:block;margin:0 auto;transform:rotate(-2deg)}
.promise h2{font-family:var(--fd);font-size:clamp(32px,4vw,52px);color:var(--cream1);margin:0 0 16px}
.promise p{color:var(--avo1);font-size:17px}
.promise cite{display:block;font-style:normal;font-weight:800;margin-top:12px;color:var(--avo4)}

/* ── final ── */
.final{background:var(--night);text-align:center;padding:130px 24px 150px;position:relative;overflow:hidden}
.final .chunk{font-size:clamp(40px,7vw,96px);color:var(--cream1)}
.final .chunk .not{color:var(--avo4)}
.final .itsavo{font-size:clamp(48px,8.4vw,120px);color:var(--avo4);margin-top:10px;text-shadow:0 0 70px rgba(132,200,74,.45)}
.final p{color:var(--avo2);max-width:520px;margin:22px auto}
.final .hand{font-size:clamp(28px,3.6vw,44px);display:block;margin:8px 0 30px;transform:rotate(-2deg)}

/* ── footer ── */
footer{background:#040705;color:var(--avo5);padding:40px 24px;font-size:12.5px;text-align:center}
footer .fda{opacity:.7;max-width:600px;margin:14px auto 0;line-height:1.6}
footer img{height:30px;filter:brightness(0) invert(.9);opacity:.85;margin-bottom:12px}

/* sticky mobile CTA */
.sticky-cta{position:fixed;bottom:14px;left:50%;transform:translate(-50%,120px);z-index:90;transition:transform .5s var(--eb)}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta .btn{padding:14px 30px;font-size:15px}

@media(max-width:880px){
  .story .grid,.promise .grid{grid-template-columns:1fr;gap:36px}
  .proof-grid{grid-template-columns:1fr;max-width:460px}
  .pitfacts{grid-template-columns:1fr;max-width:460px}
  .mist-stage{min-height:520px}
  .mist-bub{padding:8px 18px;box-shadow:0 4px 0 var(--avo9),0 0 24px 2px rgba(91,168,74,.3)}
  .b-shoulders{top:0;left:2%}
  .b-backs{top:6%;right:2%}
  .b-knees{bottom:22%;left:1%}
  .b-hands{bottom:30%;right:2%}
  .b-legs{bottom:-1%;left:auto;right:10%}
  .hero{min-height:64vh;padding:36px 20px 56px}
  .pit{padding:48px 18px 70px}
  .story{padding:70px 0}
  .dance{margin-top:60px}
  .proof{padding:0 0 70px}
  .offer{padding:70px 20px}
  .offer .scents img{width:86px;height:86px}
  .promise{padding:64px 0}
  .promise .grid{text-align:center}
  .final{padding:80px 20px 110px}
  .mist{padding:70px 0}
  .punch{padding:80px 18px}
  .punch .row{white-space:normal}
  .nav img{height:32px}
  .ticker{font-size:12px}
  .btn{padding:15px 28px;font-size:16px}
  .wrap{padding:0 20px}
  .sticky-cta .btn{padding:12px 24px;font-size:14px;white-space:nowrap}
}