* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--accent-2);
  color: #fff;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ keyframes ============ */
@keyframes scrollFlow {
  0% { background-position: 0 -120%; }
  100% { background-position: 0 120%; }
}

@keyframes seamGlow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 14px 40px rgba(20,70,200,0.45); }
  50% { box-shadow: 0 18px 60px rgba(60,139,255,0.85); }
}

@keyframes heroDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* ============ scroll reveal ============ */
[data-anim] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.16,.7,.3,1), transform 1.05s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}

[data-anim="up"] { transform: translateY(44px); }
[data-anim="left"] { transform: translateX(-50px); }
[data-anim="right"] { transform: translateX(50px); }
[data-anim="fade"] { transform: none; }
[data-anim="card"] { transform: translateY(56px) scale(.94); }

[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

/* ============ responsive line-break helper ============ */
/* hide on mobile (let text wrap naturally), show as a real <br> from tablet up */
.lbreak {
  display: none;
}

@media (min-width: 768px) {
  .lbreak {
    display: initial;
  }
}

/* force a line break on all viewports, including mobile (TOP page hero) */
.lbreak--always {
  display: initial;
}

/* ============ inline icon set ============ */
.icon-svg {
  display: inline-block;
  width: 28px;
  height: 28px;
  stroke: var(--accent-3);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn-cta {
    animation: none !important;
  }
}