/* ============================================================
   module.css — shared layout system for EloERP MODULE pages
   Built on global.css tokens. Gives every module page the same
   shell (header, hero, alternating feature rows, connected band,
   FAQ, footer) so they're consistent by construction.
   Each page adds ONLY its own mockup CSS on top.
   ============================================================ */

/* ---- dark page header ---- */
.ph{background:#0B1B2B;border-bottom:1px solid rgba(255,255,255,.06)}
.ph-in{display:flex;align-items:center;gap:26px;height:64px}
.ph nav{display:flex;gap:26px;margin-left:8px}
.ph nav a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78)}
.ph nav a:hover{color:#fff}
.ph .r{margin-left:auto;display:flex;align-items:center;gap:16px}
.ph .r .login{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85)}

/* ---- hero shell ---- */
.mhero{background:radial-gradient(120% 90% at 82% -10%,#13344a 0%,var(--ink) 55%);color:#fff;padding:64px 0 80px;overflow:hidden;position:relative}
.mhero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(62,198,227,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(62,198,227,.07) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(85% 80% at 65% 35%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(85% 80% at 65% 35%,#000 30%,transparent 80%)}
.mhero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.crumb{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:18px}
.crumb a{color:inherit}.crumb a:hover{color:var(--cyan-bright)}
.mhero h1{font-size:clamp(34px,4.8vw,54px);color:#fff;margin:18px 0 0;letter-spacing:-.025em}
.mhero .sub{font-size:18px;color:rgba(255,255,255,.74);margin:20px 0 0;max-width:520px}
.mhero .sub b{color:#fff}
.mhero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.mhero .micro{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,.5);margin-top:16px}

/* ---- glass-screen + floating-chip mockup primitives (reusable) ---- */
.glass-screen{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.gs-tb{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:12.5px;color:rgba(255,255,255,.65);font-weight:600}
.gs-tb .live{margin-left:auto;font-family:'JetBrains Mono';font-size:10px;color:var(--green);display:inline-flex;align-items:center;gap:5px}
.gs-tb .live i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.gs-bd{padding:16px;display:grid;gap:9px}
/* .mchip — floating glass badge for product-page mockups. Namespaced away from
   global.css's inline pill `.chip` (homepage Sales/Inventory) which it used to
   clobber via position:absolute, causing chip overlap/clipping. */
.mchip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;background:rgba(12,28,42,.92);border:1px solid rgba(62,198,227,.32);backdrop-filter:blur(8px);padding:9px 13px;border-radius:11px;font-size:12px;font-weight:700;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mchip svg{width:15px;height:15px;color:var(--green)}

/* ---- alternating feature rows (the module-page signature) ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:72px 0;border-bottom:1px solid var(--hairline)}
.frow:nth-child(even) .ftext{order:2}
.ftext .kicker{margin-bottom:16px}
.ftext h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.02em}
.ftext p.lead{font-size:17px;color:var(--muted);margin-top:14px}
.flist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.flist li{display:flex;gap:11px;font-size:15px;color:var(--text)}
.flist li svg{width:20px;height:20px;color:var(--cyan);flex:none;margin-top:2px}
.fvis{background:linear-gradient(160deg,#0E2436,#0B1B2B);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}
.fvis .glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(22,169,201,.34),transparent 70%);filter:blur(46px);top:-50px;right:-30px}

/* ---- compatibility / "works with" grid ---- */
.hw{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:42px}
.hwc{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow-sm)}
.hwc .hi{width:46px;height:52px;margin:0 auto 12px;display:grid;place-items:center;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,var(--cyan),var(--blue))}
.hwc .hi svg{width:22px;height:22px}
.hwc b{display:block;font-size:14px;color:var(--ink);font-weight:800}
.hwc span{font-size:12px;color:var(--muted);font-family:'JetBrains Mono'}

/* ---- connected-flow band ---- */
.conn{background:radial-gradient(120% 100% at 80% 0%,#15384e,#0B1B2B);color:#fff;border-radius:20px;margin:0 24px;padding:54px 28px;text-align:center;border:1px solid rgba(62,198,227,.2)}
.conn .flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:30px}
.cnode{display:flex;flex-direction:column;align-items:center;gap:10px;width:140px}
.cnode .cn{width:58px;height:65px;display:grid;place-items:center;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,var(--cyan),var(--blue))}
.cnode .cn svg{width:24px;height:24px}
.cnode b{font-size:14px;color:#fff}
.cnode span{font-size:11.5px;color:rgba(255,255,255,.55);font-family:'JetBrains Mono'}
.carr{width:46px;color:var(--cyan-bright);display:grid;place-items:center}.carr svg{width:22px;height:22px}

/* ---- FAQ ---- */
.faq{max-width:800px;margin:42px auto 0}
.faq details{border:1px solid var(--hairline);border-radius:12px;margin-bottom:12px;background:var(--card);box-shadow:var(--shadow-sm)}
.faq summary{padding:18px 20px;font-weight:800;font-size:16px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .cv{width:20px;height:20px;color:var(--cyan);transition:transform .25s var(--ease-out);flex:none}
.faq details[open] summary .cv{transform:rotate(180deg)}
.faq details .a{padding:0 20px 18px;color:var(--muted);font-size:14.5px}

/* ---- stat strip (3 metric tiles, reusable) ---- */
.vstat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.vs{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:26px;text-align:center;box-shadow:var(--shadow-sm)}
.vs b{display:block;font-size:30px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.vs b .u{font-size:16px;color:var(--cyan);font-weight:700}
.vs span{font-size:13.5px;color:var(--muted);margin-top:4px;display:block}

/* ---- dark footer ---- */
.ftr2{background:#08141F;color:rgba(255,255,255,.62);padding:48px 0 28px;margin-top:80px}
.ftr2 .fg{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.ftr2 a{color:rgba(255,255,255,.62);font-size:14px}.ftr2 a:hover{color:var(--cyan-bright)}
.ftr2 .fl{display:flex;gap:22px;flex-wrap:wrap}
.ftr2 .fb{border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:20px;font-family:'JetBrains Mono';font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---- responsive ---- */
@media(max-width:900px){
  .mhero .in,.frow{grid-template-columns:1fr;gap:36px}
  .frow:nth-child(even) .ftext{order:0}
  .hw{grid-template-columns:1fr 1fr 1fr}
  .ph nav{display:none}
  .conn .flow{gap:14px}
}
@media(max-width:560px){.hw{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   Global fixes (2026-06-28):
   1. Remove breadcrumbs from every page (user request).
   2. Clear the fixed 71px header — bump every page hero's top
      padding so its content never sits under the top menu.
   Loaded in <head>; !important overrides the per-page body styles.
   ============================================================ */
.crumb, .il-crumb { display: none !important; }
.ac-hero, .cr-hero, .db-hero, .hr-hero, .inv-hero, .mf-hero, .pos-hero, .pu-hero, .sl-hero,
.il-hero, .il-chero, .ab-hero, .cs-hero, .ig-hero, .prhero, .rs-hero, .se-hero, .zhero,
.or-hero, .solhero {
  padding-top: clamp(102px, 11vw, 120px) !important;
}