/* ============================================================
   MeyLoop — Main Stylesheet  v4
   Lighter, warmer palette — professional SaaS not "AI dark"
   ============================================================ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  /* ── NEW PALETTE — lighter, richer, less "deep space" ── */
  --bg:         #0b1120;   /* slightly lighter than before */
  --bg2:        #101828;   /* card/panel backgrounds */
  --bg3:        #162035;   /* elevated surfaces */
  --bg4:        #1c2a45;   /* modal, active states */
  --bg5:        #f4f7fb;   /* rare light surface */

  /* Blues stay but brighter, more confident */
  --blue:       #2563eb;
  --blue-lt:    #3b82f6;
  --blue-xlt:   #60a5fa;
  --blue-pale:  #bfdbfe;
  --blue-dim:   rgba(37,99,235,.16);

  /* Accent warm tones — counter the "too AI" feel */
  --teal:       #0ea5e9;
  --cyan:       #22d3ee;
  --purple:     #7c3aed;
  --green:      #10b981;
  --orange:     #f97316;
  --red:        #ef4444;

  /* Text */
  --text:       #e8edf7;       /* slightly warmer white */
  --text-2:     #a8b8d8;       /* secondary */
  --muted:      rgba(168,184,216,.7);
  --dim:        rgba(168,184,216,.42);

  /* Borders */
  --border:       rgba(255,255,255,.08);
  --border-blue:  rgba(59,130,246,.22);

  /* Shadows / glows */
  --glow-blue:  drop-shadow(0 0 14px rgba(37,99,235,.6)) drop-shadow(0 0 4px rgba(96,165,250,.35));
  --shadow-lg:  0 24px 64px rgba(0,0,0,.45);
  --shadow-card: 0 4px 20px rgba(0,0,0,.3);

  --font: -apple-system, 'Segoe UI', 'Inter', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
}
em  { color:var(--blue-xlt); font-style:normal; }
a   { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ── BUTTONS ── */
.btn-p {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#1d55d6,#2563eb);
  color:#fff; border:none; border-radius:8px;
  padding:13px 28px; font-size:14px; font-weight:600;
  cursor:pointer; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(37,99,235,.35), 0 0 20px rgba(37,99,235,.2);
  transition:all .2s;
}
.btn-p:hover { box-shadow:0 4px 20px rgba(37,99,235,.55); transform:translateY(-1px); }

.btn-o {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06);
  color:var(--text); border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:13px 28px;
  font-size:14px; font-weight:600; cursor:pointer;
  backdrop-filter:blur(8px); transition:all .2s;
}
.btn-o:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }

/* ── NAV ── */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 52px; height:76px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  background:rgba(11,17,32,.92);
  backdrop-filter:blur(16px);
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img {
  height:58px; width:auto;
  filter:var(--glow-blue);
}
.nav-links { display:flex; gap:30px; font-size:14px; font-weight:500; color:var(--text-2); }
.nav-links a { transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-actions { display:flex; gap:10px; }

/* ── HERO ── */
.hero {
  position:relative;
  min-height:680px;
  display:grid; grid-template-columns:1fr 1fr;
  padding:80px 52px 0; gap:0; align-items:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 65% at 65% 45%, rgba(37,99,235,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 45% at 12% 80%, rgba(14,165,233,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(124,58,237,.06) 0%, transparent 55%);
}
.hero-bg::after {
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 8% 12%,rgba(96,165,250,.7) 0%,transparent 100%),
    radial-gradient(1px 1px at 22% 38%,rgba(96,165,250,.4) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 8%,rgba(167,139,250,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 28%,rgba(96,165,250,.35) 0%,transparent 100%),
    radial-gradient(1px 1px at 72% 6%,rgba(96,165,250,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 42%,rgba(96,165,250,.35) 0%,transparent 100%),
    radial-gradient(1px 1px at 5% 62%,rgba(96,165,250,.4) 0%,transparent 100%),
    radial-gradient(2px 2px at 45% 55%,rgba(96,165,250,.2) 0%,transparent 100%),
    radial-gradient(1px 1px at 30% 75%,rgba(96,165,250,.3) 0%,transparent 100%);
}
.hero-left  { position:relative; z-index:2; padding-bottom:80px; }
.hero-right { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--blue-xlt); text-transform:uppercase; margin-bottom:18px;
  background:rgba(37,99,235,.1); border:1px solid rgba(59,130,246,.22);
  border-radius:20px; padding:5px 14px;
}
.eyebrow::before { content:'●'; font-size:8px; animation:pdot 2s ease-in-out infinite; }

.hero-h1 {
  font-size:52px; font-weight:800; line-height:1.04;
  letter-spacing:-2px; margin-bottom:16px;
  color:#fff;
}
.hero-tagline {
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); font-weight:500; margin-bottom:20px;
}
.hero-body {
  font-size:15px; color:var(--muted); line-height:1.75;
  margin-bottom:32px; max-width:480px;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

.hero-strip {
  grid-column:1/-1;
  border-top:1px solid var(--border);
  margin:0 -52px; padding:22px 52px;
  display:flex; gap:28px; align-items:center;
  background:rgba(16,24,40,.6);
  position:relative; z-index:2;
}
.hstat-num {
  font-size:22px; font-weight:800; color:var(--blue-xlt);
  letter-spacing:-0.5px; text-shadow:0 0 16px rgba(96,165,250,.35);
}
.hstat-lbl { font-size:11px; color:var(--dim); margin-top:2px; }
.hdiv { width:1px; height:36px; background:var(--border); flex-shrink:0; }

/* ── FEATURE BAND ── */
.feat-band {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);
  background:rgba(16,24,40,.5);
}
.feat {
  padding:22px 20px; border-right:1px solid var(--border);
  display:flex; align-items:flex-start; gap:13px;
}
.feat:last-child { border-right:none; }
.feat-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:rgba(37,99,235,.12); border:1px solid rgba(59,130,246,.2);
  display:flex; align-items:center; justify-content:center;
}
.feat-icon svg { width:20px; height:20px; }
.feat-title { font-size:12px; font-weight:700; color:#fff; margin-bottom:4px; }
.feat-body  { font-size:12px; color:var(--muted); line-height:1.5; }

/* ── SECTIONS ── */
.section { padding:80px 52px; }
.section.alt { background:rgba(16,24,40,.5); }

.sec-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--blue-xlt); text-transform:uppercase; margin-bottom:12px;
  background:rgba(37,99,235,.1); border:1px solid rgba(59,130,246,.18);
  border-radius:20px; padding:4px 12px;
}
.sec-h {
  font-size:34px; font-weight:800; letter-spacing:-1px;
  margin-bottom:12px; line-height:1.12; color:#fff;
}
.sec-sub { font-size:15px; color:var(--muted); line-height:1.75; max-width:560px; }

/* ── PAGE HEADER (integration pages) ── */
.page-header {
  padding:56px 52px 52px;
  background:linear-gradient(160deg, #101828 0%, #0e1a30 60%, #101828 100%);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 25% 50%, rgba(37,99,235,.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(14,165,233,.07) 0%, transparent 55%);
}
.page-header-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center;
}
.page-header-logo-pair {
  display:flex; align-items:center; gap:22px; margin-bottom:24px;
}
.page-header-icon {
  width:60px; height:60px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.1); border:1.5px solid rgba(59,130,246,.25);
}
.page-header-plus { font-size:20px; color:var(--dim); }
.page-header-logo img { height:48px; filter:var(--glow-blue); }
.page-header-h1 {
  font-size:42px; font-weight:800; letter-spacing:-1.5px;
  line-height:1.06; margin-bottom:12px; color:#fff;
}
.page-header-sub {
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:16px;
}
.page-header-body {
  font-size:15px; color:var(--muted); line-height:1.75;
  max-width:520px; margin-bottom:28px;
}

/* ── PIPELINE ── */
.pipeline-outer { margin:48px 0 20px; position:relative; }
.pipe-track {
  position:absolute; top:80px; left:7%; width:86%; height:2px;
  background:linear-gradient(90deg,
    rgba(37,99,235,.3) 0%, rgba(124,58,237,.55) 50%, rgba(16,185,129,.35) 100%);
}
.pipe-pulse {
  position:absolute; top:76px; height:10px; width:90px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.85),transparent);
  border-radius:5px; animation:pflow 3.4s ease-in-out infinite;
}
.pipeline { display:grid; grid-template-columns:repeat(5,1fr); position:relative; z-index:1; }
.pipe-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px; }
.pipe-node { position:relative; width:158px; height:158px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; }
.pipe-node svg { width:100%; height:100%; transition:filter .25s,transform .2s; }
.pipe-node:hover svg { transform:scale(1.06); }
.pipe-node--ai { width:174px; height:174px; margin-top:-8px; }
.pipe-num {
  position:absolute; top:6px; right:6px; width:24px; height:24px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; z-index:2;
}
.pipe-stage { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; }
.pipe-title  { font-size:13px; font-weight:700; color:#fff; margin-bottom:5px; line-height:1.3; }
.pipe-desc   { font-size:11px; color:var(--muted); line-height:1.55; }

/* ── SPLITS ── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split.flip > .split-copy { order:1; }
.split.flip > .split-img  { order:2; }
.split-img { position:relative; }
.split-img img, .split-img .svg-frame {
  width:100%; border-radius:14px;
  box-shadow:0 0 0 1px rgba(59,130,246,.12), var(--shadow-lg);
}
.split-img::before {
  content:''; position:absolute; inset:-1px; border-radius:15px;
  background:linear-gradient(135deg,rgba(59,130,246,.22),transparent 45%,rgba(124,58,237,.14));
  z-index:-1;
}
.svg-frame { background:var(--bg2); border-radius:14px; padding:24px; overflow:hidden; }

/* ── IE ROWS ── */
.ie-rows { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.ie-row {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px;
  transition:border-color .2s, box-shadow .2s;
}
.ie-row:hover { border-color:rgba(59,130,246,.25); box-shadow:0 0 18px rgba(37,99,235,.07); }
.ie-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.1); border:1px solid rgba(59,130,246,.18);
}
.ie-icon svg { width:26px; height:26px; }
.ie-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; }
.ie-desc  { font-size:12px; color:var(--muted); line-height:1.6; }

/* ── ARCH ── */
.arch-wrap { position:relative; margin-bottom:24px; }
.arch-svg {
  width:100%; background:var(--bg2); border-radius:16px;
  border:1px solid var(--border-blue); padding:28px;
  box-shadow:var(--shadow-lg);
}
.arch-callouts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ── CALLOUTS ── */
.callout {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:18px 16px; position:relative; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.callout:hover { border-color:rgba(59,130,246,.25); box-shadow:0 0 20px rgba(37,99,235,.07); }
.callout::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.35),transparent);
}
.callout-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.callout-ico  { width:28px; height:28px; flex-shrink:0; }
.callout-ico svg { width:28px; height:28px; }
.callout-tag  { font-size:10px; font-weight:700; color:var(--blue-xlt); text-transform:uppercase; letter-spacing:.07em; }
.callout-title { font-size:13px; font-weight:700; color:#fff; margin-bottom:5px; }
.callout-desc  { font-size:12px; color:var(--muted); line-height:1.65; }

/* ── REF ARCH ── */
.ref-callouts { display:flex; flex-direction:column; gap:10px; }
.rcallout {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:11px; padding:16px 16px; position:relative; overflow:hidden;
  transition:border-color .2s;
}
.rcallout:hover { border-color:rgba(59,130,246,.25); }
.rcallout::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.3),transparent);
}
.rcallout-head  { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.rcallout-ico   { width:26px; height:26px; flex-shrink:0; }
.rcallout-ico svg { width:26px; height:26px; }
.rcallout-label { font-size:10px; font-weight:700; color:var(--blue-xlt); text-transform:uppercase; letter-spacing:.07em; }
.rcallout-title { font-size:13px; font-weight:700; color:#fff; margin-bottom:4px; }
.rcallout-desc  { font-size:12px; color:var(--muted); line-height:1.65; }

/* ── SOURCE / GW ── */
.gw-block { margin-top:16px; }
.block-lbl { font-size:10px; font-weight:700; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px; }
.gw-icons  { display:flex; gap:7px; align-items:center; }
.gw-cell   { width:42px; height:42px; background:rgba(37,99,235,.08); border:1px solid var(--border-blue); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.gw-cell svg { width:22px; height:22px; }
.gw-caption { font-size:10px; color:var(--dim); line-height:1.4; margin-left:5px; }
.src-list { display:flex; flex-direction:column; gap:8px; }
.src-pill { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:7px; padding:7px 12px; font-size:13px; font-weight:600; color:var(--text-2); }
.src-pill svg { width:20px; height:20px; flex-shrink:0; }

/* ── ERP CARDS ── */
.erp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
.erp-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:13px; padding:24px 22px;
  transition:border-color .25s, box-shadow .25s, transform .2s;
  position:relative; overflow:hidden;
}
.erp-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.25),transparent);
}
.erp-card:hover {
  border-color:rgba(59,130,246,.28);
  box-shadow:0 0 32px rgba(37,99,235,.09), var(--shadow-card);
  transform:translateY(-2px);
}
.erp-card-logo { height:50px; display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.erp-card-logo svg { width:42px; height:42px; flex-shrink:0; }
.erp-name { font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; }
.erp-desc { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:12px; }
.erp-tags { display:flex; gap:5px; flex-wrap:wrap; }
.etag { font-size:10px; font-weight:600; padding:3px 9px; border-radius:5px; background:rgba(37,99,235,.1); color:var(--blue-xlt); border:1px solid var(--border-blue); }

/* ── COVERAGE CARD ── */
.coverage-card { background:var(--bg2); border-radius:14px; padding:28px; position:relative; overflow:hidden; }
.coverage-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent,#3b82f6),transparent); }
.cov-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.cov-meter { margin-bottom:14px; }
.cov-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.cov-label span:first-child { color:var(--muted); font-weight:600; }
.cov-bar  { height:7px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; }
.cov-fill { height:100%; border-radius:4px; }
.cov-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:11px; color:var(--muted); }
.cov-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px; }
.cov-stats { border-top:1px solid var(--border); margin-top:16px; padding-top:14px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; text-align:center; }
.cov-stat-num { font-size:24px; font-weight:800; }
.cov-stat-lbl { font-size:10px; color:var(--dim); margin-top:2px; }

/* ── DOMAIN TABS ── */
.domain-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); }
.dtab { padding:13px 20px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; display:flex; align-items:center; gap:7px; }
.dtab:hover { color:#fff; }
.dtab.active { color:#fff; border-bottom-color:var(--accent,#3b82f6); }
.dtab-count { font-size:10px; padding:2px 7px; border-radius:10px; font-weight:700; background:rgba(59,130,246,.12); color:var(--blue-xlt); }

/* ── MAPPING TABLE ── */
.domain-panel { display:none; }
.domain-panel.active { display:block; }
.map-table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:0 0 12px 12px; overflow:hidden; }
.map-table { width:100%; border-collapse:collapse; }
.map-table thead tr { background:rgba(37,99,235,.08); border-bottom:1px solid var(--border-blue); }
.map-table thead th { padding:11px 16px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); text-align:left; }
.map-table tbody tr { border-bottom:1px solid rgba(255,255,255,.04); transition:background .15s; }
.map-table tbody tr:hover { background:rgba(37,99,235,.04); }
.map-table tbody tr:last-child { border-bottom:none; }
.map-table td { padding:12px 16px; font-size:13px; vertical-align:top; }
.field-name  { font-weight:700; color:#fff; }
.field-wd    { color:var(--muted); }
.field-notes { color:var(--dim); font-size:12px; }
.badge-oob { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:rgba(16,185,129,.1); color:#34d399; border:1px solid rgba(16,185,129,.22); }
.badge-map { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:rgba(249,115,22,.1); color:#fb923c; border:1px solid rgba(249,115,22,.22); }
.badge-opt { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:rgba(96,165,250,.08); color:#93c5fd; border:1px solid rgba(59,130,246,.18); }
.badge-rt  { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:rgba(34,211,238,.08); color:#67e8f9; border:1px solid rgba(34,211,238,.18); }
.api-ref { background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:12px 16px; margin-top:10px; display:flex; gap:18px; flex-wrap:wrap; font-size:12px; }
.api-chip { display:flex; align-items:center; gap:6px; color:var(--muted); }
.api-chip strong { color:var(--blue-xlt); }

/* ── STATS BAND ── */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:12px; overflow:hidden; margin:40px 0 0; }
.stat-cell { background:var(--bg); padding:26px 18px; text-align:center; }
.stat-ico { width:52px; height:52px; margin:0 auto 10px; }
.stat-ico svg { width:52px; height:52px; }
.stat-num { font-size:24px; font-weight:800; color:var(--blue-xlt); letter-spacing:-0.5px; }
.stat-lbl { font-size:11px; color:var(--dim); margin-top:3px; }

/* ── VALUE GRID ── */
.val-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.val-card { background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:28px 24px; position:relative; overflow:hidden; }
.val-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue-lt),transparent); opacity:.2; }
.val-num   { font-size:48px; font-weight:800; color:var(--blue-xlt); letter-spacing:-3px; line-height:1; margin-bottom:7px; }
.val-label { font-size:14px; font-weight:700; color:#fff; margin-bottom:8px; }
.val-desc  { font-size:13px; color:var(--muted); line-height:1.7; }

/* ── CONNECTOR GRID ── */
.conn-hdr { display:flex; align-items:center; gap:13px; margin-bottom:32px; }
.conn-hdr svg { width:36px; height:36px; }
.conn-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.conn-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:18px 10px; text-align:center; transition:all .2s; }
.conn-card:hover { border-color:rgba(96,165,250,.25); }
.conn-dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-bottom:9px; box-shadow:0 0 6px rgba(16,185,129,.6); animation:pdot 2.2s ease-in-out infinite; }
.conn-name { font-size:11px; font-weight:700; color:#fff; margin-bottom:3px; }
.conn-sub  { font-size:10px; color:var(--dim); }

/* ── DESIGN CONSIDERATIONS ── */
.design-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.design-card { background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:22px; position:relative; overflow:hidden; }
.design-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent,#3b82f6),transparent); }
.design-icon  { font-size:22px; margin-bottom:10px; }
.design-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:7px; }
.design-list  { font-size:12px; color:var(--muted); line-height:1.8; list-style:none; }
.design-list li::before { content:'→ '; color:rgba(96,165,250,.45); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:999; background:rgba(6,10,20,.85); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border-blue); border-radius:18px; padding:40px; max-width:560px; width:100%; position:relative; box-shadow:0 0 60px rgba(37,99,235,.15), var(--shadow-lg); max-height:90vh; overflow-y:auto; }
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; border-radius:18px 18px 0 0; background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent); }
.modal-close { position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-close:hover { background:rgba(255,255,255,.11); color:#fff; }
.modal-logo { margin-bottom:18px; }
.modal-logo img { height:42px; filter:var(--glow-blue); }
.modal-title { font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:6px; }
.modal-sub { font-size:13px; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.form-group { margin-bottom:13px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
label { display:block; font-size:11px; font-weight:700; color:rgba(168,184,216,.55); letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px; }
label span { color:var(--blue-xlt); }
input,select,textarea { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:9px 12px; font-size:13px; color:#fff; font-family:var(--font); outline:none; transition:border-color .18s, box-shadow .18s; }
input:focus,select:focus,textarea:focus { border-color:rgba(59,130,246,.45); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
input::placeholder,textarea::placeholder { color:rgba(168,184,216,.22); }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2360a5fa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-color:var(--bg3); }
select option { background:var(--bg2); }
textarea { resize:vertical; min-height:75px; }
.form-submit { width:100%; margin-top:5px; padding:12px; font-size:14px; }
.form-success { display:none; text-align:center; padding:28px 0; }
.form-success .check { font-size:40px; margin-bottom:10px; }
.form-success h3 { font-size:19px; font-weight:700; margin-bottom:7px; }
.form-success p { font-size:13px; color:var(--muted); }
.form-note { font-size:11px; color:var(--dim); text-align:center; margin-top:11px; line-height:1.5; }
.form-note a { color:var(--blue-xlt); }

/* ── CTA ── */
.cta { margin:0 52px 80px; position:relative; overflow:hidden; background:var(--bg2); border:1px solid var(--border-blue); border-radius:16px; padding:64px 56px; text-align:center; }
.cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(37,99,235,.08) 0%,transparent 70%); pointer-events:none; }
.cta-h   { font-size:40px; font-weight:800; letter-spacing:-1.5px; margin-bottom:14px; position:relative; color:#fff; }
.cta-sub { font-size:15px; color:var(--muted); max-width:500px; margin:0 auto 40px; line-height:1.75; position:relative; }
.cta-btns { display:flex; gap:12px; justify-content:center; position:relative; }

/* ── FOOTER ── */
.footer { border-top:1px solid var(--border); background:var(--bg2); }
.footer-main { padding:44px 52px 28px; display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:36px; }
.footer-brand img { height:48px; filter:var(--glow-blue); margin-bottom:12px; }
.footer-tagline { font-size:13px; color:var(--dim); line-height:1.65; margin-bottom:14px; max-width:230px; }
.footer-subsidiary { font-size:11px; color:rgba(168,184,216,.3); border-top:1px solid var(--border); padding-top:12px; line-height:1.6; }
.footer-subsidiary a { color:var(--blue-xlt); }
.footer-col h4 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(168,184,216,.36); margin-bottom:12px; }
.footer-col a { display:block; font-size:13px; color:rgba(168,184,216,.5); margin-bottom:8px; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bar { border-top:1px solid var(--border); padding:16px 52px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:rgba(168,184,216,.26); }
.footer-bar a { color:rgba(168,184,216,.36); }
.footer-bar a:hover { color:#fff; }
.footer-bar-links { display:flex; gap:18px; }

/* ── BREADCRUMB ── */
.breadcrumb { padding:14px 52px; font-size:12px; color:var(--dim); display:flex; gap:7px; align-items:center; border-bottom:1px solid var(--border); background:var(--bg2); }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:#fff; }

/* ── STATUS / IN-PROGRESS STYLES ── */
.status-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.25); border-radius:18px; padding:5px 13px; font-size:11px; font-weight:700; color:#fb923c; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.status-badge::before { content:'●'; font-size:8px; animation:pdot 1.5s ease-in-out infinite; }
.feat-split { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.feat-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:22px; }
.feat-card-title { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:12px; }
.feat-item { display:flex; gap:9px; font-size:13px; color:var(--muted); align-items:flex-start; margin-bottom:9px; }
.feat-item strong { color:#fff; display:block; font-size:13px; margin-bottom:2px; }
.feat-check { flex-shrink:0; margin-top:1px; }

/* ── FLOW DIAGRAM ── */
.flow-diagram { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px; }

/* ── MEYRO AI CALLOUT (replacing "Meet Mey") ── */
.meyro-banner {
  background:linear-gradient(135deg, rgba(37,99,235,.1), rgba(14,165,233,.07));
  border:1px solid rgba(59,130,246,.2);
  border-radius:14px; padding:20px 24px;
  display:flex; align-items:center; gap:18px;
  cursor:pointer; transition:border-color .2s, box-shadow .2s;
}
.meyro-banner:hover { border-color:rgba(59,130,246,.32); box-shadow:0 0 20px rgba(37,99,235,.08); }
.meyro-banner img { width:70px; flex-shrink:0; filter:drop-shadow(0 0 10px rgba(37,99,235,.4)); }
.meyro-banner-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.meyro-banner-body  { font-size:12px; color:var(--muted); line-height:1.55; }
.meyro-banner-cta   { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--blue-xlt); margin-top:7px; }
.meyro-banner-cta::after { content:'→'; }

/* mey-callout alias for compatibility */
.mey-callout { display:flex;align-items:center;gap:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px 22px;cursor:pointer;transition:border-color .2s; }
.mey-callout:hover { border-color:rgba(59,130,246,.28); }
.mey-callout img { width:70px; flex-shrink:0; }
.mey-callout-name { font-size:14px;font-weight:700;color:#fff;margin-bottom:4px; }
.mey-callout-body { font-size:12px;color:var(--muted);line-height:1.55; }
.mey-callout-cta  { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--blue-xlt);margin-top:7px; }
.mey-callout-cta::after { content:'→'; }

/* ── ANIMATIONS ── */
@keyframes pdot  { 0%,100%{opacity:.4;} 50%{opacity:1;} }
@keyframes pflow { 0%{left:7%;opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:calc(93% - 90px);opacity:0;} }
@keyframes orbit { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ================================================================
   RESPONSIVE — Mobile-first breakpoints
   ================================================================ */

/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {

  /* Nav */
  .nav { padding:0 24px; height:68px; }
  .nav-links { display:none; }
  .nav-logo img { height:50px; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr min(220px,34%);
    min-height: auto;
    padding: 40px 24px 0;
    gap: 12px;
  }
  .hero-right { align-items: center; }
  .hero-right > div { max-width: 220px; }
  .hero-right > div > img:first-child { width: 180px !important; }
  .hero-right > div > div[style*="position:absolute"] { display: none; }
  .hero-right > div > div[style*="border-radius:50%"] { display: none; }
  .hero-left  { padding-bottom: 0; }
  .hero-h1    { font-size: 38px; letter-spacing: -1.5px; }
  .hero-strip { padding: 20px 24px; gap: 18px; flex-wrap: wrap; margin: 0; }
  .hero-strip > p { display:none; }

  /* Feature band */
  .feat-band { grid-template-columns: 1fr 1fr; }
  .feat:nth-child(2) { border-right: none; }
  .feat:nth-child(3) { border-top: 1px solid var(--border); }
  .feat:nth-child(4) { border-top: 1px solid var(--border); }

  /* Sections */
  .section { padding: 56px 24px; }

  /* Pipeline — 3 col then 2 col on mobile */
  .pipeline { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .pipe-node { width: 120px; height: 120px; }
  .pipe-node--ai { width: 132px; height: 132px; margin-top: -6px; }
  .pipe-track { top: 60px; }
  .pipe-pulse { top: 55px; }

  /* Splits */
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.flip > .split-copy { order: 1; }
  .split.flip > .split-img  { order: 2; }

  /* Arch callouts */
  .arch-callouts { grid-template-columns: 1fr 1fr; }

  /* ERP grid */
  .erp-grid { grid-template-columns: 1fr 1fr; }

  /* Stats band */
  .stats-band { grid-template-columns: 1fr 1fr; }

  /* Value grid */
  .val-grid { grid-template-columns: 1fr 1fr; }

  /* Connector grid */
  .conn-grid { grid-template-columns: repeat(3, 1fr); }

  /* Design grid */
  .design-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; padding: 36px 24px 24px; gap: 24px; }
  .footer-bar  { padding: 16px 24px; flex-direction: column; gap: 10px; text-align: center; }
  .footer-bar-links { justify-content: center; }

  /* CTA */
  .cta { margin: 0 24px 56px; padding: 48px 32px; }
  .cta-h { font-size: 30px; }

  /* Page header (integration pages) */
  .page-header { padding: 40px 24px 36px; }
  .page-header-inner { grid-template-columns: 1fr; gap: 28px; }
  .page-header-h1 { font-size: 34px; }

  /* Breadcrumb */
  .breadcrumb { padding: 12px 24px; }

  /* Domain tabs — scrollable */
  .domain-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .domain-tabs::-webkit-scrollbar { display: none; }
  .dtab { padding: 12px 16px; font-size: 12px; white-space: nowrap; }

  /* Feat split */
  .feat-split { grid-template-columns: 1fr; }

  /* Meyro banner */
  .meyro-banner img { width: 70px; }

}

/* ── MOBILE (≤600px) ── */
@media (max-width: 600px) {

  /* Nav */
  .nav { padding: 0 16px; height: 62px; }
  .nav-logo img { height: 44px; }
  .nav-actions .btn-o { display: none; } /* hide "Contact Us" on very small screens */
  .btn-p, .btn-o { padding: 10px 20px; font-size: 13px; }

  /* Hero */
  .hero { padding: 40px 16px 0; grid-template-columns: 1fr; }
  .hero-right { justify-content: flex-start; padding: 16px 0 0; }
  .hero-right > div { max-width: 140px; margin: 0; }
  .hero-right > div > img:first-child { width: 130px !important; }
  .hero-h1 { font-size: 30px; letter-spacing: -1px; line-height: 1.08; }
  .hero-tagline { font-size: 11px; }
  .hero-body { font-size: 14px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-p, .hero-btns .btn-o { width: 100%; justify-content: center; }
  .hero-strip { padding: 16px; gap: 12px; }
  .hstat-num { font-size: 20px; }
  .hstat-lbl { font-size: 10px; }

  /* Feature band — stack all */
  .feat-band { grid-template-columns: 1fr; }
  .feat { border-right: none !important; border-top: 1px solid var(--border); }
  .feat:first-child { border-top: none; }

  /* Meyro callout strip — single column */
  .meyro-strip-inner { grid-template-columns: 1fr !important; }

  /* Pipeline — 2 col on small mobile, scroll hint */
  .pipeline-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .pipeline {
    grid-template-columns: repeat(5, 140px);
    min-width: 700px; /* force horizontal scroll */
    padding-bottom: 4px;
  }
  .pipe-node { width: 110px; height: 110px; }
  .pipe-node--ai { width: 122px; height: 122px; }
  .pipe-track { display: none; } /* hide track on scroll — too messy */
  .pipe-pulse { display: none; }
  /* Scroll hint */
  .pipeline-outer::after {
    content: '← scroll →';
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--dim);
    padding: 6px 0 2px;
    letter-spacing: .1em;
  }

  /* Sections */
  .section { padding: 44px 16px; }
  .sec-h { font-size: 28px; }
  .sec-sub { font-size: 14px; }

  /* Arch callouts — single col */
  .arch-callouts { grid-template-columns: 1fr; }

  /* ERP grid — single col */
  .erp-grid { grid-template-columns: 1fr; }

  /* Stats band — 2 col */
  .stats-band { grid-template-columns: 1fr 1fr; }

  /* Value grid — single col */
  .val-grid { grid-template-columns: 1fr; }

  /* Connector grid — 2 col */
  .conn-grid { grid-template-columns: repeat(2, 1fr); }

  /* Design grid — single col */
  .design-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta { margin: 0 16px 48px; padding: 36px 20px; }
  .cta-h { font-size: 26px; letter-spacing: -.5px; }
  .cta-sub { font-size: 14px; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn-p, .cta-btns .btn-o { width: 100%; justify-content: center; padding: 14px; }

  /* Meyro in CTA — stack vertically */
  .cta > div { flex-direction: column !important; align-items: center !important; }
  .cta > div img { width: 80px !important; margin-bottom: 8px; }
  .cta > div > div { text-align: center; }
  .cta > div > div .cta-btns { justify-content: center; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr; padding: 28px 16px 20px; gap: 20px; }
  .footer-bar  { padding: 14px 16px; font-size: 11px; }
  .footer-tagline { max-width: 100%; }

  /* Modal */
  .modal { padding: 28px 20px; border-radius: 14px; }
  .modal-title { font-size: 19px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Page header */
  .page-header { padding: 32px 16px 28px; }
  .page-header-h1 { font-size: 28px; letter-spacing: -.5px; }
  .page-header-logo-pair { gap: 14px; }

  /* IE rows */
  .ie-row { flex-direction: column; gap: 8px; }
  .ie-icon { width: 38px; height: 38px; }

  /* Coverage card stats */
  .cov-stats { grid-template-columns: 1fr 1fr; }

  /* Mapping table — horizontal scroll */
  .map-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-table { min-width: 560px; }
  .map-table td, .map-table th { padding: 10px 12px; font-size: 12px; }

  /* Domain tabs */
  .dtab { font-size: 11px; padding: 10px 12px; }

  /* GW icons */
  .gw-icons { flex-wrap: wrap; }
  .gw-caption { display: none; }

  /* Meyro float widget */
  #_ml-panel { width: calc(100vw - 16px); right: 8px; bottom: 8px; height: calc(100vh - 80px); border-radius: 16px; }
  #_ml-btn   { bottom: 16px; right: 16px; }
  #_ml-msc   { width: 64px; }
  #_ml-bubble { font-size: 12px; padding: 7px 12px; }

  /* Hero - keep Meyro but scale down, hide floating tags on very small */
  .hero-right > div > div[style*="position:absolute"] { display: none; }
  .hero-right > div > div[style*="border-radius:50%"] { display: none; }
  .hero-right > div > img:first-child { width: min(160px,40vw) !important; }
  .hero-right > div { max-width:200px; }

  /* Inline grid overrides for sections with inline style grids */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Meyro in hero: scale down */
  .hero-right img { width: 220px !important; }
}

/* ── EXTRA SMALL (≤380px) ── */
@media (max-width: 380px) {
  .hero-h1 { font-size: 28px; }
  .nav-logo img { height: 38px; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .erp-grid { grid-template-columns: 1fr; }
}

/* ── UNIVERSAL MOBILE HELPERS ── */

/* Make all section paddings respect viewport */
@media (max-width: 600px) {
  /* Override all inline padding:XX 56px and padding:XX 52px patterns */
  .section, .section.alt { padding-left: 16px !important; padding-right: 16px !important; }
  .nav { padding-left: 16px !important; padding-right: 16px !important; }
  .cta  { margin-left: 16px !important; margin-right: 16px !important; }
  .hero { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-strip { margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
  .footer-main { padding-left: 16px !important; padding-right: 16px !important; }
  .footer-bar  { padding-left: 16px !important; padding-right: 16px !important; }
  .breadcrumb  { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 900px) {
  .section { padding-left: 24px !important; padding-right: 24px !important; }
  .nav     { padding-left: 24px !important; padding-right: 24px !important; }
  .hero    { padding-left: 24px !important; padding-right: 24px !important; }
  .footer-main { padding-left: 24px !important; padding-right: 24px !important; }
  .footer-bar  { padding-left: 24px !important; padding-right: 24px !important; }
  .breadcrumb  { padding-left: 24px !important; padding-right: 24px !important; }
  .cta { margin-left: 24px !important; margin-right: 24px !important; }
}

/* Prevent horizontal overflow globally */
body { max-width: 100vw; }
* { min-width: 0; } /* fix grid blowout */

/* Touch-friendly tap targets */
@media (max-width: 900px) {
  .btn-p, .btn-o, .dtab, ._mlqr, .nav-actions button { min-height: 44px; }
  .etag { padding: 5px 10px; }
}

/* ERP card link styles */
a > .erp-card .erp-name::after {
  content: ' →';
  opacity: 0;
  transition: opacity .2s;
  color: var(--blue-xlt);
}
a:hover > .erp-card .erp-name::after { opacity: 1; }
a > .erp-card { transition: border-color .25s, box-shadow .25s, transform .2s; }

/* ================================================================
   NAV — Sleek redesign with dropdown
   ================================================================ */
.nav {
  height: 68px;
}
.nav-logo img { height: 54px; }
.nav-links {
  display: flex; gap: 4px; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
.nav-links > a, .nav-dd-trigger {
  padding: 7px 13px; border-radius: 7px;
  color: var(--text-2); transition: color .15s, background .15s;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.nav-links > a:hover, .nav-dd-trigger:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-links > a.active { color: #fff; }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dd-arrow { font-size: 10px; opacity: .6; transition: transform .2s; }
.nav-dropdown:hover .nav-dd-arrow { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: -8px;
  background: rgba(16,24,40,.98); backdrop-filter: blur(16px);
  border: 1px solid var(--border-blue); border-radius: 12px;
  padding: 6px; min-width: 210px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, visibility .18s, transform .18s;
  z-index: 200;
}
.nav-dropdown:hover .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--text-2); transition: all .15s; gap: 8px;
}
.nav-dd-menu a:hover { color: #fff; background: rgba(59,130,246,.1); }
.nav-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  background: rgba(249,115,22,.15); color: #fb923c;
  border: 1px solid rgba(249,115,22,.25); border-radius: 4px;
  letter-spacing: .04em;
}

/* Demo button — sleeker pill */
.nav-demo-btn {
  padding: 8px 20px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #1d55d6, #2563eb) !important;
  box-shadow: 0 2px 12px rgba(37,99,235,.4) !important;
}
.nav-demo-btn:hover {
  box-shadow: 0 4px 20px rgba(37,99,235,.6) !important;
}

/* Mobile nav update */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .nav-demo-btn { display: block; padding: 8px 16px !important; font-size: 12px !important; }
}

/* ERP card link */
a > .erp-card .erp-name::after {
  content: ' →'; opacity: 0; transition: opacity .2s; color: var(--blue-xlt);
}
a:hover > .erp-card .erp-name::after { opacity: 1; }

/* ================================================================
   STAT BAR — full-width, uniform, spans hero bottom
   ================================================================ */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr) repeat(5, 1px);
  /* interleave: item div item div item div item div item div item */
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 0 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* span the full hero width (hero has -52px margin trick) */
  margin: 32px -52px 0;
}
.stat-bar-item {
  padding: 22px 0;
  text-align: center;
  flex: 1;
}
.stat-bar-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--blue-xlt);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 5px;
}
.stat-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.stat-bar-sub {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .02em;
}
.stat-bar-div {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* ================================================================
   MEYRO INTRO STRIP
   ================================================================ */
.meyro-intro {
  background: linear-gradient(135deg, rgba(22,32,53,.8), rgba(16,24,40,.6));
  border-bottom: 1px solid var(--border);
}
.meyro-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.meyro-intro-left { flex-shrink: 0; }
.meyro-intro-img {
  width: 88px;
  filter: drop-shadow(0 0 16px rgba(37,99,235,.45));
  animation: meyro-float 3.5s ease-in-out infinite;
}
.meyro-intro-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.meyro-intro-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 12px;
}
.meyro-intro-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meyro-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.meyro-badge--green  { background: rgba(16,185,129,.1); color: #34d399; border: 1px solid rgba(16,185,129,.2); }
.meyro-badge--blue   { background: rgba(37,99,235,.1);  color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.meyro-badge--purple { background: rgba(124,58,237,.1); color: #c4b5fd; border: 1px solid rgba(124,58,237,.2); }
.meyro-badge--orange { background: rgba(249,115,22,.1); color: #fb923c; border: 1px solid rgba(249,115,22,.2); }

/* ================================================================
   NAV v2 — truly sleek
   ================================================================ */
.nav {
  height: 64px;
  padding: 0 48px;
  background: rgba(11,17,32,.95);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo img { height: 50px; }

.nav-links {
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
}
.nav-links > a {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-2);
  transition: color .12s, background .12s;
}
.nav-links > a:hover { color: #fff; background: rgba(255,255,255,.05); }

/* Dropdown trigger matches links */
.nav-dd-trigger {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: color .12s, background .12s;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.nav-dd-trigger:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-dd-arrow {
  font-size: 9px;
  opacity: .5;
  transition: transform .18s, opacity .18s;
  margin-top: 1px;
}
.nav-dropdown:hover .nav-dd-arrow { transform: rotate(180deg); opacity: .9; }

/* Dropdown panel */
.nav-dd-menu {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(16,24,40,.98);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 5px;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.nav-dropdown:hover .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(200,215,255,.65);
  gap: 0;
  justify-content: space-between;
}
.nav-dd-menu a:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Demo button */
.nav-demo-btn {
  padding: 7px 18px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  letter-spacing: 0 !important;
  background: var(--blue) !important;
  box-shadow: none !important;
}
.nav-demo-btn:hover {
  background: #1d55d6 !important;
  box-shadow: 0 0 16px rgba(37,99,235,.4) !important;
  transform: none !important;
}

/* ================================================================
   RESPONSIVE — stat bar, meyro strip
   ================================================================ */
@media (max-width: 900px) {
  .stat-bar {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    margin: 24px -24px 0;
  }
  /* show only first 5 items (6 + 5 dividers = 11 cells; hide last 2) */
  .stat-bar > *:nth-child(n+10) { display: none; }
  .stat-bar-item { padding: 18px 0; }
  .stat-bar-num { font-size: 22px; }

  .meyro-intro-inner { padding: 22px 24px; gap: 18px; }
  .meyro-intro-img { width: 68px; }
  .meyro-intro-body { font-size: 12px; }
}

@media (max-width: 600px) {
  .stat-bar {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    margin: 20px -16px 0;
  }
  .stat-bar > *:nth-child(n+6) { display: none; }
  .stat-bar-item { padding: 16px 8px; }
  .stat-bar-num { font-size: 20px; }
  .stat-bar-label { font-size: 11px; }
  .stat-bar-sub { display: none; }

  .meyro-intro-inner { padding: 18px 16px; gap: 14px; flex-wrap: nowrap; }
  .meyro-intro-img { width: 54px; }
  .meyro-intro-name { font-size: 13px; }
  .meyro-intro-body { display: none; }
  .meyro-badge--orange { display: none; }

  .nav { padding: 0 16px; height: 60px; }
  .nav-logo img { height: 44px; }
}