/* Global reset + page defaults */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-ink);
  font: 400 16px/20px var(--font); letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Sections are stacked vertically, each full width */
main > section, main > footer { width: 100%; }

/* A section well off screen stops animating (js/main.js toggles .is-offscreen): its looping
   demos would otherwise restyle, lay out and repaint every frame while nobody can see them. */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* Scroll reveal (driven by js/main.js) */
/* Lightship-style entrance: rise from below with a hard ease-out, siblings staggered 80ms (js sets --i) */
:root { --rise: 110px; --rise-ease: cubic-bezier(0, 1, 0.4, 1); }
[data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity 1s var(--rise-ease), transform 1s var(--rise-ease); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Split headings: each word rises from under its own line mask, 30ms apart */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(115%); transition: transform .9s var(--rise-ease); transition-delay: calc(var(--i, 0) * 90ms + var(--wi, 0) * 35ms); }
.is-visible.split .w > span, .is-visible .split .w > span { transform: none; }

/* FAQ answer text rises in after the panel opens */
.faq .faq-a p { opacity: 0; transform: translateY(16px); transition: opacity .35s var(--rise-ease), transform .35s var(--rise-ease); }
.faq .faq-item.is-open .faq-a p { opacity: 1; transform: none; transition-delay: .08s; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 767px) {
  :root { --rise: 60px; }
}

/* Back-to-top button — appears once the footer is in view (js/main.js) */
.to-top {
  position: fixed; right: 32px; bottom: 32px; z-index: 50;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--brand-secondary); color: var(--text-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(8,42,28,.25);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background-color .25s ease;
}
.to-top img { width: 24px; height: 24px; transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand-accent); }
@media (max-width: 767px) { .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } }

/* line breaks that only make sense on wide screens */
@media (max-width: 767px) { .br-desktop { display: none; } }

/* keep "AS/400 (IBM i)" on one line everywhere */
.nowrap { white-space: nowrap; }