@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('inter-700.woff2') format('woff2');}
* { font-family: 'Inter', system-ui, sans-serif; }
    .tool-card { transition: all 0.3s ease; }
    .tool-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(37,99,235,0.12); }
    .drop-zone { border: 2px dashed #CBD5E1; transition: all 0.3s ease; }
    .drop-zone.dragover { border-color: #2563EB; background: #EFF6FF; }
    .fade-in { animation: fadeIn 0.4s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .progress-bar { transition: width 0.5s ease; }
    .tab-active { background: #2563EB; color: white; }
    .tab-inactive { background: #F1F5F9; color: #475569; }
    .tab-inactive:hover { background: #E2E8F0; }
    .tool-section { display: none; }
    .tool-section.active { display: block; }
    .nav-link { position: relative; }
    .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #2563EB; transition: width 0.3s; }
    .nav-link:hover::after { width: 100%; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
    .glow { box-shadow: 0 0 20px rgba(37,99,235,0.15); }

/* ===== Mobile & responsive improvements ===== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button, .drop-zone, summary { touch-action: manipulation; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.chev { transition: transform .2s; }
main .flex.items-center.justify-between { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767px) {
  main { padding-left: 1rem; padding-right: 1rem; padding-top: 1.25rem; }
  h1 { font-size: 1.75rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.35rem !important; }
  .drop-zone { padding: 1.5rem 1rem !important; }
  input[type="text"], input[type="number"], select, textarea { font-size: 16px !important; min-height: 44px; }
  main button { min-height: 48px; }
  #mobileMenu a { padding: .75rem .25rem; font-size: 1rem; border-bottom: 1px solid #F1F5F9; }
  .tool-section .p-6 { padding: 1rem !important; }
  footer ul li { margin-bottom: .25rem; }
  footer a { display: inline-block; padding: .25rem 0; }
  #before-after figure { padding: .75rem; }
}
@media (hover: none) { .tool-card:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } html { scroll-behavior: auto; } }

/* ===== Image motion (subtle, respects reduced motion) ===== */
.media-frame{overflow:hidden;border-radius:.75rem;border:1px solid #f1f5f9;background:linear-gradient(110deg,#eef2f7 8%,#f8fafc 18%,#eef2f7 33%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.media-frame.loaded{animation:none;background:#fff}
.media-frame img{display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s ease;opacity:0}
.media-frame.loaded img,.no-js-img .media-frame img{opacity:1}
figure:hover .media-frame img{transform:scale(1.04)}
@keyframes shimmer{to{background-position-x:-200%}}
figure.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
figure.reveal.in{opacity:1;transform:none}
figure.reveal:nth-of-type(2){transition-delay:.14s}
@media (prefers-reduced-motion:reduce){.media-frame{animation:none}.media-frame img{transition:none}figure.reveal{opacity:1;transform:none;transition:none}figure:hover .media-frame img{transform:none}}