/* =====================================================================
   MetaX.Academy — ROOT SITE Design System
   Used ONLY by the network-level pages: index.html, about.html,
   contact.html, privacy.html, articles.html. These pages carry MetaX's
   own fixed brand palette (violet/indigo/cyan/magenta/gold/emerald) —
   exactly like metax.academy itself — because they represent the
   MetaX.Academy brand, not any single niche.

   Every /niches/{slug}/ page is intentionally NOT styled by this file —
   each niche gets its own bespoke visual identity inspired by its own
   topic (see niches/{slug}/css/theme.css per niche).
   ===================================================================== */

:root {
  --bg: #05060f;
  --bg-2: #090b1a;
  --bg-3: #0d1024;
  --panel: rgba(20, 24, 48, 0.55);
  --panel-solid: #10132a;
  --line: rgba(140, 160, 255, 0.14);
  --line-strong: rgba(140, 160, 255, 0.32);

  --text: #eef1ff;
  --muted: #a6adcf;
  --dim: #6f77a3;

  --violet: #7c4dff;
  --indigo: #4d63ff;
  --cyan: #22d3ee;
  --magenta: #ff4dcd;
  --gold: #ffcb6b;
  --emerald: #3ee6b0;

  --grad-aurora: linear-gradient(120deg, #7c4dff 0%, #4d63ff 35%, #22d3ee 100%);
  --grad-solar: linear-gradient(120deg, #ff4dcd 0%, #ff7b54 50%, #ffcb6b 100%);
  --grad-nebula: linear-gradient(135deg, #7c4dff, #ff4dcd 45%, #22d3ee);
  --grad-text: linear-gradient(100deg, #b39bff, #6fe8ff 55%, #ff9be0);

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-glow: 0 0 60px -12px rgba(124, 77, 255, 0.5);
  --maxw: 1200px;
  --font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

body.mx-root { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.mx-root * { box-sizing: border-box; }
body.mx-root h1, body.mx-root h2, body.mx-root h3, body.mx-root h4 { font-family: var(--font); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
body.mx-root p { margin: 0 0 1em; color: var(--muted); }
body.mx-root a { color: inherit; text-decoration: none; }
body.mx-root ul { margin: 0; padding: 0; list-style: none; }
html { scroll-behavior: smooth; }

.mx-cosmos { position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(124,77,255,0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(34,211,238,0.16), transparent 60%),
    radial-gradient(ellipse 60% 60% at 60% 100%, rgba(255,77,205,0.13), transparent 60%),
    var(--bg);
}
.mx-cosmos::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(180,200,255,.6), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(200,220,255,.6), transparent);
  background-size: 400px 400px, 500px 500px, 600px 600px, 350px 350px, 450px 450px;
  animation: rDrift 120s linear infinite; opacity: .5;
}
@keyframes rDrift { to { transform: translateY(-400px); } }
.mx-grid-veil { position: fixed; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(124,77,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,77,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
  pointer-events: none;
}

.mx-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mx-sect { position: relative; padding: 72px 0; }
.mx-sect-tight { padding: 40px 0; }
.mx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); font-weight: 600; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 100px; background: rgba(34,211,238,.06); margin-bottom: 18px; }
.mx-gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mx-title { font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: 14px; }
.mx-lead-txt { color: var(--muted); max-width: 62ch; font-size: 1.02rem; }

/* ---------- Nav ---------- */
.mx-nav { position: sticky; top: 0; z-index: 500; backdrop-filter: blur(18px); background: rgba(5,6,15,.68); border-bottom: 1px solid var(--line); }
.mx-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 66px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mx-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 700; color: var(--text); flex-shrink: 0; }
.mx-brand .mx-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--grad-nebula); font-size: 1.1rem; box-shadow: var(--shadow-glow); }
.mx-brand .mx-name { font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.mx-brand .mx-ver { font-size: .6rem; color: var(--dim); letter-spacing: .14em; display: block; text-transform: uppercase; }
.mx-nav-links { display: none; gap: 26px; align-items: center; }
.mx-nav-links a { color: var(--muted); font-size: .88rem; font-weight: 500; transition: color .2s; }
.mx-nav-links a:hover, .mx-nav-links a.active { color: var(--text); }

/* ---------- Mega menu (desktop) ---------- */
.mx-mega-wrap { position: relative; }
.mx-mega-trigger { display: flex; align-items: center; gap: 7px; background: none; border: none; color: var(--muted); font-size: .88rem; font-weight: 500; font-family: var(--font-body); cursor: pointer; padding: 0; transition: color .2s; }
.mx-mega-trigger .chev { font-size: .68rem; transition: transform .25s; color: var(--dim); }
.mx-mega-trigger:hover, .mx-mega-trigger.active { color: var(--text); }
.mx-mega-trigger.active .chev { transform: rotate(180deg); }
.mx-mega-panel { position: fixed; left: 0; right: 0; top: 66px; margin: 0 auto; max-width: var(--maxw); width: calc(100% - 40px); background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), var(--shadow-glow); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .22s, transform .22s, visibility .22s; z-index: 600; max-height: calc(100dvh - 100px); overflow-y: auto; }
.mx-mega-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-mega-grid { display: grid; gap: 22px; grid-template-columns: repeat(2,1fr); margin-bottom: 22px; }
.mx-mega-col h5 { font-family: var(--font); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.mx-mega-col a { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .85rem; padding: 7px 0; transition: color .2s; }
.mx-mega-col a i { width: 16px; text-align: center; color: var(--violet); font-size: .82rem; flex-shrink: 0; }
.mx-mega-col a:hover { color: var(--text); }
.mx-mega-root { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.mx-mega-root-link { display: flex; flex-direction: column; gap: 4px; }
.mx-mega-root-badge { font-family: var(--font); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.mx-mega-root-name { color: var(--text); font-size: .92rem; font-weight: 600; font-family: var(--font); }
@media (min-width: 620px) { .mx-mega-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 940px) { .mx-mega-grid { grid-template-columns: repeat(5,1fr); } }

/* ---------- Mobile menu mega groups + root-category highlight ---------- */
.mx-mobile-menu .mm-root { display: flex; align-items: center; gap: 10px; color: var(--gold) !important; font-weight: 600; border-bottom: 1px solid var(--line); }
.mx-mm-group { border-bottom: 1px solid var(--line); padding: 10px 0; }
.mx-mm-group h5 { font-family: var(--font); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 6px 0; }
.mx-mm-group a { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: none !important; color: var(--muted); }
.mx-mm-group a i { width: 16px; text-align: center; color: var(--violet); font-size: .8rem; }
.mx-nav-cta { padding: 9px 18px; border-radius: 100px; background: var(--grad-aurora); color: #fff !important; font-weight: 600; font-size: .84rem; font-family: var(--font); white-space: nowrap; box-shadow: var(--shadow-glow); }
.mx-nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 1.1rem; }
.mx-mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 12px 20px 20px; border-bottom: 1px solid var(--line); background: rgba(5,6,15,.94); backdrop-filter: blur(18px); max-height: calc(100dvh - 66px); overflow-y: auto; }
.mx-mobile-menu.open { display: flex; }
.mx-mobile-menu a { color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.mx-mobile-menu a.mm-cta { color: var(--cyan); }
@media (min-width: 940px) { .mx-nav-links { display: flex; } .mx-nav-toggle { display: none; } }

/* ---------- Buttons ---------- */
.mx-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 100px; font-family: var(--font); font-weight: 600; font-size: .95rem; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.mx-btn-primary { background: var(--grad-aurora); color: #fff; box-shadow: var(--shadow-glow); }
.mx-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 70px -8px rgba(124,77,255,.7); }
.mx-btn-ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); }
.mx-btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }

/* ---------- Hero ---------- */
.mx-hero { position: relative; text-align: center; z-index: 0; padding: clamp(46px,8vw,88px) 20px clamp(34px,5vw,58px); overflow: hidden; isolation: isolate; }
.mx-hero::before { content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background: radial-gradient(90% 120% at 20% -10%, rgba(124,77,255,.30), transparent 55%), radial-gradient(80% 120% at 100% 10%, rgba(34,211,238,.22), transparent 55%), radial-gradient(90% 120% at 50% 120%, rgba(255,77,205,.20), transparent 55%);
  animation: rHeroWash 16s ease-in-out infinite alternate; }
@keyframes rHeroWash { from{opacity:.75;} to{opacity:1;transform:translateY(-10px);} }
.mx-hero::after { content:""; position:absolute; inset:-2px; z-index:-3; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(140,160,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,160,255,.06) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
  animation: rHeroGrid 22s linear infinite; }
@keyframes rHeroGrid { from{background-position:0 0,0 0;} to{background-position:46px 46px,46px 46px;} }
.mx-hero-orbit { position: absolute; top: clamp(6px,4vw,40px); left: 50%; transform: translateX(-50%); width: 680px; height: 680px; max-width: 96vw; aspect-ratio: 1; pointer-events: none; z-index: -2; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(124,77,255,.28), transparent 40%, rgba(34,211,238,.22), transparent 70%, rgba(255,77,205,.22), transparent);
  filter: blur(42px); animation: rSpin 40s linear infinite; opacity: .75; }
@keyframes rSpin { to { transform: translateX(-50%) rotate(360deg); } }
.mx-hero-particles { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.mx-hero-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(180,200,255,.7); box-shadow: 0 0 10px 1px rgba(124,77,255,.6); animation: rFloat 9s ease-in-out infinite; }
.mx-hero-particles i:nth-child(1){left:12%;top:30%;animation-delay:0s;}
.mx-hero-particles i:nth-child(2){left:82%;top:22%;width:6px;height:6px;animation-delay:1.2s;background:rgba(34,211,238,.75);box-shadow:0 0 12px 1px rgba(34,211,238,.6);}
.mx-hero-particles i:nth-child(3){left:68%;top:60%;animation-delay:2.1s;}
.mx-hero-particles i:nth-child(4){left:26%;top:66%;width:5px;height:5px;animation-delay:.7s;background:rgba(255,77,205,.75);box-shadow:0 0 12px 1px rgba(255,77,205,.6);}
.mx-hero-particles i:nth-child(5){left:46%;top:16%;animation-delay:3s;}
.mx-hero-particles i:nth-child(6){left:92%;top:54%;animation-delay:1.8s;}
@keyframes rFloat { 0%,100%{transform:translateY(0);opacity:.4;} 50%{transform:translateY(-22px);opacity:1;} }
.mx-hero h1 { font-size: clamp(2.4rem, 9vw, 5rem); margin: 20px 0 18px; max-width: 22ch; margin-left:auto; margin-right:auto; }
.mx-hero .mx-lead { color: var(--muted); font-size: clamp(1rem, 3.5vw, 1.25rem); max-width: 60ch; margin: 0 auto 14px; }
.mx-hero .mx-curator { color: var(--dim); font-size: .9rem; margin-bottom: 30px; letter-spacing: .02em; }
.mx-hero .mx-curator b { color: var(--gold); }
.mx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.mx-tri-glyphs { font-family: var(--font); letter-spacing: .5em; font-size: 1.6rem; color: var(--violet); margin-top: 14px; }

/* ---------- Marquee ---------- */
.mx-marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin-top: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mx-marquee-track { display: flex; flex-wrap: nowrap; width: max-content; animation: rMarq 32s linear infinite; }
.mx-marquee-track:hover { animation-play-state: paused; }
.mx-marquee-track span { font-family: var(--font); color: var(--dim); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; padding: 0 22px; display: inline-flex; align-items: center; gap: 22px; }
.mx-marquee-track span::after { content:"✦"; color: var(--violet); }
@keyframes rMarq { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Feature grid (DNA) ---------- */
.mx-feature-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 30px; }
.mx-feature { padding: 26px 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); transition: transform .3s, border-color .3s; }
.mx-feature:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.mx-feature .f-glyph { font-size: 2rem; margin-bottom: 12px; display: block; }
.mx-feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.mx-feature p { color: var(--muted); font-size: .92rem; }
@media (min-width: 720px) { .mx-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .mx-feature-grid.cols-4 { grid-template-columns: repeat(4,1fr); } }

/* ---------- Category / directory grid (root's index of niche "worlds") ---------- */
.mx-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.mx-cat-tab { font-family: var(--font); font-size: .8rem; font-weight: 500; padding: 8px 16px; border-radius: 100px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); color: var(--muted); transition: all .2s; }
.mx-cat-tab:hover { color: var(--text); border-color: var(--line-strong); }
.mx-cat-tab.active { background: var(--grad-aurora); color: #fff; border-color: transparent; }
.mx-world-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.mx-world-card { position: relative; padding: 26px 24px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px); overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; opacity: 0; transform: translateY(20px); text-decoration:none; color:inherit; }
.mx-world-card.in { opacity: 1; transform: translateY(0); }
.mx-world-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-glow); }
.mx-world-card::after { content:""; position:absolute; bottom:0; left:0; width:0; height:3px; background: var(--grad-nebula); transition: width .4s; }
.mx-world-card:hover::after { width: 100%; }
.mx-wc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mx-wc-icon { font-size: 1.6rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(124,77,255,.1); border: 1px solid var(--line); }
.mx-wc-cat { font-family: var(--font); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.mx-world-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.mx-world-card p { color: var(--muted); font-size: .88rem; margin-bottom: 0; }
.mx-wc-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .74rem; color: var(--dim); font-family: var(--font); }
@media (min-width: 640px) { .mx-world-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .mx-world-grid { grid-template-columns: repeat(3,1fr); } }

/* ---------- Root Category feature card (Category Zero) ---------- */
.mx-root-cat-card { display: block; position: relative; padding: 34px 30px; border-radius: var(--radius); background: radial-gradient(ellipse at 0% 0%, rgba(245,196,81,.12), transparent 60%), var(--panel); border: 1px solid rgba(245,196,81,.3); text-decoration: none; color: inherit; overflow: hidden; transition: transform .3s, border-color .3s; }
.mx-root-cat-card:hover { transform: translateY(-4px); border-color: rgba(245,196,81,.55); }
.mx-rc-badge { display: inline-flex; font-family: var(--font); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #ffcb6b; padding: 6px 14px; border: 1px solid rgba(245,196,81,.4); border-radius: 100px; background: rgba(245,196,81,.08); margin-bottom: 16px; }
.mx-rc-title { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 12px; }
.mx-rc-text { max-width: 70ch; margin-bottom: 18px; }
.mx-rc-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: .9rem; color: #ffcb6b; }

/* ---------- CTA band ---------- */
.mx-cta-band { text-align: center; border-radius: var(--radius); padding: 56px 26px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(124,77,255,.25), transparent 70%), var(--bg-2); border: 1px solid var(--line-strong); }
.mx-cta-band h2 { font-size: clamp(1.8rem,6vw,3rem); margin-bottom: 14px; }
.mx-cta-band p { color: var(--muted); max-width: 56ch; margin: 0 auto 28px; }

/* ---------- Stats ---------- */
.mx-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.mx-stat { padding: 26px 18px; border-radius: var(--radius); text-align: center; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.mx-stat::before { content:""; position:absolute; inset:0; background: var(--grad-aurora); opacity:.06; }
.mx-stat .num { font-family: var(--font); font-size: clamp(1.8rem,7vw,2.6rem); font-weight: 700; line-height: 1; position:relative; }
.mx-stat .lbl { color: var(--muted); font-size: .8rem; margin-top: 8px; letter-spacing: .04em; text-transform: uppercase; position:relative; }
@media (min-width: 720px) { .mx-stats { grid-template-columns: repeat(4,1fr); } }

/* ---------- Legal / long-form text pages ---------- */
.mx-legal { max-width: 800px; margin: 0 auto; }
.mx-legal h2 { margin-top: 40px; font-size: 1.3rem; }
.mx-legal h3 { margin-top: 26px; font-size: 1.05rem; }
.mx-legal p, .mx-legal li { color: var(--muted); font-size: .96rem; }
.mx-legal ul { padding-left: 22px; margin-bottom: 1em; list-style: disc; }
.mx-legal li { margin-bottom: 8px; }
.mx-legal .updated { font-size: .85rem; color: var(--dim); }
.mx-breadcrumb { max-width: var(--maxw); margin: 22px auto 0; padding: 0 20px; font-size: .84rem; color: var(--dim); }
.mx-breadcrumb a { color: var(--dim); }
.mx-breadcrumb a:hover { color: var(--cyan); }

/* ---------- Contact layout ---------- */
.mx-contact-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; max-width: 980px; margin: 0 auto; }
.mx-info-card, .mx-form-card-root { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.mx-info-card .ci-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.mx-info-card .ci-row i { width: 38px; height: 38px; border-radius: 10px; background: var(--grad-aurora); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mx-info-card .ci-row h4 { font-size: .98rem; margin-bottom: 4px; }
.mx-info-card .ci-row p { font-size: .88rem; margin-bottom: 0; }
.mx-form-card-root .form-row { margin-bottom: 16px; }
.mx-form-card-root label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mx-form-card-root input, .mx-form-card-root select, .mx-form-card-root textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(5,6,15,.7); color: var(--text); font-family: var(--font-body); font-size: .92rem; }
.mx-form-card-root textarea { resize: vertical; min-height: 100px; }
.mx-form-card-root input:focus, .mx-form-card-root select:focus, .mx-form-card-root textarea:focus { outline: none; border-color: var(--cyan); }
.mx-form-consent-root { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--dim); margin-bottom: 18px; }
.mx-form-consent-root input { width: auto; margin-top: 3px; }
.mx-form-success-root { display: none; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(62,230,176,.1); border: 1px solid rgba(62,230,176,.4); color: #3ee6b0; font-size: .9rem; margin-top: 14px; }
.mx-form-success-root.show { display: flex; }
@media (min-width: 820px) { .mx-contact-layout { grid-template-columns: .85fr 1.15fr; } }

/* ---------- Footer ---------- */
.mx-root-footer { border-top: 1px solid var(--line); padding: 50px 0 40px; margin-top: 30px; }
.mx-root-footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.mx-root-footer .mx-brand { margin-bottom: 14px; }
.mx-root-footer p { font-size: .9rem; max-width: 44ch; }
.mx-rf-col h5 { font-family: var(--font); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.mx-rf-col a { display: block; color: var(--muted); font-size: .9rem; padding: 6px 0; transition: color .2s; }
.mx-rf-col a:hover { color: var(--cyan); }
.mx-rf-bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; color: var(--dim); font-size: .8rem; }
.mx-rf-bottom .glyphs { font-family: var(--font); letter-spacing: .3em; color: var(--violet); }
.mx-rf-legal { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mx-rf-legal a { color: var(--muted); font-size: .8rem; transition: color .2s; }
.mx-rf-legal a:hover { color: var(--cyan); }
.mx-rf-legal .sep { color: var(--dim); opacity: .5; }
@media (min-width: 800px) { .mx-root-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* reveal on scroll */
.mx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.mx-reveal.mx-in { opacity: 1; transform: translateY(0); }

.mx-page-fade { animation: rPageIn .6s ease both; }
@keyframes rPageIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }

/* ---------- Articles hub (Resource Center) ---------- */
.mx-article-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.mx-article-filter-bar .mx-filter-chip { font-family: var(--font); font-size: .78rem; font-weight: 500; padding: 8px 15px; border-radius: 100px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); color: var(--muted); transition: all .2s; }
.mx-article-filter-bar .mx-filter-chip:hover { color: var(--text); border-color: var(--line-strong); }
.mx-article-filter-bar .mx-filter-chip.active { background: var(--grad-aurora); color: #fff; border-color: transparent; }
.mx-article-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.mx-article-card { display: block; padding: 22px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); transition: transform .3s, border-color .3s; text-decoration: none; color: inherit; }
.mx-article-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.mx-ac-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mx-ac-cat { font-family: var(--font); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,.08); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; }
.mx-ac-top i { color: var(--violet); font-size: 1rem; }
.mx-article-card h3 { font-size: 1.02rem; margin-bottom: 8px; line-height: 1.35; }
.mx-article-card p { color: var(--muted); font-size: .87rem; margin-bottom: 12px; }
.mx-ac-meta { display: flex; gap: 14px; font-size: .76rem; color: var(--dim); font-family: var(--font); }
@media (min-width: 640px) { .mx-article-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .mx-article-grid { grid-template-columns: repeat(3,1fr); } }