/* ===== RESET & BASE ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text-secondary); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; font-feature-settings: 'cv11', 'ss01', 'ss03';
}
h1,h2,h3,h4,h5,h6 { font-family: 'Inter', sans-serif; color: var(--text-primary); letter-spacing: -0.015em; }
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: 'Inter', sans-serif; } /* ===== CSS VARS — SaaS PALETTE (indigo on cool dark) ===== */
:root { --bg: #0a0b0f; --bg-elevated: #0e1014; --bg-card: #12141a; --bg-card-hover: #161822; --bg-input: #0c0d12; --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.11); --border-hover: rgba(129,140,248,0.3); --text-primary: #f4f5f8; --text-secondary: #9499a8; --text-muted: #5a5f70; --accent: #818cf8; /* indigo-400 */ --accent-solid: #6366f1; /* indigo-500 */ --accent-hover: #7c85f5; --accent-dim: rgba(129,140,248,0.1); --accent-glow: rgba(99,102,241,0.25); --success: #10b981; --success-dim: rgba(16,185,129,0.1); --warn: #f59e0b; --warn-dim: rgba(245,158,11,0.1); --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.03);
}
::selection { background: var(--accent-dim); color: var(--text-primary); } /* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media(min-width:1024px) { .container { padding: 0 40px; } } /* ===== MATERIAL ICONS ===== */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.filled { font-variation-settings: 'FILL' 1, 'wght' 400; } /* ===== CARD (flat SaaS style) ===== */
.glow-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; position: relative;
}
.glow-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover);
} /* ===== GLASS ===== */
.glass-dark { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
} /* ===== SECTION LABEL ===== */
.label { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); padding: 4px 10px; background: var(--accent-dim); border: 1px solid rgba(129,140,248,0.18); border-radius: 999px;
}
.label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; transition: all 0.15s ease; white-space: nowrap;
}
.btn-accent { background: var(--accent-solid); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 0 0 1px rgba(99,102,241,0.5), 0 1px 2px rgba(0,0,0,0.3);
}
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(129,140,248,0.6), 0 4px 12px var(--accent-glow); }
.btn-outline { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-primary);
}
.btn-outline:hover { background: var(--bg-card-hover); border-color: rgba(255,255,255,0.18); }
.btn-gold { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-primary);
}
.btn-gold:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 6px 12px; font-size: 12px;
} /* ===== FLOATING CTA ===== */
.floating-cta { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px;
}
.float-btn { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
.float-btn:hover { transform: translateY(-2px); }
.float-whatsapp { background: #25D366; }
.float-email { background: var(--bg-card); border: 1px solid var(--border-strong); } /* ===== TABLE ===== */
.cat-scroll::-webkit-scrollbar { height: 6px; }
.cat-scroll::-webkit-scrollbar-track { background: transparent; }
.cat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.cat-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } /* ===== TABS (segmented control) ===== */
.tab-group { display: inline-flex; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; gap: 2px;
}
.tab-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; transition: all 0.15s ease; background: transparent; color: var(--text-secondary); border: none;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-card-hover); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px var(--border-strong);
} /* ===== PURITY BAR ===== */
.purity-track { height: 4px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.purity-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-solid), var(--accent)); transition: width 1.4s cubic-bezier(0.22,1,0.36,1); } /* ===== FADE ANIM ===== */
.fade-up { opacity: 0; transform: translateY(16px); transition: all 0.6s cubic-bezier(0.22,1,0.36,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); } /* ===== FAQ ===== */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .material-symbols-outlined { transform: rotate(180deg); } /* ===== FORM INPUTS ===== */
.input, input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-primary); outline: none; transition: border 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px var(--accent-dim);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
label.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; text-transform: none; letter-spacing: 0;
} /* ===== GRID HELPERS ===== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-5-step { display: flex; flex-direction: column; gap: 24px; }
@media(min-width:768px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } .grid-5-step { flex-direction: row; gap: 16px; }
} /* ===== HERO GRID BG (dot pattern + subtle glow) ===== */
.hero-mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; background-image: radial-gradient(circle at center, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}
.hero-mesh .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.25;
}
.hero-mesh .orb-1 { width: 500px; height: 500px; background: #4338ca; top: -15%; right: -10%; }
.hero-mesh .orb-2 { width: 380px; height: 380px; background: #1e3a8a; bottom: -10%; left: -5%; opacity: 0.18; }
.hero-mesh .orb-3 { display: none; } /* ===== RESPONSIVE ===== */
.hide-mobile { display: none; }
@media(min-width:1024px) { .hide-mobile { display: flex; } .hide-desktop { display: none; } } /* ===== DIVIDER LINE ===== */
.line { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } /* ===== STATUS PILL ===== */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--success-dim); color: var(--success); border: 1px solid rgba(16,185,129,0.2);
}
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--success); } /* ===== NAV LINK ===== */
.nav-link { padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.15s ease;
}
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); } /* ===== Hero responsive ===== */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@media(min-width:1024px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr !important; } } /* ===== Manufacturing responsive ===== */
@media(min-width:1024px){.mfg-grid{grid-template-columns:1fr 1fr !important;}} /* ===== About responsive ===== */
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr !important;}} /* ===== Footer responsive ===== */
@media(min-width:768px){.footer-grid{grid-template-columns:1.2fr 2fr !important;}} /* ===== QM Form overrides for theme-3 ===== */
.qm-form { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.qm-form .qm-field { display:flex; flex-direction:column; min-width:0; }
.qm-form .qm-field--message { grid-column:1 / -1; }
.qm-form .qm-btn-submit { grid-column:1 / -1; }
@media(min-width:768px){ .qm-form { grid-template-columns:repeat(4,1fr); } }
.qm-form .qm-field label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.qm-form .qm-field input,
.qm-form .qm-field select,
.qm-form .qm-field textarea { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border-strong); background:var(--bg-input); color:var(--text-primary); font-size:14px; transition:border-color 0.2s;
}
.qm-form .qm-field input:focus,
.qm-form .qm-field select:focus,
.qm-form .qm-field textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-glow); }
.qm-form .qm-field input::placeholder,
.qm-form .qm-field textarea::placeholder { color:var(--text-muted); }
.qm-form .qm-req { color:var(--accent); }
.qm-form .qm-btn-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:10px; font-weight:600; font-size:14px; background:var(--accent-solid); color:#fff; border:none; cursor:pointer; transition:all 0.2s; margin-top:4px;
}
.qm-form .qm-btn-submit:hover { background:var(--accent-hover); box-shadow:0 4px 20px var(--accent-glow); }
.qm-form .qm-btn-submit:disabled { opacity:0.5; cursor:wait; }
.qm-form .qm-form-error { padding:10px 14px; background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); border-radius:8px; font-size:13px; }
.qm-form .qm-field-error { border-color:#ef4444 !important; }
.qm-form .qm-form-header { margin-bottom:4px; }
.qm-form .qm-form-title { font-size:20px; font-weight:700; margin:0 0 6px; color:var(--text-primary); }
.qm-form .qm-form-subtitle { font-size:13px; color:var(--text-secondary); margin:0; }

/* ═══ NEW: Review Carousel + Lightbox ═══ */
.rv3-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv3-scroll{display:flex;gap:16px;width:max-content;animation:rv3Scroll 45s linear infinite}
.rv3-scroll:hover{animation-play-state:paused}
@keyframes rv3Scroll{0%{transform:translateX(0)}100%{transform:translateX(-20%)}}
.rv3-item{flex-shrink:0;width:230px;height:340px;border-radius:var(--radius-lg);overflow:hidden;position:relative;cursor:pointer;background:var(--bg-card);border:1px solid var(--border);transition:border-color .2s,transform .3s}
.rv3-item:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.rv3-item img,.rv3-item video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rv3-item:hover img,.rv3-item:hover video{transform:scale(1.05)}
.rv3-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,11,15,.85) 0,rgba(10,11,15,0) 55%)}
.rv3-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(99,102,241,.35);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;pointer-events:none}
.rv3-play .material-symbols-outlined{font-size:26px;color:#fff;margin-left:3px}
.rv3-info{position:absolute;left:0;right:0;bottom:0;padding:18px;color:var(--text-primary)}
.rv3-title{font-size:14px;font-weight:600}
.rv3-sub{font-size:12px;color:var(--text-secondary);margin-top:3px}
.rv-lb{position:fixed;inset:0;z-index:10000;background:rgba(8,9,13,.93);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease;padding:24px}
.rv-lb.show{opacity:1;visibility:visible}
.rv-lb__stage{max-width:min(92vw,560px);max-height:82vh;display:flex;align-items:center;justify-content:center;position:relative;touch-action:pan-y;user-select:none}
.rv-lb__stage img,.rv-lb__stage video{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:var(--radius-lg);display:block;box-shadow:0 24px 80px rgba(0,0,0,.6);background:#000}
.rv-lb__btn{position:absolute;z-index:2;cursor:pointer;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid var(--border-strong);display:grid;place-items:center;transition:background .2s,transform .2s}
.rv-lb__btn:hover{background:var(--accent-dim);border-color:var(--accent)}
.rv-lb__close{top:20px;right:20px;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1}
.rv-lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:30px;line-height:1}
.rv-lb__nav:hover{transform:translateY(-50%) scale(1.08)}
.rv-lb__prev{left:24px}.rv-lb__next{right:24px}
.rv-lb__bar{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:#fff;pointer-events:none;padding:0 80px}
.rv-lb__cap{font-size:15px;font-weight:600}
.rv-lb__cap .rv-lb__sub{font-size:13px;font-weight:400;color:var(--text-secondary);margin-top:4px}
.rv-lb__count{font-size:12px;color:var(--text-muted);margin-top:8px;letter-spacing:1px}
@media(max-width:640px){.rv3-item{width:180px;height:280px}.rv-lb{padding:12px}.rv-lb__nav{width:44px;height:44px;font-size:26px}.rv-lb__prev{left:10px}.rv-lb__next{right:10px}.rv-lb__close{top:12px;right:12px}.rv-lb__bar{padding:0 16px;bottom:14px}}

/* ═══ NEW: 5-Step Quality Chain (refined) ═══ */
.qc-chain{display:flex;flex-direction:column;gap:18px;position:relative}
.qc-step{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;padding:26px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color .2s ease,transform .25s ease,background .2s ease}
.qc-step:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-4px)}
.qc-badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent-solid),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter';font-weight:700;font-size:17px;margin-bottom:16px;box-shadow:0 6px 16px var(--accent-glow);position:relative;z-index:2}
.qc-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.qc-desc{font-size:11px;color:var(--text-muted);line-height:1.6}
@media(min-width:768px){.qc-chain{flex-direction:row;gap:14px;align-items:stretch}.qc-step{flex:1}.qc-chain::before{content:'';position:absolute;top:50px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--border-hover) 18%,var(--border-hover) 82%,transparent);z-index:0}}