/* Motion enhances fully visible content; no script is required to read the page. */
.hero h1 .title-first { color: var(--ink); }
.hero .hero-grid { position: relative; z-index: 1; }
.hero-panel .signal { position: relative; transition: background-color .5s ease; }
.hero-panel .signal b { transition: background-color .5s ease, color .5s ease, box-shadow .5s ease; }
.hero-panel .signal.is-active { background: rgba(155,210,45,.045); }
.hero-panel .signal.is-active b { background: var(--lime); color: var(--navy); box-shadow: 0 0 20px rgba(155,210,45,.12); }
.hero-panel .step-progress { position: absolute; display: block; height: 2px; left: 57px; right: 0; bottom: 0; background: var(--lime); transform: scaleX(var(--step-progress,0)); transform-origin: left; }
.motion-control { display: block; position: relative; z-index: 2; margin: 18px 0 0; padding: 8px 12px; min-height: 40px; border: 1px solid #506473; border-radius: 999px; background: transparent; color: #dce8ed; font: inherit; font-size: 12px; cursor: pointer; }
.motion-control[hidden] { display: none; }
.motion-control:hover { border-color: var(--lime); color: white; }
.hero-panel::after { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero.motion-enabled .eyebrow { animation: mdgit-enter .65s both; }
  .hero.motion-enabled h1 > span { display: inline-block; animation: mdgit-enter .8s .12s both; }
  .hero.motion-enabled h1 > span:last-child { animation-delay: .28s; }
  .hero.motion-enabled .lead { animation: mdgit-enter .8s .4s both; }
  .hero.motion-enabled .actions { animation: mdgit-enter .7s .52s both; }
  .hero.motion-enabled .hero-panel { animation: mdgit-enter .9s .25s both; }
  .hero.motion-enabled .hero-panel::after { animation: mdgit-float 7s ease-in-out infinite; }
  .hero.motion-enabled::before { content: ''; position: absolute; width: 52%; height: 100%; top: -15%; right: -5%; background: radial-gradient(ellipse,rgba(155,210,45,.13),transparent 65%); pointer-events: none; animation: mdgit-halo 14s ease-in-out infinite alternate; }
  .hero.motion-paused::before,.hero.motion-paused .hero-panel::after { animation-play-state: paused; }
  .motion-reveal { animation: mdgit-enter .7s var(--reveal-delay,0ms) both; }
  .btn { transition: transform .2s ease, box-shadow .2s ease; }
  .hero .actions .btn::after { content: '↗'; display:inline-block; margin-left:10px; transition: transform .2s ease; }
  .category-grid .ph-icon, .text-link > span, .product-visual img { transition: transform .3s ease; }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(11,34,51,.13); }
    .hero .actions .btn:hover::after,.text-link:hover > span { transform: translate(3px,-2px); }
    .category-grid a:hover .ph-icon { transform: translateY(-3px) rotate(-5deg); }
    .product-visual:hover img { transform: scale(1.045); }
  }
  @media (max-width: 600px) {
    .hero.motion-enabled::before { animation: none; }
    .hero.motion-enabled .hero-panel::after { animation-duration: 10s; }
  }
}
@keyframes mdgit-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mdgit-float { 0%,100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-9px) rotate(16deg); } }
@keyframes mdgit-halo { from { transform: translate(-3%,0); } to { transform: translate(6%,8%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero *, .hero::before, .hero-panel::after, .motion-reveal, .btn, .card, .category-grid .ph-icon, .product-visual img { animation: none!important; transition: none!important; }
  .card:hover,.btn:hover,.product-visual:hover img { transform: none!important; }
}