:root{--lime:#c6ff1a;--lime-soft:#e9ffa8;--ink:#000;--paper:#fff;--grey:#f2f2f0;--mute:#5a5a5a;--r:28px;--h:'Bricolage Grotesque','Arial Black',sans-serif;--b:'Inter',system-ui,Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--b);color:var(--ink);background:var(--paper);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.wrap{width:min(1180px,92%);margin:auto}
section{padding:96px 0}
h1,h2,h3{font-family:var(--h);line-height:1.02;letter-spacing:-.02em}
h1{font-size:clamp(2.8rem,7.2vw,5.8rem);font-weight:800}
h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;margin-bottom:18px}
h3{font-size:1.35rem;font-weight:700;margin-bottom:8px}
.hl{background:var(--lime);padding:0 .18em;border-radius:.22em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:1.15rem;color:var(--mute);max-width:640px}
.center{text-align:center}.center .lead{margin:auto}
.btn{display:inline-block;padding:15px 30px;border-radius:16px;background:var(--ink);color:var(--lime);font-weight:600;text-decoration:none;border:2px solid var(--ink);transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;font-size:1rem;font-family:var(--b)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.22)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--lime)}
.btn.lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.nav img{height:44px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;padding:0}
.nav ul a{text-decoration:none;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover{border-color:var(--lime)}
.nav .btn{padding:12px 24px}
.burger{display:none;background:none;border:0;font-size:1.8rem;cursor:pointer}
/* hero */
.hero{padding:40px 0 90px}
.hero-card{position:relative;background:var(--lime);border-radius:40px;padding:80px 6%;overflow:hidden;min-height:620px;display:flex;align-items:center}
.hero-card .txt{position:relative;z-index:2;max-width:720px}
.hero-card h1 .w{background:#fff;padding:0 .16em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-card p.sub{font-weight:600;font-size:1.2rem;margin:26px 0 8px}
.hero-card p.desc{max-width:600px;margin-bottom:32px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
/* glass 3D objects */
.g{position:absolute;z-index:1;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);animation:float 7s ease-in-out infinite;box-shadow:inset 0 0 40px rgba(255,255,255,.55),0 30px 60px rgba(0,60,0,.18)}
.g1{width:260px;height:340px;right:9%;top:12%;border-radius:36px 36px 20px 20px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 60%,rgba(0,0,0,.2));transform:rotate(-9deg)}
.g1::after{content:"";position:absolute;left:14%;right:14%;top:22%;height:34%;border-radius:14px;background:#000;opacity:.9}
.g2{width:150px;height:150px;right:3%;bottom:8%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,rgba(255,255,255,.1) 55%,rgba(0,0,0,.35));animation-delay:-2s}
.g3{width:120px;height:120px;right:33%;bottom:12%;border-radius:30px;background:linear-gradient(200deg,#000 40%,#3d3d3d);transform:rotate(18deg);animation-delay:-4s}
.g4{width:90px;height:220px;right:24%;top:6%;border-radius:45px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.05),rgba(0,0,0,.2));animation-delay:-1s}
@keyframes float{50%{translate:0 -22px}}
.trust{display:flex;gap:14px 34px;flex-wrap:wrap;justify-content:center;margin-top:34px;font-weight:600;color:var(--mute)}
/* cards */
.grid{display:grid;gap:22px;margin-top:48px}
.g3c{grid-template-columns:repeat(3,1fr)}
.card{background:var(--grey);border-radius:var(--r);padding:34px;transition:transform .25s,box-shadow .25s,background .25s}
.card:hover{transform:translateY(-6px);background:var(--lime-soft);box-shadow:0 20px 40px rgba(0,0,0,.09)}
.card .ic{width:54px;height:54px;border-radius:16px;background:var(--ink);display:grid;place-items:center;color:var(--lime);font-size:1.5rem;margin-bottom:22px}
.card p{color:var(--mute)}
/* amazon */
.dark{background:var(--ink);color:#fff}
.dark .lead,.dark .card p{color:#bbb}
.dark .card{background:#161616}
.dark .card:hover{background:#1f2a08}
.az{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.az ul{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:16px}
.az li{padding-left:36px;position:relative}
.az li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--lime)}
.az li b{color:var(--lime)}
.mock{position:relative;height:440px;border-radius:36px;background:radial-gradient(circle at 50% 40%,#2a3a05,#0b0b0b 70%);overflow:hidden}
.mock .box{position:absolute;left:50%;top:50%;width:170px;height:250px;translate:-50% -50%;border-radius:22px;background:linear-gradient(135deg,var(--lime),#7db800);box-shadow:0 40px 80px rgba(198,255,26,.25);animation:float 6s ease-in-out infinite}
.mock .box::after{content:"PB";position:absolute;inset:auto 0 30px;text-align:center;font:800 2.2rem var(--h)}
.mock span{position:absolute;padding:8px 16px;border-radius:99px;background:#fff;color:#000;font-weight:600;font-size:.85rem}
/* portfolio */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0}
.filters button{padding:10px 20px;border-radius:99px;border:2px solid var(--ink);background:#fff;font:500 .95rem var(--b);cursor:pointer;transition:.2s}
.filters button:hover,.filters button.on{background:var(--ink);color:var(--lime)}
.pf{grid-template-columns:repeat(4,1fr);margin-top:0}
.tile{position:relative;aspect-ratio:1/1.1;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;padding:22px;text-decoration:none;color:#000;transition:transform .3s,opacity .3s}
.tile:hover{transform:scale(1.03)}
.tile.hide{display:none}
.tile::before{content:"";position:absolute;width:55%;aspect-ratio:1;left:22%;top:14%;border-radius:var(--rad,26%);background:var(--sh);box-shadow:0 26px 40px rgba(0,0,0,.25);rotate:var(--rot,-8deg)}
.tile b{position:relative;background:#fff;padding:6px 14px;border-radius:99px;font-size:.9rem}
.t1{background:var(--lime);--sh:linear-gradient(135deg,#fff,#000)}
.t2{background:#111;--sh:linear-gradient(135deg,var(--lime),#4a7000);color:#fff}
.t3{background:var(--grey);--sh:linear-gradient(160deg,#000,#444);--rad:14%}
.t4{background:var(--lime-soft);--sh:radial-gradient(circle at 30% 30%,#fff,var(--lime));--rad:50%}
.t5{background:#000;--sh:linear-gradient(135deg,rgba(255,255,255,.7),rgba(198,255,26,.4));--rad:38%;--rot:14deg}
.t6{background:#d8d8d4;--sh:linear-gradient(135deg,var(--lime),#fff);--rad:20%}
.t7{background:var(--lime);--sh:linear-gradient(200deg,#000,#333);--rad:50%;--rot:0deg}
.t8{background:#1b1b1b;--sh:linear-gradient(135deg,#fff,var(--lime));--rad:10%;--rot:-16deg}
/* pricing */
.prices{grid-template-columns:repeat(4,1fr);align-items:stretch}
.price{background:var(--grey);border-radius:var(--r);padding:34px;display:flex;flex-direction:column}
.price.hot{background:var(--lime)}
.price.cq{background:var(--ink);color:#fff}
.amt{font:800 3.2rem var(--h);letter-spacing:-.03em;margin:8px 0 4px}
.price ul{list-style:none;padding:0;margin:18px 0 28px;display:grid;gap:10px;flex:1;font-size:.96rem}
.price li::before{content:"✓ ";font-weight:800}
.price .btn{text-align:center}
.price.hot .btn{background:#000}
.price.cq .btn{background:var(--lime);color:#000;border-color:var(--lime)}
.note{margin-top:22px;color:var(--mute);font-size:.95rem}
/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px;counter-reset:s}
.step{background:#fff;border:2px solid #000;border-radius:var(--r);padding:26px 22px;position:relative;counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);font:800 1rem var(--h);margin-bottom:14px}
.step p{color:var(--mute);font-size:.92rem}
/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about .pic{aspect-ratio:1;border-radius:var(--r);background:var(--lime);display:grid;place-items:center}
.about .pic img{width:62%;border-radius:50%}
.about p{margin-bottom:16px;color:var(--mute)}
.vals{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.vals span{background:#000;color:var(--lime);padding:10px 20px;border-radius:99px;font-weight:600}
/* blog */
.blog{grid-template-columns:repeat(3,1fr)}
.post{background:#fff;border:2px solid #000;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;transition:.25s}
.post:hover{background:var(--lime);transform:translateY(-5px)}
.post small{color:var(--mute);font-weight:600;margin-bottom:12px}
.post:hover small{color:#000}
.post h3{font-size:1.2rem}
.post p{color:var(--mute);font-size:.94rem;flex:1;margin-bottom:16px}
.post:hover p{color:#000}
.post a{font-weight:600}
/* contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;border-radius:40px;overflow:hidden;margin-top:48px}
.contact form{background:var(--lime);padding:44px;display:grid;gap:16px}
.contact label{font-weight:600;font-size:.9rem;display:grid;gap:6px}
.contact input,.contact select,.contact textarea{width:100%;padding:14px 16px;border-radius:14px;border:0;background:#000;color:#fff;font:1rem var(--b)}
.contact input::placeholder,.contact textarea::placeholder{color:#8fa84a}
.contact input[type=file]{padding:11px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info{background:#111;color:#fff;padding:44px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.info a{display:flex;gap:14px;align-items:center;text-decoration:none;font-weight:500;word-break:break-word}
.info a i{font-style:normal;background:var(--lime);color:#000;min-width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.info a:hover{color:var(--lime)}
#formMsg{font-weight:600}
/* final cta + footer */
.final{background:var(--grey);text-align:center}
footer{background:#111;color:#fff;padding:70px 0 30px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.fg h4{color:var(--lime);font:700 1.1rem var(--h);margin-bottom:14px}
.fg a{display:block;text-decoration:none;color:#ddd;margin-bottom:8px}
.fg a:hover{color:var(--lime)}
.brand{display:flex;align-items:center;gap:12px;font:800 1.5rem var(--h);margin-bottom:12px}
.brand img{width:48px;height:48px;border-radius:50%}
.copy{border-top:1px solid #333;margin-top:44px;padding-top:24px;text-align:center;color:#999;font-size:.9rem}
.wa{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--lime);color:#000;padding:14px 22px;border-radius:99px;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media(max-width:980px){
.g3c,.blog{grid-template-columns:1fr 1fr}.pf,.prices{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
.az,.about,.contact,.fg{grid-template-columns:1fr}.g1{opacity:.4}
.burger{display:block}
.nav ul{position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;padding:20px 6%;gap:16px;display:none;border-bottom:1px solid #eee}
.nav ul.open{display:flex}.nav .btn{display:none}}
@media(max-width:600px){section{padding:64px 0}.g3c,.blog,.pf,.prices,.steps,.two{grid-template-columns:1fr}.hero-card{padding:56px 6%;min-height:0}.g2,.g3,.g4{display:none}.contact form,.info{padding:28px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

@view-transition{navigation:auto}
header{view-transition-name:hdr}
::view-transition-old(root){animation:.3s ease both vout}
::view-transition-new(root){animation:.5s cubic-bezier(.2,.8,.2,1) both vin}
@keyframes vout{to{opacity:0;transform:translateY(-14px)}}
@keyframes vin{from{opacity:0;transform:translateY(18px)}}
.prog{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);z-index:99}
.hero-card .txt>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-card .txt>*:nth-child(2){animation-delay:.2s}.hero-card .txt>*:nth-child(3){animation-delay:.3s}.hero-card .txt>*:nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
.hero-card h1 .w{background:linear-gradient(#fff,#fff) 0 0/0 100% no-repeat;animation:wipe .8s .7s ease forwards}
@keyframes wipe{to{background-size:100% 100%}}
.ob{position:absolute;z-index:1;height:auto;filter:drop-shadow(0 30px 28px rgba(0,50,0,.28));animation:pop .9s cubic-bezier(.2,.8,.2,1) both,float 7s ease-in-out infinite;transition:transform .25s ease-out}
.ob1{width:210px;right:9%;top:9%}
.ob2{width:190px;right:21%;bottom:5%;animation-delay:.15s,-2s}
.ob3{width:150px;right:2%;bottom:9%;animation-delay:.3s,-4s}
@keyframes pop{from{opacity:0;scale:.6}}
.marq{overflow:hidden;background:#000;color:var(--lime);border-radius:99px;margin-top:22px;padding:14px 0;font:700 1.1rem var(--h);white-space:nowrap}
.marq div{display:inline-block;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.card .ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.card:hover .ic{transform:rotate(-12deg) scale(1.12)}
.tile::before{background:var(--img) center/contain no-repeat!important;border-radius:0!important;box-shadow:none!important;rotate:0deg!important;width:66%;left:17%;top:8%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover::before{transform:translateY(-12px) rotate(-6deg) scale(1.08)}
.t1{--img:url(assets/bottle.svg)}.t2{--img:url(assets/box.svg)}.t3{--img:url(assets/box.svg)}.t4{--img:url(assets/jar.svg)}.t5{--img:url(assets/sphere.svg)}.t6{--img:url(assets/bottle.svg)}.t7{--img:url(assets/sphere.svg)}.t8{--img:url(assets/box.svg)}
.t3::before{filter:grayscale(1) contrast(1.15)}.t6::before{scale:-1 1}
.mock .bx{position:absolute;left:50%;top:50%;width:250px;height:auto;margin:-136px 0 0 -125px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(198,255,26,.3))}
.mock span{animation:float 5s ease-in-out infinite}.mock span:nth-of-type(2){animation-delay:-2s}.mock span:nth-of-type(3){animation-delay:-3.5s}
@media(max-width:600px){.ob{opacity:.3}.ob1{right:-2%}.ob2{display:none}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.hero-card h1 .w{background-size:100% 100%}.rv{opacity:1;transform:none}}

.btn{color:#fff;position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;background:var(--lime);transform:translateY(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn:hover{color:#000}.btn:hover::before{transform:none}
.btn.alt{color:var(--ink)}.btn.alt::before{background:var(--ink)}.btn.alt:hover{background:transparent;color:#fff}
.btn.lime{color:#000}.btn.lime::before{background:#fff}.btn.lime:hover{color:#000}
.price.hot .btn{background:#000;color:#fff}.price.hot .btn:hover{color:#000}
.price.cq .btn{color:#000}.price.cq .btn::before{background:#fff}
.card .ic{background:var(--lime);color:#000;border:2px solid #000;border-radius:18px;box-shadow:4px 4px 0 #000;width:58px;height:58px}
.card:hover .ic{background:#000;color:var(--lime);transform:rotate(-10deg) scale(1.1);box-shadow:0 0 0 #000}
.vals span{background:#fff;color:#000;border:2px solid #000;box-shadow:3px 3px 0 var(--lime)}
.filters button:hover,.filters button.on{background:#000;color:#fff}
.info a i{background:#fff}

.lead.center{margin-left:auto;margin-right:auto}
.price,.price.hot,.price.cq{background:#fff;color:#000;border:2px solid #000;transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.price:hover{background:#000;color:#fff;transform:translateY(-8px);box-shadow:0 24px 40px rgba(0,0,0,.2)}
.price:hover .amt{color:var(--lime)}
.price .btn,.price.hot .btn,.price.cq .btn{background:#000;color:#fff;border-color:#000}
.price:hover .btn,.price.hot:hover .btn,.price.cq:hover .btn{background:var(--lime);color:#000;border-color:var(--lime)}
.price:hover .btn::before{background:#fff}
.tile{padding:0;display:block;background:#111}
.tile::before{display:none!important}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s}
.tile::after{content:"";position:absolute;inset:14px;border:2px solid var(--lime);border-radius:20px;opacity:0;transform:scale(1.08);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);z-index:2;pointer-events:none}
.tile .ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 65%);opacity:0;transition:opacity .4s}
.tile .ov small{color:var(--lime);font-weight:600;transform:translateY(16px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile .ov b{background:none;padding:0;color:#fff;font:800 1.5rem var(--h);transform:translateY(20px);transition:transform .5s .05s cubic-bezier(.2,.8,.2,1)}
.tile .go{position:absolute;right:24px;top:24px;width:46px;height:46px;padding:12px;border-radius:50%;background:var(--lime);transform:scale(.4) rotate(-45deg);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s}
.tile:hover{transform:none}.tile:hover img{transform:scale(1.1)}.tile:hover::after{opacity:1;transform:scale(1)}.tile:hover .ov{opacity:1}.tile:hover .ov small,.tile:hover .ov b{transform:none}.tile:hover .go{opacity:1;transform:none}
@media(hover:none){.tile .ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 45%)}.tile .ov small,.tile .ov b{transform:none}}
.wa{padding:0;width:62px;height:62px;display:grid;place-items:center;border-radius:50%}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ping 2.4s infinite}
@keyframes ping{to{transform:scale(1.55);opacity:0}}
.fg .soc{display:flex;gap:10px;margin-top:20px}
.fg .soc a{width:44px;height:44px;border-radius:12px;background:var(--lime);display:grid;place-items:center;margin:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
.fg .soc a:hover{transform:translateY(-5px) rotate(-6deg);background:#fff}
.soc img,.info a i img{width:24px;height:24px}
.sub h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}.cur{border-color:var(--lime)!important}.art{max-width:760px;margin:auto}.art h1{margin-bottom:24px}.art h2{font-size:1.9rem;margin:38px 0 12px}.art p,.art li{color:#333;margin-bottom:14px;font-size:1.08rem}.art ul{padding-left:22px}.crumb{font-size:.9rem;color:var(--mute);margin-bottom:18px}.crumb a{font-weight:600}.faq details{background:var(--grey);border-radius:20px;padding:20px 26px;margin-bottom:14px}.faq summary{font:700 1.15rem var(--h);cursor:pointer}.faq p{margin-top:12px;color:var(--mute)}.post.soon{opacity:.65}.post.soon:hover{background:#fff;transform:none}.post span{font-weight:600;color:var(--mute)}