*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:#fff;color:#4b5563;-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Bricolage Grotesque',sans-serif;color:#111827;font-weight:700}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:'Manrope',sans-serif} :root{
--purple:#6c3aed;--purple-light:#ede9fe;--purple-dark:#4c1d95;
--green:#10b981;--green-light:#d1fae5;--green-dark:#065f46;
--orange:#f59e0b;--orange-light:#fef3c7;
--pink:#ec4899;--pink-light:#fce7f3;
--blue:#3b82f6;--blue-light:#dbeafe;
--bg:#ffffff;--bg2:#f9fafb;--bg3:#f3f4f6;
--text:#111827;--text2:#4b5563;--text3:#9ca3af;
--border:#e5e7eb;--border2:#d1d5db;
--radius:12px;--radius-lg:20px;--radius-xl:28px;
--shadow:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);
--shadow-lg:0 10px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.04);
--shadow-xl:0 20px 50px -12px rgba(0,0,0,0.12);
}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.filled{font-variation-settings:'FILL' 1,'wght' 400} .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.wrap{padding:0 40px}} .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-size:14px;font-weight:700;transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 4px 14px rgba(108,58,237,0.3)}
.btn-primary:hover{background:var(--purple-dark);box-shadow:0 6px 20px rgba(108,58,237,0.4);transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--text);border:1.5px solid var(--border)}
.btn-white:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-light)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.3)}
.btn-green:hover{background:var(--green-dark)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-xs{padding:7px 14px;font-size:12px} .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--purple);padding:6px 16px;background:var(--purple-light);border-radius:999px}
.tag-green{color:var(--green-dark);background:var(--green-light)} .card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);transition:all .25s;overflow:hidden}
.card:hover{border-color:var(--purple);box-shadow:var(--shadow-lg);transform:translateY(-3px)} /* Colored cards */
.card-purple{background:linear-gradient(135deg,#6c3aed,#8b5cf6);color:#fff;border:none}
.card-purple h3,.card-purple h4,.card-purple p{color:#fff}
.card-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:none}
.card-green h3,.card-green h4,.card-green p{color:#fff}
.card-orange{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;border:none}
.card-orange h3,.card-orange h4,.card-orange p{color:#fff}
.card-pink{background:linear-gradient(135deg,#db2777,#ec4899);color:#fff;border:none}
.card-pink h3,.card-pink h4,.card-pink p{color:#fff}
.card-blue{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;border:none}
.card-blue h3,.card-blue h4,.card-blue p{color:#fff}
.card-dark{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;border:none}
.card-dark h3,.card-dark h4,.card-dark p{color:#fff} .fade{opacity:0;transform:translateY(28px);transition:all .7s cubic-bezier(.25,.46,.45,.94)}
.fade.vis{opacity:1;transform:translateY(0)} /* Product grid */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.pgrid{grid-template-columns:repeat(4,1fr)}} /* Bento grid */
.bento{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.bento{grid-template-columns:repeat(3,1fr)}} /* Tab */
.tg{display:inline-flex;padding:4px;background:var(--bg3);border-radius:999px;gap:4px}
.tb{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;background:transparent;color:var(--text3);border:none;transition:all .15s;cursor:pointer}
.tb:hover{color:var(--text)}
.tb.active{background:#fff;color:var(--purple);box-shadow:var(--shadow)} /* Form */
.fi{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:14px;color:var(--text);outline:none;transition:all .2s}
.fi:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(108,58,237,0.08)}
.fi::placeholder{color:var(--text3)}
.fl{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px} /* Nav */
.nav-l{font-size:14px;font-weight:600;color:var(--text2);padding:8px 16px;border-radius:var(--radius);transition:all .15s}
.nav-l:hover{color:var(--purple);background:var(--purple-light)} .hide-m{display:none}
@media(min-width:1024px){.hide-m{display:flex}.hide-d{display:none}} details summary{list-style:none}details summary::-webkit-details-marker{display:none}
details[open] summary .material-symbols-outlined{transform:rotate(180deg)} .status-p{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:var(--green-light);color:var(--green-dark)}
.status-p::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)} /* Purity */
.pu-track{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden}
.pu-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--green));transition:width 1.2s ease} #mm.show{display:block!important}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* Partner Logos */
.partners{padding:40px 0;overflow:hidden;border-bottom:1px solid var(--border)}
.partners__label{font-size:12px;font-weight:700;color:var(--text3);text-align:center;margin-bottom:24px;letter-spacing:1px;text-transform:uppercase}
.partners__track{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.partners__scroll{display:flex;gap:48px;align-items:center;width:max-content;animation:pScroll 25s linear infinite}
.partners__scroll:hover{animation-play-state:paused}
.partners__logo{flex-shrink:0;height:32px;opacity:.4;filter:grayscale(1);transition:all .4s}
.partners__logo:hover{opacity:1;filter:none}
@keyframes pScroll{0%{transform:translateX(0)}100%{transform:translateX(-20%)}} /* Lab/Cert Carousel */
.lab-carousel{padding:80px 0;overflow:hidden}
.lab-carousel__track{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lab-carousel__scroll{display:flex;gap:16px;width:max-content;animation:labScroll 30s linear infinite}
.lab-carousel__scroll:hover{animation-play-state:paused}
.lab-carousel__item{flex-shrink:0;width:210px;height:297px;border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--border);position:relative}
.lab-carousel__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.lab-carousel__item:hover img{transform:scale(1.05)}
.lab-carousel__item:hover .lab-carousel__label{opacity:1;transform:translateY(0)}
.lab-carousel__label{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);opacity:0;transform:translateY(8px);transition:all .4s}
.lab-carousel__label span{font-size:12px;font-weight:700;color:#fff}
@keyframes labScroll{0%{transform:translateX(0)}100%{transform:translateX(-20%)}}
@media(max-width:640px){.lab-carousel__item{width:160px;height:226px}} /* Catalog Grid + Pager */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
.cat-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;transition:all .25s;cursor:pointer}
.cat-card:hover{border-color:var(--purple);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.cat-card.expanded{grid-column:1/-1;border-color:var(--purple)}
.cat-expand{display:none}
.cat-tabs{display:inline-flex;padding:4px;background:var(--bg3);border-radius:999px;gap:4px}
.cat-tab{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;background:transparent;color:var(--text3);border:none;transition:all .15s;cursor:pointer}
.cat-tab:hover{color:var(--text)}.cat-tab.active{background:#fff;color:var(--purple);box-shadow:var(--shadow)}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px}
.pg-btn{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;background:#fff;border:1.5px solid var(--border);color:var(--text2);cursor:pointer;transition:all .2s}
.pg-btn:hover{border-color:var(--purple);color:var(--purple)}
.pg-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.pg-btn:disabled{opacity:.3;cursor:default}
.hot-tag{font-size:9px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--purple);color:#fff} /* ===== Scattered responsive rules ===== */
@media(min-width:1024px){.hero-g{grid-template-columns:1fr 1fr!important}}
@media(max-width:768px){.feat-g{grid-template-columns:1fr!important}}
@media(max-width:768px){.prod-feat{grid-template-columns:1fr!important}}
@media(max-width:768px){.steps-g{grid-template-columns:1fr!important;gap:40px}}
@media(min-width:768px){.bento6{grid-template-columns:repeat(3,1fr)!important}}
@media(min-width:1024px){.qual-g{grid-template-columns:1fr 1fr!important}}
@media(min-width:1024px){.ship-g{grid-template-columns:1fr 1fr!important}}
@media(max-width:768px){.test-g{grid-template-columns:1fr!important}}
@media(min-width:768px){.ft-main{grid-template-columns:1.2fr 2fr!important}.ft-links{grid-template-columns:repeat(3,1fr)!important}} /* ===== QM Form overrides for theme-1 ===== */
.qm-form { display:flex; flex-direction:column; gap:14px; }
.qm-form .qm-field { flex: 1 1 100%; }
.qm-form .qm-field label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px; }
.qm-form .qm-field input,
.qm-form .qm-field select,
.qm-form .qm-field textarea { width:100%; }
.qm-form .qm-req { color:var(--purple); }
.qm-form .qm-btn-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; border-radius:var(--radius); font-weight:700; font-size:15px; background:var(--purple); color:#fff; border:none; cursor:pointer; transition:all 0.2s;
}
.qm-form .qm-btn-submit:hover { background:#5b2cc2; }
.qm-form .qm-btn-submit:disabled { opacity:0.5; cursor:wait; }
.qm-form .qm-form-error { padding:10px 14px; background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:var(--radius); font-size:13px; }
.qm-form .qm-field-error { border-color:#ef4444 !important; }
.qm-form .qm-form-title { font-size:clamp(1.8rem,3.5vw,2.5rem); margin:0 0 10px; }
.qm-form .qm-form-subtitle { font-size:15px; color:var(--text2); margin:0; } /* Blend card image responsive */
@media(max-width:640px){ .card[style*="grid-template-columns:200px"]{display:block!important} .card[style*="grid-template-columns:200px"]>div:first-child{min-height:160px}
} /* Full form input styling */
.qm-form .qm-field input,
.qm-form .qm-field select,
.qm-form .qm-field textarea{width:100%;background:var(--bg2,#f7f7fa);border:1.5px solid var(--border);border-radius:var(--radius,10px);padding:12px 16px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
.qm-form .qm-field input:focus,
.qm-form .qm-field select:focus,
.qm-form .qm-field textarea:focus{border-color:var(--purple,#6c3aed);box-shadow:0 0 0 3px rgba(108,58,237,.1)}
.qm-form .qm-field input::placeholder,
.qm-form .qm-field textarea::placeholder{color:var(--text3,#999)}
.qm-form .qm-field textarea{resize:vertical;min-height:100px}
.qm-form .qm-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.qm-form .qm-field label{display:block;font-size:12px;font-weight:600;color:var(--text2,#666);margin-bottom:6px}
.qm-form .qm-req{color:var(--purple,#6c3aed)}
.qm-form .qm-btn-submit{width:100%;padding:14px;border:none;border-radius:var(--radius,10px);background:var(--purple,#6c3aed);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .1s}
.qm-form .qm-btn-submit:hover{background:var(--purple-dark,#5b2cc5);transform:translateY(-1px)}
.qm-form .qm-btn-submit:disabled{opacity:.5;cursor:wait}
.qm-form .qm-form-header{margin-bottom:20px}
.qm-form .qm-form-title{font-size:22px;font-weight:800;margin:0 0 8px;color:var(--text)}
.qm-form .qm-form-subtitle{font-size:14px;color:var(--text2,#666);margin:0}