/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-synthesis: none;
  line-height: 1.6;
  color: var(--white);
  background: var(--blue);
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* Sprite holder (inline SVG symbols) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Animated background */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--blue-light), var(--blue) 55%, var(--blue-deep));
}
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; will-change: transform; }
.b1 { width: 46vmax; height: 46vmax; background: #5b94ff; top: -18vmax; inset-inline-start: -14vmax; animation: drift 18s ease-in-out infinite alternate; }
.b2 { width: 40vmax; height: 40vmax; background: var(--blue-night); bottom: -16vmax; inset-inline-end: -12vmax; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1;
  padding: .95rem 1.7rem;
  border: 2px solid var(--white);
  border-radius: var(--radius);
  background: var(--white); color: var(--blue);
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s;
  box-shadow: 0 10px 24px rgba(0, 20, 80, .28);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: var(--glass); color: var(--white); box-shadow: none; border-color: var(--line); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: var(--glass-strong); }
.btn--sm { padding: .65rem 1.1rem; font-size: .95rem; }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.paused .blob, .paused .item, .paused .cube { animation-play-state: paused !important; }