*{margin:0;padding:0;box-sizing:border-box}
:root{--y:#f5c800;--y2:#fff8c0;--y3:#fffdf0;--dk:#1a1200;--muted:#7a6500;--border:#f0d800;--r:14px}
body{font-family:'Poppins',sans-serif;background:#fffdf0;color:var(--dk);overflow-x:hidden}
nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 2rem;background:#fff;position:sticky;top:0;z-index:100;border-bottom:2.5px solid var(--y);box-shadow:0 2px 12px rgba(245,200,0,.1)}
.logo-img{height:56px;width:auto}
.nav-links{display:flex;gap:1.5rem;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.83rem;font-weight:600}
.nav-links a:hover{color:var(--dk)}
.nav-cta{background:var(--y);border:none;color:var(--dk);padding:.45rem 1.1rem;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer}
.wa-float{position:fixed;bottom:20px;right:20px;background:#25d366;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;text-decoration:none;z-index:999;box-shadow:0 4px 16px rgba(37,211,102,.35)}
.hero{padding:2.5rem 2rem 2rem;text-align:center;background:linear-gradient(160deg,#fffdf0 0%,#fff8c0 60%,#fffdf0 100%)}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--y);color:var(--dk);border-radius:999px;padding:.28rem .9rem;font-size:.75rem;font-weight:700;margin-bottom:.9rem}
.hero h1{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:900;line-height:1.15;margin-bottom:.7rem;color:var(--dk)}
.hero h1 .hl{background:var(--y);padding:0 .3rem;border-radius:5px}
.hero p{color:var(--muted);font-size:.92rem;max-width:520px;margin:0 auto 1.5rem;line-height:1.75;font-weight:500}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}
.btn-main{background:var(--y);border:none;color:var(--dk);padding:.65rem 1.7rem;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:800;font-size:.88rem;cursor:pointer;box-shadow:0 4px 14px rgba(245,200,0,.4)}
.btn-outline{background:transparent;border:2.5px solid var(--dk);color:var(--dk);padding:.65rem 1.7rem;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer}
.btn-outline:hover{background:var(--dk);color:var(--y)}
.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.htag{background:#fff;border:2px solid var(--y);color:var(--dk);padding:.22rem .75rem;border-radius:999px;font-size:.73rem;font-weight:700}
.stats-bar{display:flex;justify-content:center;background:var(--dk)}
.stat{flex:1;max-width:210px;padding:1.1rem .8rem;text-align:center;border-right:1px solid rgba(245,200,0,.15)}
.stat:last-child{border:none}
.stat-num{font-size:1.6rem;font-weight:900;color:var(--y)}
.stat-label{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.5);margin-top:.1rem}
.marquee-wrap{background:var(--y);padding:.45rem 0;overflow:hidden;white-space:nowrap}
.marquee-inner{display:inline-flex;gap:2rem;animation:marquee 18s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{color:var(--dk);font-size:.79rem;font-weight:700;padding:0 .8rem}
.sec{padding:2.5rem 2rem}
.sl{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
.st{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;color:var(--dk);margin-bottom:.45rem}
.st span{background:var(--y);padding:0 .22rem;border-radius:4px}
.ss{color:var(--muted);font-size:.86rem;max-width:460px;font-weight:500}
.sh{margin-bottom:1.5rem}
.admin-bar{background:var(--dk);color:#fff;padding:.5rem 2rem;display:none;align-items:center;gap:.8rem;font-size:.78rem;font-weight:600;flex-wrap:wrap}
.admin-bar span{color:var(--y)}
.admin-toggle{background:var(--y);border:none;color:var(--dk);padding:.3rem .8rem;border-radius:6px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.73rem;cursor:pointer}
.edit-mode .editable{background:rgba(245,200,0,.08);cursor:text;border-radius:4px}
.categories{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.3rem}
.cat-btn{background:#fff;border:2px solid var(--border);color:var(--muted);padding:.35rem .95rem;border-radius:999px;font-size:.79rem;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:.2s}
.cat-btn.active,.cat-btn:hover{background:var(--y);border-color:var(--y);color:var(--dk)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.pc{background:#fff;border:2px solid #f0d800;border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s}
.pc:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(245,200,0,.2)}
.pi{height:110px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--y2);overflow:hidden}
.pi img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pi-emoji{font-size:2.5rem;position:relative;z-index:1}
.pi-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;cursor:pointer;z-index:3}
.pc:hover .pi-overlay{opacity:1}
.pi-overlay span{color:#fff;font-size:.72rem;font-weight:700;background:var(--y);color:var(--dk);padding:.22rem .6rem;border-radius:6px}
.pb{position:absolute;top:7px;right:7px;font-size:.65rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;z-index:2}
.ph{background:var(--dk);color:var(--y)}
.pn{background:var(--y);color:var(--dk)}
.pp{background:#fff;color:var(--dk);border:1.5px solid var(--y)}
.pinfo{padding:.75rem .85rem}
.pname{font-weight:700;font-size:.86rem;color:var(--dk);margin-bottom:.12rem}
.pcat{color:var(--muted);font-size:.68rem;margin-bottom:.55rem;font-weight:600}
.pprice{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pnew{font-weight:900;font-size:.98rem;color:var(--dk)}
.pold{color:#bbb;font-size:.74rem;text-decoration:line-through}
.poff{background:var(--y);color:var(--dk);font-size:.63rem;font-weight:800;padding:.1rem .38rem;border-radius:4px}
.pbuy{display:block;width:100%;margin-top:.65rem;padding:.42rem;background:var(--dk);color:var(--y);border:none;border-radius:8px;font-family:'Poppins',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:.2s}
.pbuy:hover{background:var(--y);color:var(--dk)}
.add-product-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--y3);border:2.5px dashed var(--y);border-radius:var(--r);padding:1.5rem;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--muted);width:100%;font-family:'Poppins',sans-serif;transition:.2s}
.add-product-btn:hover{background:var(--y2)}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:14px;padding:1.5rem;width:90%;max-width:460px;border:3px solid var(--y);max-height:88vh;overflow-y:auto}
.modal-box h3{font-size:1rem;font-weight:800;color:var(--dk);margin-bottom:.8rem;border-bottom:2px solid var(--y);padding-bottom:.5rem}
.mrow{margin-bottom:.65rem}
.mrow label{font-size:.73rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.2rem}
.mrow input,.mrow select{width:100%;border:2px solid #f0d800;border-radius:8px;padding:.4rem .7rem;font-family:'Poppins',sans-serif;font-size:.8rem;outline:none}
.mrow input:focus,.mrow select:focus{border-color:var(--y)}
.mrow .hint{font-size:.68rem;color:var(--muted);margin-top:.2rem}
.mactions{display:flex;gap:.6rem;margin-top:.8rem}
.mactions button{flex:1;padding:.48rem;border-radius:8px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;cursor:pointer}
.msave{background:var(--dk);color:var(--y);border:none}
.mcancel{background:transparent;border:2px solid var(--dk);color:var(--dk)}
.mdelete{background:#ffe0e0;color:#cc0000;border:none}
.how-sec{background:var(--y2)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;max-width:840px;margin:0 auto}
.sc{background:#fff;border:2px solid var(--y);border-radius:var(--r);text-align:center;padding:1.3rem 1rem;transition:.2s}
.sc:hover{box-shadow:0 6px 18px rgba(245,200,0,.2);transform:translateY(-3px)}
.sn{width:44px;height:44px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:var(--dk);margin:0 auto .65rem}
.stitle{font-weight:700;font-size:.84rem;color:var(--dk);margin-bottom:.22rem}
.sdesc{color:var(--muted);font-size:.73rem;line-height:1.6;font-weight:500}
.why-sec{background:#fff}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.wc{background:var(--y3);border:2px solid var(--y);border-radius:var(--r);padding:1.1rem 1rem;text-align:center;transition:.2s}
.wc:hover{background:var(--y2);box-shadow:0 5px 16px rgba(245,200,0,.16)}
.wi{font-size:1.7rem;margin-bottom:.55rem;display:block}
.wt{font-weight:700;font-size:.84rem;color:var(--dk);margin-bottom:.22rem}
.wd{color:var(--muted);font-size:.72rem;line-height:1.55;font-weight:500}
.plans-sec{background:var(--dk)}
.plans-sec .sl{color:rgba(245,200,0,.55)}
.plans-sec .st{color:#fff}
.plans-sec .st span{color:var(--y);background:transparent;padding:0}
.plans-sec .ss{color:rgba(255,255,255,.45)}
.pgrd{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;max-width:860px;margin:0 auto}
.plan{background:#2d2000;border:2px solid rgba(245,200,0,.18);border-radius:var(--r);padding:1.5rem 1.3rem;position:relative;transition:.2s}
.plan.feat{border:2.5px solid var(--y)}
.plan:hover{transform:translateY(-3px)}
.ppop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--y);color:var(--dk);font-size:.68rem;font-weight:800;padding:.22rem .82rem;border-radius:999px;white-space:nowrap}
.pln{font-size:.93rem;font-weight:800;color:rgba(255,255,255,.88)}
.plp{font-size:2.1rem;font-weight:900;color:var(--y);margin:.65rem 0 .12rem}
.plp span{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.4)}
.plper{color:rgba(255,255,255,.38);font-size:.72rem;margin-bottom:1rem;font-weight:500}
.plf{list-style:none;margin-bottom:1.4rem}
.plf li{display:flex;align-items:center;gap:.42rem;font-size:.78rem;color:rgba(255,255,255,.68);padding:.3rem 0;border-bottom:1px solid rgba(245,200,0,.07)}
.plf li:last-child{border:none}
.chk{color:var(--y);font-weight:800}
.plbtn{width:100%;padding:.62rem;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s}
.pby{background:var(--y);border:none;color:var(--dk)}
.pby:hover{background:#e0b800}
.pbo{background:transparent;border:2px solid rgba(245,200,0,.3);color:rgba(255,255,255,.7)}
.pbo:hover{background:rgba(245,200,0,.08);border-color:var(--y)}
.testi-sec{background:var(--y2)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.tc{background:#fff;border:2px solid var(--y);border-radius:var(--r);padding:1.1rem}
.tc:hover{box-shadow:0 5px 18px rgba(245,200,0,.16)}
.ts{color:var(--y);font-size:.92rem;margin-bottom:.45rem}
.tt{color:#555;font-size:.77rem;line-height:1.65;margin-bottom:.65rem;font-style:italic}
.tn{font-weight:700;font-size:.8rem;color:var(--dk)}
.tr{color:var(--muted);font-size:.68rem;font-weight:500}
.faq-sec{background:#fff}
.flist{max-width:660px;margin:0 auto}
.fi{background:var(--y3);border:2px solid var(--y);border-radius:var(--r);margin-bottom:.55rem;overflow:hidden}
.fq{padding:.88rem 1.1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.83rem;color:var(--dk)}
.ficon{font-size:1.1rem;transition:.3s;flex-shrink:0;font-weight:800}
.fa{padding:0 1.1rem;color:var(--muted);font-size:.77rem;line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s;font-weight:500}
.fi.open .fa{max-height:180px;padding:0 1.1rem .9rem}
.fi.open .ficon{transform:rotate(45deg)}
.fi.open{background:var(--y2)}
.cta{background:var(--y);padding:2.5rem 2rem;text-align:center}
.cta h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;color:var(--dk);margin-bottom:.55rem}
.cta p{color:var(--muted);font-size:.88rem;margin-bottom:1.4rem;font-weight:600}
.btn-dark{background:var(--dk);color:var(--y);border:none;padding:.7rem 1.8rem;border-radius:999px;font-family:'Poppins',sans-serif;font-weight:800;font-size:.88rem;cursor:pointer}
footer{background:var(--dk);padding:2rem 2rem .9rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.6rem;margin-bottom:1.3rem}
.flogo img{height:50px;width:auto;margin-bottom:.4rem}
.fbrand p{color:rgba(255,255,255,.35);font-size:.75rem;line-height:1.65;max-width:220px;font-weight:500}
.fcol h4{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:.65rem}
.fcol ul{list-style:none}
.fcol ul li a{color:rgba(255,255,255,.35);text-decoration:none;font-size:.75rem;display:block;padding:.2rem 0;font-weight:500;transition:.2s}
.fcol ul li a:hover{color:var(--y)}
.fbot{border-top:1px solid rgba(245,200,0,.1);padding-top:.8rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.fbot p{color:rgba(255,255,255,.22);font-size:.7rem}
.slinks{display:flex;gap:.5rem}
.slinks a{width:30px;height:30px;border-radius:50%;background:rgba(245,200,0,.07);border:1px solid rgba(245,200,0,.18);display:flex;align-items:center;justify-content:center;font-size:.8rem;text-decoration:none;transition:.2s}
.slinks a:hover{background:var(--y)}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}.stats-bar{flex-wrap:wrap}.stat{border-right:none;border-bottom:1px solid rgba(245,200,0,.1)}.nav .nav-links{display:none}}