/* ===== Mosaiced Pro Overrides (Light, Non-breaking) ===== */
:root{
  --m-bg:#ffffff;
  --m-surface:#f9fafb;
  --m-panel:#ffffff;
  --m-text:#0f172a;
  --m-muted:#505a6b;
  --m-accent:#4f46e5; /* indigo */
  --m-accent-2:#16a34a; /* green */
  --m-border:#e5e7eb;
  --m-radius:14px;
  --m-shadow:0 8px 24px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
}

/* Base */
html{scroll-behavior:smooth}
body{
  background:var(--m-bg);
  color:var(--m-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header layout stays as your CSS expects; we only improve spacing/alignment */
.header{background:#fff;border-bottom:1px solid var(--m-border)}
.header .container{display:flex;align-items:center;gap:16px}
.header .logo{font-weight:700}
.nav .nav__track{gap:8px}
.nav .nav__link{padding:10px 12px;border-radius:12px}
.nav .nav__indicator{border-radius:12px}
.btn--cta{background:var(--m-accent);color:#fff;border:0}
.btn--cta:hover{filter:brightness(1.05)}

/* Sections & containers */
.container{max-width:1160px;margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.hero{padding:96px 0 56px}
.section--alt{background:var(--m-surface);}

/* Hero */
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero__eyebrow{display:inline-block;color:var(--m-accent-2);font-weight:600;letter-spacing:.3px;margin-bottom:8px}
.hero__title{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin:0 0 12px}
.hero__sub{color:var(--m-muted);margin:0 0 20px;font-size:clamp(16px,2.2vw,18px)}
.hero__media{border-radius:var(--m-radius);overflow:hidden;box-shadow:var(--m-shadow);border:1px solid var(--m-border)}
.hero .btn{margin-right:10px}

/* Grids */
.grid{display:grid;gap:28px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Cards */
.card{background:var(--m-panel);border:1px solid var(--m-border);border-radius:var(--m-radius);padding:22px;box-shadow:var(--m-shadow)}
.card h3{margin:0 0 8px}
.card p{color:var(--m-muted);margin:0}

/* Buttons (respect your .btn base class) */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;border:1px solid var(--m-border);background:#fff;color:var(--m-text);text-decoration:none}
.btn:hover{border-color:#cbd5e1}
.btn--primary{background:var(--m-accent);color:#fff;border:0}
.btn--glass{background:#f3f4f6;color:var(--m-text)}

/* Feature rows */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.feature:nth-child(even){grid-template-columns:1.1fr .9fr}
.feature img{width:100%;border-radius:12px;border:1px solid var(--m-border)}
.feature p{color:var(--m-muted)}

/* Footer */
.site-footer{border-top:1px solid var(--m-border);padding:28px 0;color:#6b7280;background:#fff}
.site-footer a{color:#111827}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid--3,.grid--4{grid-template-columns:1fr}
}

/* === Header cleanup & responsive nav === */
@media (min-width: 960px){
  #navToggle { display:none !important; }
}
.header__inner {
  align-items: center;
  gap: 16px;
}
.nav {
  overflow: visible;
}
/* Keep CTA on one line */
.header .btn--cta{ white-space: nowrap;}

/* === Submenu (Modules) === */
.nav__item--has-submenu { position: relative; }
.nav__submenu-toggle { 
  border: 0; background: transparent; cursor: pointer; 
  font: inherit; color: inherit; padding: 8px 10px; border-radius: 10px;
}
.nav__submenu { 
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 260px; padding: 10px; margin-top: 10px;
  background: #ffffff; color:#0f172a; border:1px solid #e5e7eb;
  border-radius: 14px; box-shadow: 0 20px 40px rgba(2,6,23,.16);
  display: none;
}
.nav__submenu a { display:block; padding:10px 12px; border-radius:10px; color:#0f172a; text-decoration:none; }
.nav__submenu a:hover { background:#f3f4f6; }
.nav__item--open > .nav__submenu { display: block; }

/* Mobile: make submenu collapsible in flow */
@media (max-width: 959px){
  .nav__submenu{ position: static; box-shadow:none; border:0; padding:6px 0; margin:4px 0 0; background: transparent; display:none; }
  .nav__item--open > .nav__submenu{ display:block; }
  .nav__submenu a{ padding:8px 14px; }
  .nav__submenu-toggle{ width:100%; text-align:left; }
}

/* === Layout polish === */
.section{ padding: 72px 0; }
.grid{ gap: 28px; }
.card{ border:1px solid #e5e7eb; background:#fff; border-radius:14px; box-shadow: 0 10px 24px rgba(2,6,23,.08); }
.hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
@media (max-width: 960px){ .hero__inner{ grid-template-columns:1fr; } }