/* ==========================================================================
   nMax Development — unified stylesheet (all pages)
   Design tokens come from :root; inline styles reference var(--accent/--radius).
   ========================================================================== */
:root {
  --accent: #6373c9;
  --radius: 40px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: #f4f6fb;
  color: #1b2342;
  font-family: 'Onest', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: #6373c9; color: #fff; }
a { color: inherit; text-decoration: none; }
input, textarea, button { font-family: inherit; }

/* Animations */
@keyframes nmFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nmPulse { 0% { box-shadow: 0 0 0 0 rgba(99,115,201,0.45); } 70% { box-shadow: 0 0 0 7px rgba(99,115,201,0); } 100% { box-shadow: 0 0 0 0 rgba(99,115,201,0); } }
@keyframes nmWiggle { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

/* Responsive grids */
@media (max-width: 920px) {
  .nm-desktop-nav { display: none !important; }
  .nm-burger { display: flex !important; }
  .nm-hero-grid, .nm-about-grid, .nm-contact-grid, .nm-plat-grid, .nm-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .nm-svc-grid, .nm-steps, .nm-port-grid, .nm-rev-grid { grid-template-columns: 1fr 1fr !important; }
  .nm-about-grid > div:first-child { order: 2; }
}
@media (max-width: 600px) {
  .nm-svc-grid, .nm-steps, .nm-port-grid, .nm-rev-grid, .nm-form-row { grid-template-columns: 1fr !important; }
}

/* Hero / About image fills its column exactly via absolute fill */
.nm-imgwrap { position: relative; }
.nm-fillimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 920px) {
  .nm-fillimg { position: static; height: auto; aspect-ratio: 4/5; }
}

/* Services grid — hover motion (covers both <div> and <a> tiles) */
.nm-svc-grid > div, .nm-svc-grid > a { transition: background .35s ease; }
.nm-svc-grid > div > h3, .nm-svc-grid > div > p,
.nm-svc-grid > a > h3, .nm-svc-grid > a > p { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.nm-svc-grid > div:hover > h3, .nm-svc-grid > div:hover > p,
.nm-svc-grid > a:hover > h3, .nm-svc-grid > a:hover > p { transform: translateX(8px); }
.nm-svc-grid > div > span, .nm-svc-grid > a > span { transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease; }
.nm-svc-grid > div:hover > span, .nm-svc-grid > a:hover > span { transform: scale(1.14) translateY(-3px); color: rgba(99,115,201,0.10); }

/* Nav dropdown */
.nm-dropdown { position: relative; }
.nm-dropmenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 236px; background: #fff;
  border: 1px solid rgba(27,35,66,0.1); border-radius: 14px;
  box-shadow: 0 22px 48px -18px rgba(27,35,66,0.38); padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60;
}
.nm-dropdown:hover .nm-dropmenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.nm-dropmenu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 16px; }

/* Modern subtle button hover (pill CTAs) */
a[style*="--radius,40px"], button[style*="--radius,40px"] {
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .25s ease, border-color .25s ease !important;
}
a[style*="--radius,40px"]:hover, button[style*="--radius,40px"]:hover {
  transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(27,35,66,0.55);
}
a[style*="--radius,40px"]:active, button[style*="--radius,40px"]:active { transform: translateY(0); }

/* Mobile menu panel (toggled by functions.js) */
.nm-mobile-menu { overflow: hidden; transition: max-height .32s ease, opacity .25s ease; max-height: 0; opacity: 0; }
.nm-mobile-menu.open { max-height: 460px; opacity: 1; }

/* FAQ accordion */
.nm-faq-card {
  border-radius: 16px; overflow: hidden; transition: all .3s ease;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(27,35,66,0.12);
  box-shadow: 0 1px 2px rgba(27,35,66,0.04);
}
.nm-faq-card.open {
  background: #ffffff; border-color: var(--accent,#6373c9);
  box-shadow: 0 18px 44px -22px rgba(27,35,66,0.4);
}
.nm-faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 24px; text-align: left;
}
.nm-faq-q > span:first-child { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; color: #1b2342; line-height: 1.3; }
.nm-faq-icon {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(27,35,66,0.2); color: #1b2342; background: transparent;
  transition: all .25s ease; transform: rotate(0deg);
}
.nm-faq-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 1.7px; background: currentColor; border-radius: 2px; }
.nm-faq-icon::after  { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1.7px; height: 11px; background: currentColor; border-radius: 2px; }
.nm-faq-card.open .nm-faq-icon { border-color: var(--accent,#6373c9); color: #f4f6fb; background: var(--accent,#6373c9); transform: rotate(45deg); }
.nm-faq-ans { overflow: hidden; transition: max-height .35s ease, opacity .3s ease; max-height: 0; opacity: 0; }
.nm-faq-card.open .nm-faq-ans { max-height: 320px; opacity: 1; }
.nm-faq-ans p { padding: 0 24px 24px; font-size: 16px; line-height: 1.65; color: rgba(27,35,66,0.7); max-width: 42em; }

/* Scroll reveal (initial state set + revealed by functions.js) */
.nm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.nm-reveal.nm-in { opacity: 1; transform: none; }

/* ==========================================================================
   Design refresh — atmosphere, editorial display type, duotone imagery,
   accessibility (contrast + focus).
   ========================================================================== */

/* Soft brand gradient-mesh behind the light sections (dark bands cover it) */
body {
  background-color: #f4f6fb;
  background-image:
    radial-gradient(55rem 55rem at 106% -8%, rgba(99,115,201,0.30), transparent 60%),
    radial-gradient(50rem 50rem at -10% 6%, rgba(141,123,192,0.26), transparent 58%),
    radial-gradient(48rem 48rem at 50% 118%, rgba(99,115,201,0.18), transparent 62%);
  background-repeat: no-repeat;
}

/* Accessibility — visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent, #6373c9);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accessibility — lift the faintest body text to meet WCAG AA.
   Targets only inline `color:` declarations, never shadows/borders. */
[style*="color:rgba(27,35,66,0.5)"],
[style*="color:rgba(27,35,66,0.55)"] { color: rgba(27,35,66,0.72) !important; }

/* ==========================================================================
   Mobile fixes — prevent horizontal overflow, responsive hero headline.
   ========================================================================== */
html { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* Back-to-top hover (kept in CSS so the JS show/hide logic isn't clobbered) */
#nm-back-top:hover { background: var(--accent, #6373c9) !important; }
.nm-root h1 { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 920px) {
  .nm-root h1 { font-size: 42px !important; }
}
@media (max-width: 600px) {
  .nm-root h1 { font-size: 33px !important; line-height: 1.1 !important; }
  /* Hero badge card flows below the image instead of overhanging off-screen */
  .nm-hero-grid .nm-imgwrap > a {
    position: static !important;
    left: auto !important; bottom: auto !important;
    margin-top: 14px; animation: none !important;
  }
  /* Collapse any inline 2-column grid (e.g. the About value cards) to 1 col */
  .nm-root [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
  .nm-root h1 { font-size: 29px !important; }
}