/* Reveal/motion, landing responsive, dark theme */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.reveal.in { opacity: 1; transform: translateY(0); }

.hero-anim {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn 0.9s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-anim { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1080px) {
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  h1.hero-title { max-width: 100%; }
}

@media (max-width: 900px) {
  .features-grid, .use-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .presets-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; border-top: 1px solid var(--border-light); }
  .step { border-right: 0; border-bottom: 1px solid var(--border-light); padding: 28px 0; }
  .step:not(:first-child) { padding-left: 0; }
  .step:last-child { border-bottom: 0; padding-bottom: 6px; }
  .step-num::after { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .tool-controls { width: 100%; justify-content: space-between; }
}

@media (max-width: 640px) {
  :root { --radius-card: 26px; --radius-inner: 20px; --gutter: 20px; }
  .cta-card { padding: 32px 24px; }
  .feature-card, .use-card { padding: 26px 24px; }
  .preset-card { padding: 18px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-cta { width: 100%; flex-direction: row; justify-content: center; gap: 10px; }
  .hero-cta .btn-ghost { display: none; }
  .hero-cta .btn { flex: 0 1 auto; width: auto; min-width: 0; padding: 0 24px; gap: 10px; }
  .hero-cta .btn .txt span { font-size: 13px; }
  .tool-card { padding: 12px; }
  .settings-grid { grid-template-columns: 1fr; }
  .seg-btn { flex: 1 1 auto; justify-content: center; }
  .build-row { flex-direction: column-reverse; align-items: stretch; }
  .build-btn { width: 100%; }
  .build-meta { text-align: center; }
  .queue-hint { display: none; }
  .q-index { display: none; }
  .q-handle { display: none; }
  .q-name { font-size: 13px; }
  .section { padding: 60px 0; }
  .presets-grid { grid-template-columns: 1fr; }
  .lightbox { padding: 14px; }
  .lightbox-close { top: 20px; right: 20px; }
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .header-actions > .btn { display: none; }
  .footer-cols { grid-template-columns: 1fr; }
  .tool-card { padding: 10px; }
  .tool-file { max-width: 100%; }
  .dropzone-box { padding: 48px 24px; }
  .dropzone-title { font-size: 22px; }
  .q-thumb { width: 54px; height: 42px; }
  .q-btn { width: 28px; height: 28px; }
  .success-actions { width: 100%; flex-direction: column; }
  .success-actions .btn { width: 100%; }
}

html[data-theme="dark"] {
  --bg-page: #0f1012;
  --card-bg: #1a1c1f;
  --card-sub-bg: #232529;
  --text-main: #f1f2f3;
  --text-muted: #a9abaf;
  --text-faint: #75777c;
  --text-inverted: #0a0a0a;
  --btn-black: #ffffff;
  --border-light: #2b2d31;
  --border-mid: #36383d;
  --shadow-card:
    1px 1px 2px rgba(0, 0, 0, 0.35),
    6px 6px 16px rgba(0, 0, 0, 0.35),
    16px 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-float: 0px 20px 48px -10px rgba(0, 0, 0, 0.6), 0px 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0px 16px 9px 0px rgba(0, 0, 0, 0.3), 0px 7px 7px 0px rgba(0, 0, 0, 0.4), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  --shadow-btn-hover: 0px 28px 16px 0px rgba(246, 88, 88, 0.2), 0px 10px 10px 0px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .site-header { background: rgba(15, 16, 18, 0.8); }
html[data-theme="dark"] .site-header.is-stuck { background: rgba(15, 16, 18, 0.93); }
html[data-theme="dark"] .btn-ghost:hover { color: #0a0a0a; }
html[data-theme="dark"] .menu-toggle:hover { color: #0a0a0a; }
html[data-theme="dark"] .logo-mark::after { border-color: #0a0a0a; }
html[data-theme="dark"] .logo-mark .logo-mark-bg { fill: #ffffff; }
html[data-theme="dark"] .logo-mark .logo-mark-icon { stroke: #0a0a0a; }
html[data-theme="dark"] .site-footer .logo-mark .logo-mark-bg { fill: #ffffff; }
html[data-theme="dark"] .site-footer .logo-mark .logo-mark-icon { stroke: #0a0a0a; }
html[data-theme="dark"] .feature-card:hover .feature-icon,
html[data-theme="dark"] .use-card:hover .feature-icon { color: #0a0a0a; }
html[data-theme="dark"] .marquee span { color: rgba(255, 255, 255, 0.34); }
html[data-theme="dark"] .site-footer { background: #0a0a0a; color: #ffffff; }
html[data-theme="dark"] .site-footer .logo-mark::after { border-color: #0a0a0a; }