/* =========================================================
   Mindraxo — shared styles (every page loads this)
   Product pages add their own styles on top.
   ========================================================= */

:root {
    --mx-ink: #14161f;
    --mx-muted: #5f6677;
    --mx-line: #e6e8ee;
    --mx-bg: #fafafb;
    --mx-card: #ffffff;
    --mx-indigo: #4338ca;
    --mx-violet: #7c3aed;
    --mx-grad: linear-gradient(135deg, var(--mx-indigo), var(--mx-violet));
    --mx-radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--mx-bg);
    color: var(--mx-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mx-indigo); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ---------- Company header ---------- */
.mx-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250, 250, 251, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mx-line);
}
.mx-nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mx-brand { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.mx-brand img { width: 30px; height: 30px; border-radius: 8px; }
.mx-links { display: flex; align-items: center; gap: 28px; }
.mx-links a { font-size: 14px; font-weight: 500; color: var(--mx-muted); }
.mx-links a:hover, .mx-links a[aria-current="page"] { color: var(--mx-ink); }

/* Breadcrumb shown on product pages, under the company header */
.mx-crumb { font-size: 13px; color: var(--mx-muted); padding-top: 14px; padding-bottom: 14px; }
.mx-crumb a:hover { color: var(--mx-ink); }
.mx-crumb span { margin: 0 6px; color: #b3b8c4; }

/* ---------- Company footer ---------- */
.mx-footer { background: var(--mx-ink); color: #a9afbd; padding: 56px 0 36px; margin-top: 0; }
.mx-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.mx-footer .mx-brand { color: #fff; }
.mx-footer p { font-size: 14px; margin-top: 12px; max-width: 320px; }
.mx-footer h4 { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.mx-footer ul { list-style: none; }
.mx-footer li { font-size: 14px; padding: 4px 0; }
.mx-footer li a:hover { color: #fff; }
.mx-footer-base {
    border-top: 1px solid #262a36; margin-top: 40px; padding-top: 20px;
    font-size: 13px; color: #6f7686;
}

@media (max-width: 760px) {
    .mx-links a.mx-hide-mobile { display: none; }
    .mx-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Product FAQ ---------- */
.faq {
    padding: 100px 0;
    background: var(--mx-bg);
}

.faq-list {
    max-width: 820px;
}

.faq-item {
    padding: 28px 0;
    border-top: 1px solid var(--mx-line);
}

.faq-item h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.faq-item p {
    color: var(--mx-muted);
    font-size: 15px;
    line-height: 1.7;
}