/* ============================================================
   Menvo Landing — Shared Tokens
   Navy + Coral · Plus Jakarta Sans + Inter + Cairo
   ============================================================ */

:root {
  /* Color */
  --navy:        #1E3A5F;
  --navy-mid:    #2D5A8F;
  --navy-deep:   #15294A;
  --navy-tint:   #EBF2FB;
  --coral:       #E85D24;
  --coral-deep:  #C44A1A;
  --coral-light: #FEF3EE;
  --amber:       #F59E0B;
  --amber-light: #FEF3C7;
  --ink:         #111827;
  --text:        #1F2937;
  --muted:       #6B7280;
  --subtle:      #9CA3AF;
  --border:      #E5E7EB;
  --border-soft: #F1F0EC;
  --bg:          #F9F7F4;
  --bg-alt:      #F4F1EC;
  --surface:     #FFFFFF;
  --whatsapp:    #25D366;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(17,24,39,.04);
  --sh-sm: 0 2px 6px rgba(17,24,39,.05), 0 1px 2px rgba(17,24,39,.04);
  --sh-md: 0 6px 20px rgba(17,24,39,.06), 0 2px 6px rgba(17,24,39,.04);
  --sh-lg: 0 18px 48px rgba(17,24,39,.10), 0 4px 12px rgba(17,24,39,.05);
  --sh-coral: 0 14px 36px rgba(232,93,36,.32);
  --sh-navy:  0 14px 36px rgba(30,58,95,.28);

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-arabic:  'Cairo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reset some elements */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

/* Utility classes */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  font-family: var(--font-body);
}
.mono { font-family: var(--font-mono); }
.arabic { font-family: var(--font-arabic); direction: rtl; }

/* Branded keyframes (carried over from product) */
@keyframes menvoLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes menvoLogoSpark { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.12) rotate(45deg)} }
@keyframes menvoLogoPing  { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.25); opacity:.6} }
@keyframes menvoLivePulse { 0%,100%{box-shadow:0 0 0 0 currentColor} 50%{box-shadow:0 0 0 5px transparent} }
@keyframes menvoTypingDot { 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
@keyframes menvoSpin      { to { transform: rotate(360deg); } }

/* Reveal-on-scroll baseline */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Selection */
::selection { background: var(--coral); color: #fff; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}