:root{--navy:#21223F;--teal:#1A907E;--teal2:#22b39c;--bg:#f6f8fb;--card:#fff;--line:#e5e9f0;--ink:#1d2433;--muted:#667085;--amber:#f59e0b;--red:#e5484d;--r:14px;--sh:0 6px 24px rgba(33,34,63,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
a{color:var(--teal);text-decoration:none}img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
/* top bar */
.topline{background:var(--navy);color:#cfd3ea;font-size:12.5px}
.topline .wrap{display:flex;justify-content:space-between;gap:10px;padding:7px 18px}
.topline a{color:#fff}
.marquee{overflow:hidden;white-space:nowrap;flex:1}.marquee span{display:inline-block;animation:mq 22s linear infinite}
@keyframes mq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
header.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;transition:box-shadow .3s}
header.nav.scrolled{box-shadow:var(--sh)}
header.nav .wrap{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:17px;letter-spacing:.2px}
.logo img{height:42px;width:auto}.logo small{display:block;font-weight:600;color:var(--teal);font-size:11px;letter-spacing:2px}
.search{flex:1;display:flex;max-width:460px}
.search input{flex:1;border:1.5px solid var(--line);border-right:0;border-radius:999px 0 0 999px;padding:10px 16px;font:inherit;outline:none;transition:border .2s}
.search input:focus{border-color:var(--teal)}
.search button{border:0;background:var(--teal);color:#fff;padding:0 18px;border-radius:0 999px 999px 0;cursor:pointer;font-weight:700}
.navlinks{display:flex;align-items:center;gap:14px;margin-left:auto;font-weight:600;font-size:14px}
.navlinks a{color:var(--navy)}
.lang a{padding:3px 7px;border-radius:6px;font-size:12px;color:var(--muted)}.lang a.on{background:var(--navy);color:#fff}
.cartbtn{position:relative;background:var(--navy);color:#fff!important;padding:9px 14px;border-radius:999px}
.badge-n{position:absolute;top:-6px;right:-6px;background:var(--amber);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;animation:pop .5s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.catbar{background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.catbar .wrap{display:flex;gap:6px;padding:8px 18px;white-space:nowrap}
.catbar a{padding:7px 14px;border-radius:999px;color:var(--navy);font-weight:600;font-size:13.5px;transition:.2s}
.catbar a:hover{background:#eef7f5}.catbar a.on{background:var(--teal);color:#fff}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#e8f6f3,#fff 45%,#eceefb);padding:46px 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 12px;color:var(--navy)}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal),#3cc6ad,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200%}}
.hero p{color:var(--muted);font-size:16.5px;margin:0 0 20px}
.hero .slides{position:relative;height:300px}
.hero .slide{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.97);transition:all .8s ease;display:grid;place-items:center}
.hero .slide.on{opacity:1;transform:none}
.hero .slide img{max-height:300px;filter:drop-shadow(0 18px 30px rgba(33,34,63,.18));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;animation:drift 14s ease-in-out infinite alternate}
.blob.a{width:280px;height:280px;background:var(--teal);top:-80px;right:10%}.blob.b{width:220px;height:220px;background:#7c83db;bottom:-90px;left:5%;animation-delay:-5s}
@keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
.dots{display:flex;gap:6px;margin-top:16px}.dots button{width:10px;height:10px;border-radius:5px;border:0;background:#c9cfdb;cursor:pointer;transition:.3s}.dots button.on{width:28px;background:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:700;padding:11px 20px;border-radius:999px;background:var(--teal);color:#fff;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(26,144,126,.3)}
.btn.navy{background:var(--navy)}.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}.btn.red{background:var(--red)}.btn.sm{padding:7px 13px;font-size:13px}
.btn.block{width:100%;justify-content:center}
/* sections */
section.s{padding:38px 0}.s h2{font-size:26px;color:var(--navy);margin:0 0 4px}.s .sub{color:var(--muted);margin:0 0 20px}
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-22px;position:relative;z-index:2}
.usp div{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh);display:flex;gap:12px;align-items:center;font-size:13.5px}
.usp b{display:block;color:var(--navy);font-size:14.5px}.usp i{font-style:normal;font-size:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;color:inherit;position:relative}
.pcard:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(33,34,63,.12);border-color:#cfe9e4}
.pcard .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#f1f7f6,#f4f5fb);display:grid;place-items:center;padding:16px;overflow:hidden}
.pcard .ph img{max-height:150px;transition:transform .4s}.pcard:hover .ph img{transform:scale(1.08) rotate(-2deg)}
.pcard .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard h3{font-size:15px;margin:0;color:var(--navy)}
.pcard .meta{font-size:12.5px;color:var(--muted)}
.pcard .price{margin-top:auto;font-weight:800;color:var(--teal);font-size:16px}.pcard .price small{color:var(--muted);font-weight:500;font-size:12px}
.pill{position:absolute;top:10px;left:10px;font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 9px;border-radius:999px;color:#fff;background:var(--red);letter-spacing:.5px}
.pill.new{background:var(--teal)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
/* product page */
.pp{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:#fff;border-radius:18px;padding:24px;border:1px solid var(--line)}
.pp .gal{background:linear-gradient(135deg,#eef7f5,#f2f3fb);border-radius:14px;display:grid;place-items:center;min-height:360px;padding:20px}
.pp .gal img{max-height:340px;animation:float 6s ease-in-out infinite}
.pp h1{margin:0 0 6px;color:var(--navy);font-size:28px}
.specs{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:6px}.specs li{background:#f1f5f9;border-radius:8px;padding:5px 10px;font-size:13px}
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0}
.tiers label{border:1.5px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:center;transition:.2s;position:relative}
.tiers input{position:absolute;opacity:0}
.tiers label:hover{border-color:var(--teal)}.tiers label:has(input:checked){border-color:var(--teal);background:#eaf7f4;box-shadow:0 0 0 3px rgba(26,144,126,.15)}
.tiers b{display:block;color:var(--navy)}.tiers span{color:var(--teal);font-weight:800}.tiers small{display:block;color:var(--muted);font-size:11px}
.total-box{background:var(--navy);color:#fff;border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.total-box b{font-size:24px}
.crumbs{font-size:13px;color:var(--muted);margin:18px 0}
/* forms + tables */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1/-1}
label.f{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:4px}
input.i,select.i,textarea.i{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;outline:none;transition:border .2s,box-shadow .2s}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,144,126,.12)}
table.t{width:100%;border-collapse:collapse;font-size:14px}.t th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--muted);padding:10px;border-bottom:1px solid var(--line);letter-spacing:.4px}
.t td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.t tr{transition:background .2s}.t tbody tr:hover{background:#f8fbfa}
.r{text-align:right}
.st{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.st.amber{background:#fff4dd;color:#a16207}.st.teal{background:#e2f5f1;color:#0f766e}.st.blue{background:#e5efff;color:#1d4ed8}.st.violet{background:#efe9ff;color:#6d28d9}.st.navy{background:#e7e8f3;color:var(--navy)}.st.green{background:#e3f7e8;color:#15803d}.st.red{background:#fde8e8;color:#b91c1c}
.flash{padding:12px 16px;border-radius:12px;margin:16px 0;font-weight:600;animation:slidein .5s}.flash.ok{background:#e2f5f1;color:#0f766e}.flash.err{background:#fde8e8;color:#b91c1c}.flash.warn{background:#fff4dd;color:#a16207}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}}
.auth{max-width:440px;margin:40px auto}
.sum-row{display:flex;justify-content:space-between;padding:6px 0}.sum-row.big{font-size:19px;font-weight:800;color:var(--navy);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.steps span{font-size:12px;padding:4px 10px;border-radius:999px;background:#eef1f5;color:var(--muted)}.steps span.done{background:var(--teal);color:#fff}
/* footer */
footer{background:var(--navy);color:#c4c8e0;margin-top:50px;padding:36px 0 18px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}footer h4{color:#fff;margin:0 0 10px}footer a{color:#e6e8f5}
.pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pay span{background:#fff;color:var(--navy);font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px}
.credit{border-top:1px solid #34365a;margin-top:24px;padding-top:14px;font-size:12px;color:#a6aac6;text-align:center}
.credit a{color:#d9dcf0}
.wa-float{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:40;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}.empty .ic{font-size:48px;animation:float 3s ease-in-out infinite}
@media(max-width:860px){.hero .wrap,.pp,.form-grid,footer .cols{grid-template-columns:1fr}.hero h1{font-size:30px}.hero .slides{height:220px}.usp{grid-template-columns:1fr 1fr}.search{display:none}.navlinks{gap:10px;font-size:13px}.hide-m{display:none}}

.mnav{display:none}
:focus-visible{outline:3px solid rgba(26,144,126,.5);outline-offset:2px}
@media(max-width:860px){
 body{padding-bottom:70px}
 .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:45;box-shadow:0 -6px 20px rgba(33,34,63,.08);padding-bottom:env(safe-area-inset-bottom)}
 .mnav a,.mnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:11px;font-weight:600;color:var(--muted);background:none;border:0;font-family:inherit;position:relative;cursor:pointer}
 .mnav form{flex:1;display:flex}.mnav i{font-style:normal;font-size:20px;transition:transform .2s}.mnav a.on{color:var(--teal)}.mnav a.on i{transform:translateY(-3px) scale(1.15)}
 .mnav b{position:absolute;top:2px;left:54%;background:var(--amber);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center}
 .wa-float{bottom:84px;width:50px;height:50px}
 header.nav .wrap{height:58px}.logo img{height:34px}.cartbtn{padding:8px 12px}
 .grid{grid-template-columns:1fr 1fr;gap:10px}.pcard .ph img{max-height:100px}.pcard h3{font-size:13.5px}
 .tiers{grid-template-columns:1fr 1fr 1fr}.pp{padding:14px}.pp .gal{min-height:220px}.pp .gal img{max-height:200px}
 .btn{min-height:44px}input.i,select.i,textarea.i{font-size:16px}
 .t{font-size:13px}.usp div{padding:12px;font-size:12.5px}
}