/* ============================================================
   Base: reset, typography, keyframes, motion preferences
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-mid); }

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* Shared layout shell: 1200px content column */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 700px) {
  .container { padding: 0 20px; }
}

/* ---------- Keyframes (hero 9s auto-loop + shared) ---------- */
@keyframes hpop {
  0%, 14%   { opacity: 0; transform: translateY(8px) scale(.98); }
  22%, 80%  { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(-4px) scale(.99); }
}
@keyframes hsweep {
  0%, 10%   { background-size: 0% 100%; }
  30%, 78%  { background-size: 100% 100%; }
  90%, 100% { background-size: 0% 100%; }
}
@keyframes hcaret {
  0%, 45%   { opacity: 0; }
  5%, 40%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hpulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(126, 200, 227, .25), 0 0 0 0 rgba(126, 200, 227, .45); }
  50%      { box-shadow: 0 8px 20px rgba(126, 200, 227, .35), 0 0 0 8px rgba(126, 200, 227, 0); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes orbitpulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@keyframes dash { to { stroke-dashoffset: -16; } }
@keyframes spinslow { to { transform: rotate(360deg); } }
@keyframes dropin {
  0%   { opacity: 0; transform: translateY(-8px) scale(.96); }
  100% { opacity: 1; transform: none; }
}

/* Respect users who prefer reduced motion: disable everything. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}