* { box-sizing: border-box; }
  body { margin: 0; background: var(--bone); }
  .page { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

  /* ---------- header ---------- */
  .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: rgba(250,249,246,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: transform .3s var(--ease); }
  .hdr.hide { transform: translateY(-100%); }
  .navlink { font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--navy); opacity: .82; transition: opacity .2s var(--ease); }
  .navlink:hover { opacity: 1; }
  .foot-mark, .foot-mark.navy { border-bottom-color: var(--red) !important; }
  .hdr-link { position: relative; z-index: 1; padding: 8px 15px; border-radius: 999px; transition: background .2s var(--ease), opacity .2s var(--ease); }

  /* ---------- reveal ---------- */
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .rv.in { opacity: 1; transform: none; }
  .rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }

  /* ---------- texture ---------- */
  .halftone-l { background-image: radial-gradient(rgba(21,34,61,.08) 1.1px, transparent 1.2px); background-size: 12px 12px; background-position: 0 0; }
  .halftone-d { background-image: radial-gradient(rgba(249,248,245,.07) 1.1px, transparent 1.2px); background-size: 12px 12px; background-position: 0 0; }

  /* ---------- card lift ---------- */
  .lift { transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1), border-color .16s cubic-bezier(.4,0,.2,1); }
  .lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-2); transition: transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .12s ease-out, border-color .12s ease-out; }

  /* ---------- hero dashboard animation ---------- */
  .floaty { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .pipe-fill { animation: pipeFill 9s var(--ease) infinite; }
  @keyframes pipeFill { 0% { width: 6%; } 14% { width: 24%; } 40% { width: 50%; } 64% { width: 76%; } 86%,100% { width: 94%; } }
  .stg { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; }
  .stg.s0 { animation: stg0 9s var(--ease) infinite; }
  .stg.s1 { animation: stg1 9s var(--ease) infinite; }
  .stg.s2 { animation: stg2 9s var(--ease) infinite; }
  .stg.s3 { animation: stg3 9s var(--ease) infinite; }
  @keyframes stg0 { 0%,12% { opacity: 1; } 16%,100% { opacity: 0; } }
  @keyframes stg1 { 0%,14% { opacity: 0; } 18%,38% { opacity: 1; } 42%,100% { opacity: 0; } }
  @keyframes stg2 { 0%,40% { opacity: 0; } 44%,62% { opacity: 1; } 66%,100% { opacity: 0; } }
  @keyframes stg3 { 0%,64% { opacity: 0; } 68%,98% { opacity: 1; } }
  .ringdot { animation: ringdot 1.4s ease-out infinite; }
  @keyframes ringdot { 0% { box-shadow: 0 0 0 0 rgba(242,73,46,.45); } 70%,100% { box-shadow: 0 0 0 8px rgba(242,73,46,0); } }
  .bookchip { opacity: 0; animation: bookchip 9s var(--ease) infinite; }
  @keyframes bookchip { 0%,62% { opacity: 0; transform: translateY(6px) scale(.96); } 68%,98% { opacity: 1; transform: none; } }
  .gbar { transform-origin: bottom; animation: gbar 1.1s var(--ease) both; }
  @keyframes gbar { from { transform: scaleY(.12); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }

  /* ---------- solution rail: spark travels the path (JS-driven for perfect sync) ---------- */
  .rail-fill { opacity: 0; }
  .rail-comet { opacity: 0; }
  .step-chip { will-change: transform; }

  @media (max-width: 980px) {
    .nav-links { display: none !important; }
    .two { grid-template-columns: 1fr !important; }
    .teaser-rail { flex-direction: column !important; gap: 28px !important; }
    .teaser-rail .rail-line, .teaser-rail .rail-fill, .teaser-rail .rail-comet { display: none !important; }
    .teaser-rail .step { max-width: none !important; }
  }
  @media (prefers-reduced-motion: reduce), (max-width: 980px) {
    .floaty { animation: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pipe-fill, .stg, .ringdot, .bookchip, .gbar, .floaty, .rail-fill, .rail-comet, .step-chip { animation: none !important; }
    .stg.s3 { opacity: 1 !important; }
    .pipe-fill { width: 94% !important; }
    .rail-comet { opacity: 0 !important; }
    .rail-fill { opacity: 0 !important; }
    .step-chip { transform: none !important; }
  }
  [data-motion="off"] .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-motion="off"] .pipe-fill, [data-motion="off"] .stg, [data-motion="off"] .ringdot, [data-motion="off"] .bookchip, [data-motion="off"] .gbar, [data-motion="off"] .floaty, [data-motion="off"] .rail-fill, [data-motion="off"] .rail-comet, [data-motion="off"] .step-chip { animation: none !important; }
  [data-motion="off"] .stg.s3 { opacity: 1 !important; }
  [data-motion="off"] .pipe-fill { width: 94% !important; }
  [data-motion="off"] .rail-comet { opacity: 0 !important; }
  [data-motion="off"] .rail-fill { opacity: 0 !important; }
  [data-motion="off"] .step-chip { transform: none !important; }