/* ===========================================================
   MPX — base.css
   Design tokens, reset, typography, and foundational elements.
   =========================================================== */

:root{
  --color-primary: #2B3788;
  --color-primary-dark: #26275F;
  --color-secondary: #388CCB;
  --color-background: #FFFFFF;
  --color-text: #000000;
  --color-success: #2BB673;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-border: #E5E7EB;
  --color-muted: #6B7280;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1200px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }

/* ===== layout ===== */
.container{ max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

/* ===== text utilities ===== */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width: 20px; height: 1px;
  background: var(--color-secondary);
  display:inline-block;
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--color-primary);
  color:#fff;
  box-shadow: 0 8px 20px -8px rgba(43,55,136,0.55);
}
.btn-primary:hover{ background: var(--color-primary-dark); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-outline:hover{ border-color: var(--color-primary); background: rgba(43,55,136,0.04); }
.btn-light{
  background:#fff;
  color: var(--color-primary);
}
.btn-light:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35); }

a.btn:focus-visible, button:focus-visible, a:focus-visible{
  outline: 2.5px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== signature motif: broadcast signal rings ===== */
.signal-rings{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.signal-rings svg{ position:absolute; }
.ring{
  fill:none;
  stroke: rgba(56,140,203,0.35);
  stroke-width:1;
}
.ring.pulse{
  animation: pulseRing 4.5s ease-out infinite;
}
@keyframes pulseRing{
  0%{ opacity:0.9; transform: scale(0.85); }
  80%{ opacity:0; }
  100%{ opacity:0; transform: scale(1.4); }
}

/* ===== reveal-on-scroll ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* ===== tags / pills ===== */
.tag-pill{
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13.5px; font-weight:600;
  color: var(--color-primary);
  background:#fff;
  display:inline-block;
}