/* Landing page — page-level rules only. Layout stays inline in index.html (style-src allows 'unsafe-inline');
   every colour, radius and font comes from /landing/ds/tokens (same values as src/styles/tokens.css). */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover, #F2B95C); }
img { max-width: 100%; }

/* Hero: the animation engine renders a playback bar under the canvas for authoring — not for visitors. */
.hero-stage [data-om-starter="animations-v3"] { background: var(--radar-bg) !important; }
.hero-stage [data-om-starter="animations-v3"] > div:nth-child(2) { display: none !important; }
.hero-stage svg[data-om-exportable-video-with-duration-secs] { box-shadow: none !important; }

/* Scroll reveal (reveal.js) */
.reveal-pending { opacity: 0; transform: translateY(16px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-pending.reveal-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 26px !important; }
}