/* ============================================================
   MOCA Website — Visual polish layer (loaded last)
   Subtle refinements for cleaner, more modern feel.
   ============================================================ */

/* Slightly warmer & softer body text */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Cleaner header — softer bottom border */
.header { border-bottom-color: rgba(26, 22, 18, 0.06); }

/* Hero — straighten the stats badge (was rotated 2deg, felt dated) */
.hero__stats {
  transform: none !important;
  border-radius: 2px;
  padding: 14px 18px !important;
  box-shadow: 0 10px 30px rgba(255,107,26,0.18) !important;
}
.hero__stats strong {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: -0.005em !important;
  font-weight: 800 !important;
}
.hero__stats div { font-size: 10px !important; letter-spacing: 0.18em !important; }

/* Hero 500+ — slightly smaller and tighter */
.hero__visual-corner .num {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 900 !important;
  font-size: 76px !important;
  letter-spacing: -0.03em !important;
  line-height: 0.92 !important;
}
.hero__visual-corner .label {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  margin-top: 8px !important;
}

/* Cards — warmer hairline border, softer hover */
.pcard,
.ncard {
  border-color: rgba(26, 22, 18, 0.08) !important;
  transition: border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.pcard:hover,
.ncard:hover {
  border-color: rgba(26, 22, 18, 0.16) !important;
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.06);
  transform: translateY(-2px);
}

/* Trust strip — softer dividers */
.trust { border-color: rgba(26, 22, 18, 0.06) !important; }
.trust__label { color: rgba(26, 22, 18, 0.55); }
.trust__label::after { background: var(--moca-orange); opacity: 0.7; }

/* Capabilities — smaller, more elegant numbers */
.cap__num {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 800 !important;
  font-size: 54px !important;
  letter-spacing: -0.025em !important;
}
.cap { border-top-color: rgba(26, 22, 18, 0.85); }

/* Section eyebrow — slightly tighter */
.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.24em;
}

/* Buttons — softer corners on primary CTAs (still 2px elsewhere) */
.btn--lg { border-radius: 2px; }

/* Smoother focus states for accessibility */
.btn:focus-visible,
.header__nav a:focus-visible,
.apps__menu button:focus-visible,
.pcard:focus-visible,
.ncard:focus-visible,
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--moca-orange);
  outline-offset: 2px;
}

/* Form — slightly softer dark inputs */
.form input,
.form select,
.form textarea {
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
}

/* CTA band — slightly cleaner without the diagonal pattern */
.ctaband::before { opacity: 0.5; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__slide.is-active img,
  .apps__slide.is-active img { transform: scale(1) !important; }
}