/* Shared enhancements for the hosted site and the standalone upload. */
html::after { content: ''; position: fixed; z-index: 30; inset: 0 0 auto; height: 3px; background: var(--orange); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; pointer-events: none; }
.hero h1 em { display: inline-block; position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 4%; right: -3%; bottom: -10px; height: 5px; background: var(--orange); border-radius: 50%; transform: rotate(-4deg); transform-origin: left; animation: draw-line 1s .45s both; }
.hero-copy { animation: arrival .9s cubic-bezier(.2,.7,.2,1) both; }
.showcase { translate: var(--pointer-x, 0px) var(--pointer-y, 0px); transition: translate .3s ease-out; }
.browser-card { animation: browser-float 7s ease-in-out infinite; }
.phone-card { animation: phone-float 6s ease-in-out infinite; }
.floating-note { animation: note-float 5s ease-in-out infinite; }
.showcase-glow { background: radial-gradient(circle at 32% 30%, #efff9b, var(--acid) 58%, #bde341); animation: glow-breathe 8s ease-in-out infinite; }
.hero::before { animation: grid-arrival 1.2s both; }
.motion-toggle { display: none; margin: 12px auto 20px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 12px; cursor: pointer; }
.enhanced .motion-toggle:not([hidden]) { display: block; }
.motion-toggle:hover { background: var(--acid); }
.interactive-tools { display: none; }
.enhanced .interactive-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; }
.service-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-button { height: auto; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 11px 18px; cursor: pointer; transition: background .2s, color .2s, translate .2s; }
.filter-button:hover { background: var(--paper-deep); translate: 0 -2px; }
.filter-button[aria-pressed="true"] { background: var(--ink); color: var(--acid); border-color: var(--ink); }
.filter-status { margin: 0; font-size: 13px; color: #64666a; }
.service-grid { border: 0; gap: 14px; }
.service-grid .service-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #faf8f3; transition: background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.service-grid .service-card[hidden] { display: none !important; }
.service-card::after { content: ''; position: absolute; height: 4px; bottom: 0; left: 0; right: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.service-card:nth-child(2n)::after { background: var(--acid); }
.service-card:hover { border-color: #a9ad9d; box-shadow: 0 18px 32px #17191d12; }
.service-card:hover::after { transform: scaleX(1); }
.service-top svg, .service-top b { transition: transform .4s, color .4s; }
.service-card:hover .service-top svg, .service-card:hover .service-top b { transform: rotate(-12deg) scale(1.2); color: var(--orange); }
.steps li { transition: padding-left .3s, background .3s; }
.steps li:hover { padding-left: 12px; background: #ffffff06; }
.nav-links a { position: relative; padding-block: 8px; }
.nav-links a::after { content: ''; height: 2px; position: absolute; bottom: 0; left: 0; right: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.text-link { border-radius: 999px; background: var(--acid); padding: 16px 23px; transition: background .2s, gap .2s; }
.text-link:hover { color: var(--ink); background: #e5ff8f; gap: 16px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
.reveal-item { transition: opacity .65s var(--reveal-delay, 0s), translate .65s var(--reveal-delay, 0s); }
.reveal-pending { opacity: 0; translate: 0 28px; }
.tab-hidden *, .motion-off * { animation-play-state: paused !important; }
html:not(.enhanced) *, html:not(.enhanced) *::before, html:not(.enhanced) *::after { animation: none !important; }
.motion-off .reveal-item { transition: none; opacity: 1; translate: none; }
.motion-off .showcase { translate: none; }
@keyframes arrival { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw-line { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes grid-arrival { from { opacity: 0; } to { opacity: .42; } }
@keyframes browser-float { 0%,100% { transform: translateY(0) rotate(2.8deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes phone-float { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(10px) rotate(-4deg); } }
@keyframes note-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes glow-breathe { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.07); } }
@media (max-width: 600px) {
  .service-filters { gap: 7px; }
  .filter-button { padding: 11px 14px; }
  .hero h1 em::after { height: 3px; bottom: -7px; }
  .browser-card, .phone-card, .floating-note, .showcase-glow { animation-duration: 10s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
  .showcase { translate: none; }
}