.landing-tools .home-tool-grid > .feature-card {
  isolation: isolate; overflow: hidden; min-width: 0; min-height: 154px; padding: 18px;
  border-color: color-mix(in srgb, var(--tool-color) 19%, var(--line));
  background: linear-gradient(140deg, var(--tool-bg), var(--canvas) 84%);
  box-shadow: 0 5px 17px #29314308;
}
.landing-tools .feature-card::before,.landing-tools .feature-card::after {
  content: ''; position: absolute; z-index: -1; right: 6px; bottom: -23px;
  width: 75px; height: 86px; border-radius: 13px;
  border: 1px solid color-mix(in srgb,var(--tool-color) 22%,transparent);
  background: color-mix(in srgb,var(--tool-bg) 52%,transparent);
  transform: rotate(-15deg); transition: transform .25s;
}
.landing-tools .feature-card::after { right: 23px; bottom: -33px; transform: rotate(12deg); }
.landing-tools .feature-card:hover::before { transform: translateY(-8px) rotate(-20deg); }
.landing-tools .feature-card:hover::after { transform: translateY(-4px) rotate(7deg); }
.landing-tools .feature-icon { background: var(--canvas); border: 1px solid color-mix(in srgb,var(--tool-color) 14%,transparent); }
.landing-tools .feature-card h2 { font-weight: 700; overflow-wrap: anywhere; }
.landing-tools .feature-card p { white-space: normal; line-height: 1.5; }
.landing-tools .feature-arrow { display: grid; place-items: center; width: 29px; height: 29px; inset: 15px 15px auto auto; border-radius: 50%; background: var(--canvas); color: var(--tool-color); }
.landing-tools .feature-arrow svg { width: 16px; height: 16px; }
.motion-showcase { margin-top: clamp(48px,7vw,90px); }
.motion-heading { text-align: center; margin-bottom: clamp(23px,4vw,40px); }
.motion-heading h2 { margin: 0 0 7px; font-size: clamp(29px,4.2vw,48px); font-weight: 740; letter-spacing: -.05em; }
.motion-heading p { margin: 0; color: #515b6d; font-size: 16px; }
.motion-list { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.motion-row {
  --demo-accent:#5062a9; --demo-soft:#e7ecfb; --demo-light:#f5f7fe;
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); align-items:stretch; gap:13px; padding:11px;
  border:1px solid var(--line); border-radius:22px; background:var(--canvas); box-shadow:0 8px 28px #26304208;
}
.motion-row:nth-child(even) { grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); }
.motion-row:nth-child(even) .motion-stage { grid-area:1/1; }
.motion-row:nth-child(even) .motion-copy { grid-area:1/2; }
.motion-ocr { --demo-accent:#29765d; --demo-soft:#dff1e8; --demo-light:#f3faf6; }
.motion-pdf { --demo-accent:#a9463c; --demo-soft:#f8e5e1; --demo-light:#fff7f4; }
.motion-reader { --demo-accent:#715b98; --demo-soft:#eee6f8; --demo-light:#faf6fd; }
.motion-copy { align-self:center; min-width:0; padding:clamp(13px,3.4vw,41px); }
.motion-number { display:grid; place-items:center; width:35px; height:35px; margin-bottom:13px; border-radius:10px; color:var(--demo-accent); background:var(--demo-soft); font-size:14px; font-weight:750; }
.motion-copy h3 { margin:0 0 8px; font-size:clamp(22px,2.5vw,34px); line-height:1.27; font-weight:720; letter-spacing:-.035em; }
.motion-copy p { max-width:33ch; margin:0 0 9px; color:#515b6d; font-size:16px; }
.motion-copy a { display:inline-flex; align-items:center; min-height:44px; gap:7px; color:var(--demo-accent); font-weight:700; }
.motion-copy a svg { width:17px; height:17px; transition:transform .2s; }
.motion-copy a:hover svg { transform:translateX(4px); }
.motion-stage {
  position:relative; display:grid; place-items:center; overflow:hidden; min-width:0; min-height:291px; padding:clamp(19px,4vw,41px); border-radius:16px;
  background:radial-gradient(circle at 16% 18%,#fff9,transparent 40%),radial-gradient(circle at 80% 84%,color-mix(in srgb,var(--demo-accent) 17%,transparent),transparent 56%),linear-gradient(135deg,var(--demo-light),var(--demo-soft));
}
.motion-window { width:min(100%,410px); overflow:hidden; border:1px solid #fff; border-radius:12px; background:#fff; color:#263044; box-shadow:0 17px 37px #3341552b; }
.motion-bar { display:flex; align-items:center; justify-content:space-between; min-height:36px; padding:0 11px; border-bottom:1px solid #e9edf3; background:#fbfcfe; font-size:12px; font-weight:670; }
.motion-bar > i { width:5px; height:5px; margin-right:16px; border-radius:50%; background:#abb4c4; box-shadow:8px 0 #c5cdd8,16px 0 #d6dce6; }
.motion-bar svg,.demo-format-line svg,.demo-result svg,.demo-scan-layout > svg { width:15px; height:15px; color:var(--demo-accent); }
.motion-body { padding:10px; }
.demo-landscape { position:relative; overflow:hidden; height:105px; border-radius:7px; }
.demo-landscape svg { width:100%; height:100%; stroke:none; }
.demo-landscape span { position:absolute; bottom:6px; left:7px; padding:2px 6px; border-radius:5px; background:#fff; font-size:11px; }
.demo-format-line,.demo-result { display:flex; align-items:center; gap:6px; font-size:11px; }
.demo-format-line { padding:8px 0; }
.demo-format-line b,.demo-extracted > b { padding:2px 6px; border-radius:5px; background:var(--demo-light); color:var(--demo-accent); font-size:11px; }
.demo-meter { flex:1; height:5px; overflow:hidden; border-radius:8px; background:var(--demo-soft); }
.demo-meter i { display:block; height:100%; transform-origin:left; border-radius:inherit; background:var(--demo-accent); }
.demo-result { justify-content:space-between; padding:5px 7px; border:1px solid #e7eaf1; border-radius:7px; }
.demo-result b { white-space:nowrap; color:var(--demo-accent); }
.demo-scan-layout { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:7px; }
.demo-scan-layout > svg { align-self:center; }
.demo-scan,.demo-extracted { position:relative; overflow:hidden; min-height:145px; padding:9px; border:1px solid #e7edf0; border-radius:8px; background:#f3f6f4; }
.demo-extracted { background:#fff; }
.demo-scan strong,.demo-extracted strong,.demo-book strong { display:block; margin:9px 0 5px; font-size:13px; }
.demo-scan p,.demo-extracted p,.demo-book p { margin:0; color:#536174; font-size:11px; }
.demo-scan small,.demo-extracted b { position:absolute; bottom:7px; }
.demo-scan i { position:absolute; top:12%; inset-inline:0; height:2px; opacity:0; background:#399e79; box-shadow:0 4px 18px #43b789; }
.demo-pages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:5px 3px 10px; }
.demo-paper { display:grid; align-content:center; gap:6px; min-height:103px; padding:9px; border:1px solid #e5e8ee; border-radius:8px; background:#f9fafd; }
.demo-paper i { height:4px; border-radius:8px; background:#dfe4ee; }
.demo-paper i:last-child { width:65%; }
.demo-selected { border-color:var(--demo-accent); background:var(--demo-light); color:var(--demo-accent); }
.demo-book-layout { display:grid; grid-template-columns:minmax(62px,.36fr) minmax(0,1fr); gap:7px; padding:4px; border-radius:7px; background:#f9f5ec; }
.demo-toc { display:grid; align-content:start; gap:6px; padding:6px 3px; color:#635d73; font-size:11px; }
.demo-toc strong { padding:3px; border-radius:5px; background:var(--demo-soft); color:var(--demo-accent); }
.demo-book { min-height:139px; padding:9px; border:1px solid #eae3d7; border-radius:7px; background:#fffdf9; }
.demo-book strong { font-family:Georgia,"Songti SC",SimSun,serif; font-size:19px; }
.demo-book .demo-meter { margin-top:12px; }
.demo-book .demo-meter i { width:62%; }
.motion-replay { position:absolute; right:8px; bottom:8px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--demo-accent); box-shadow:0 3px 10px #33415526; }
.motion-replay:hover { transform:rotate(-12deg); }
.motion-replay svg { width:18px; height:18px; }
.is-playing .motion-window { animation:demo-arrive .55s ease both; }
.is-playing .demo-meter i { animation:demo-fill 1.35s .45s ease both; }
.is-playing .demo-result { animation:demo-arrive .45s 1.45s ease both; }
.is-playing .demo-extracted,.is-playing .demo-book { animation:demo-arrive .55s .9s ease both; }
.is-playing .demo-scan i { animation:demo-scan 1.35s .25s ease both; }
.is-playing .demo-selected { animation:demo-pick .6s .55s ease both; }
.is-playing .demo-selected:nth-child(3) { animation-delay:.9s; }
@keyframes demo-arrive { from { opacity:.25; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes demo-fill { from { transform:scaleX(.03); } to { transform:scaleX(1); } }
@keyframes demo-scan { 0% { opacity:0; top:12%; } 15%,85% { opacity:1; } 100% { opacity:0; top:88%; } }
@keyframes demo-pick { 0% { border-color:#e5e8ee; background:#f9fafd; } 60% { transform:translateY(-5px); } 100% { border-color:var(--demo-accent); background:var(--demo-light); transform:translateY(0); } }
html[data-theme=dark] .motion-row { background:#1d232e; border-color:#343b49; }
html[data-theme=dark] .motion-copy a { color:#e2d3fc; }
html[data-theme=dark] .motion-window :is(p,strong,b) { color:#343e4e !important; }
@media(max-width:760px) {
  .landing-tools .home-tool-grid > .feature-card { min-height:128px; padding:13px; }
  .landing-tools .feature-arrow { inset:10px 10px auto auto; }
  .motion-row,.motion-row:nth-child(even) { grid-template-columns:minmax(0,1fr); gap:2px; padding:7px; border-radius:16px; }
  .motion-row:nth-child(even) :is(.motion-copy,.motion-stage) { grid-area:auto; }
  .motion-copy { padding:11px 10px 6px; }
  .motion-copy p { max-width:none; font-size:15px; }
  .motion-number { width:32px; height:32px; margin-bottom:8px; }
  .motion-stage { min-height:244px; padding:12px 12px 52px; border-radius:11px; }
  .motion-replay { right:5px; bottom:5px; }
}
@media(max-width:390px) { .motion-body { padding:8px; } .demo-landscape { height:88px; } .demo-scan,.demo-extracted { padding-inline:6px; } }
@media(prefers-reduced-motion:reduce) { .is-playing *, .landing-tools .feature-card::before,.landing-tools .feature-card::after { animation:none !important; transition:none !important; } .motion-replay { display:none; } }

.format-ribbon > .ribbon-track { animation-duration: 92s; }
.format-ribbon .ribbon-group { min-width: max-content; }
.web-pair-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.web-pair {
  --pair-bg: #edf6f1; --pair-ink: #24634a;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 50px; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--canvas); color: var(--ink); font-size: 13px; font-weight: 620;
}
.web-pair strong { padding: 3px 6px; border-radius: 5px; color: var(--pair-ink); background: var(--pair-bg); font-size: 12px; }
.web-pair svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.web-pair:hover { border-color: var(--pair-ink); }
.web-pair.pair-pdf { --pair-bg:#f9ece8; --pair-ink:#9b493e; }
.web-pair.pair-data { --pair-bg:#ebf1fb; --pair-ink:#345b8c; }
.web-pair.pair-media { --pair-bg:#f1ecfa; --pair-ink:#684992; }
.web-pair.pair-document { --pair-bg:#f9f1e3; --pair-ink:#775a2b; }
@media (max-width: 840px) { .web-pair-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .home-tools-heading { align-items: flex-start; flex-wrap: wrap; }
  .web-pair-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.landing-tools .home-tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.landing-tools .feature-card.tone-red { --tool-color:#a83e32; --tool-bg:#fbefeb; }
@media (max-width: 760px) {
  .landing-tools .home-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}